Jstree权限勾选选中

实现后台管理端树形权限勾选,没有使用默认勾选策略,默认勾选策略不是很人性化,自己通过事件实现策略,还是不是很完美。

Jstree权限勾选选中_第1张图片
QQ图片20170512154543.png

插件代码

$('#jstree1').jstree({
            'core': {
                'data': ${treeJson},
                'expand_selected_onload' : false
            },
            "checkbox" : {
                "keep_selected_style" : false,
                'three_state' : false,
                'tie_selection' : false
            },
            "plugins" : [ "checkbox" ]
        }).bind('loaded.jstree', function(event, jstree) {
            var $jstree = $('#jstree1').jstree(true);
            var data = jstree.instance._model.data;
            var firstSubKey;

            // 根据json参数勾选默认
            for(key in data) {
                if('#' === key) {
                    continue;
                }
                if(data[key].li_attr._checked) {
                    $jstree.check_node(key);
                }
                if(!firstSubKey && $jstree.get_node(key).parents.length == 1) {
                    firstSubKey = key;
                }
            }
            // 默认打开一级展示
            if(firstSubKey) {
                $jstree.close_all();
                $jstree.open_node(firstSubKey);
            }
        }).bind('open_node.jstree', function(event, jstree) {
            // 打开当前级关闭其它级展示
            var $jstree = $('#jstree1').jstree(true);
            var data = jstree.instance._model.data;
            var cur_node = jstree.node;
            for(key in data) {
                if(key !== cur_node.id && !isInArray(cur_node.parents, key)) {
                    $jstree.close_node(key);
                }
            }
        }).bind('check_node.jstree', function(event, jstree) {
            var $jstree = $('#jstree1').jstree(true);
            var data = jstree.instance._model.data;
            var cur_node = jstree.node;
            if(!$jstree.is_open(cur_node.id)) {
                $jstree.open_node(cur_node.id);
            }
            // 选中及所有父级
            $jstree.check_node(cur_node.parents);
        }).bind('uncheck_node.jstree', function(event, jstree) {
            // 取消其所有子级
            var $jstree = $('#jstree1').jstree(true);
            var data = jstree.instance._model.data;
            var cur_node = jstree.node;

            for(key in data) {
                var node = $jstree.get_node(key);
                if(cur_node.id === node.parent) {
                    $jstree.uncheck_node(key);
                }
            }
        });

获取选中id

var ids = [];
var $jstree = $('#jstree1').jstree(true);
var data = $jstree._model.data;
 for(key in data) {
      if($jstree.is_checked(key)) {
            ids.push(data[key].li_attr._id);
       }
 }

你可能感兴趣的:(Jstree权限勾选选中)