bootstrap treeview 树状结构节点权限和反选

原创于 2018-06-11 18:30:30 发布 · 置顶 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootStrap-treeview #checknodes #treeview操作

bootstrap-treeview 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Bootstrap Treeview中实现树状结构的节点权限控制及反选功能。通过引入bootstrap-treeview.js库，并封装功能函数，可以方便地对选中节点进行迭代操作，参考treeview的API文档来实现统一对选中节点的处理。

1、引入bootstrap-treeview.js

2、封装功能函数

a、获取树状结构json数据及节点选中和反选事件

function customTreeInit(url,thetree){
    $.ajax({
        type:"get",
        url:url,
        data:null,
        datatype:"text",
        success:function(data){
            var treedate= $.parseJSON(data);
            thetree.treeview({
                showCheckbox:true,
                data: treedate,
                onNodeChecked: function(event, data) {
                    checknodes(data,thetree,'checkNode');
                    checknodes(data,thetree,'expandNode');
                },
                onNodeUnchecked  :function(event,data){
                    checknodes(data,thetree,'uncheckNode');
                }
            });
        },
        error: function(xmlhttprequest, textstatus, errorthrown) {
            layer.msg(xmlhttprequest.status,{icon:7});
            layer.msg(xmlhttprequest.readystate,{icon:7});
            layer.msg(textstatus,{icon:7});
        }
    });
}

b、适用于统一对选中的节点进行迭代操作 opt 参考treeview API文档

//节点多选函数
function checknodes(data,thetree,opt){
    thetree.treeview(opt, [ data.nodeId, { silent:true } ]);
    var nodes=data.nodes;
    for(var j in nodes){
        checknodes(nodes[j],thetree,opt);
    }
}