美文网首页
Jstree权限勾选选中

Jstree权限勾选选中

作者: Harlin_ | 来源:发表于2017-05-12 15:51 被阅读517次

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

    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权限勾选选中

          本文链接:https://www.haomeiwen.com/subject/jyaztxtx.html