bootsraps treeview选中子节点自动选中父节点及反选

1548年前 (2017-10-23)javaScript4093

效果图:

图片.png

  1. 引入外部JS及CSS文件:

    <link href="${root!}/resource/css/bootstrap.min.css" rel="stylesheet">

    <script src="${root!}/resource/js/jquery.min.js?v=2.1.4"></script>
    <script src="${root!}/resource/js/bootstrap.min.js?v=3.3.6"></script>

      <script src="${root!}/resource/js/plugins/treeview/bootstrap-treeview.js"></script>

2.html容器部分:

 <div id="treeview"></div>

3.JS加载数据:

$(function() {
     $(".btn").click(function(){
         var node = '';
        var nodes = $('#treeview').treeview('getSelected');
        for (var key in nodes) {
            //console.log(nodes[key].F_URI);
            node += nodes[key].F_URI + ',';
        }
        $("#role").val(node);
     });

    $.getJSON('${root!}/admin/auth/action/tree',
    function(data) {
        $("#treeview").treeview({
            data: data,
            selectedIcon: "fa fa-check-square-o",
            nodeIcon:"fa fa-square-o",
            uncheckedIcon:"fa fa-square-o",
            selectable: true,
            multiSelect: true ,  //是否多选
                   onNodeSelected: function (event,node) {
                        var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                        if (selectNodes) { //子节点不为空,则选中所有子节点
                            $("#treeview").treeview('selectNode', [selectNodes, { silent: true }]);
                        }
           
                         setParentNodeCheck(node,'1');//自动选择父节点
                      },
                      onNodeUnselected: function (event, node) {
                        var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                        if (selectNodes) { //子节点不为空,则选中所有子节点
                            $("#treeview").treeview('unselectNode', [selectNodes, { silent: true }]);
                        }
    
                     }
                   
        });

    });

});

      function getChildNodeIdArr(node) {
            var ts = [];
            if (node.nodes) {
                for (x in node.nodes) {
                    ts.push(node.nodes[x].nodeId);
                    if (node.nodes[x].nodes) {
                        var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                        for (j in getNodeDieDai) {
                            ts.push(getNodeDieDai[j]);
                        }
                    }
                }
            } else {
                ts.push(node.nodeId);
            }
            return ts;
        }

      function setParentNodeCheck(node,type) {
             var parentNode = $("#treeview").treeview("getParent", node);
            if (parentNode.nodes) {
                if(type=='1'){
                        $("#treeview").treeview('selectNode', [ parentNode, { silent: true } ]);
                         setParentNodeCheck(parentNode,'1');
                }else{//没用
                         $("#treeview").treeview('unselectNode', [ parentNode, { silent: true } ]);
                         setParentNodeCheck(parentNode,'2');
                }
            }
        }

本文原创,转载必追究版权。

分享给朋友:

相关文章

js动态加载复选框checkbox(XML串)

 首先,使用JS动态产生Checkbox可以采用如下类似的语句:代码如下:var checkBox=document.createElement("input");che...

MyEclipse 10 性能大优化

MyEclipse 10 性能大优化

 MyEclipse 10已发布,新版本的特性能够大大提高开发者的效率。但同时,由于电脑配置的原因,很多开发者在使用MyEclipse的时候,速度都不是很快,需要我们对MyEclipse进行...

jquery 操作html元素(及CSS)

jquery 操作html元素(及CSS)

 $("li").addClass("aui-user-view-cell aui-img") ;  //给元素添加样式$('#a1...

谈话让别人舒服的程度,决定你成功的高度

职场上,有这样两种截然相反的人:有人生怕别人舒服,尽量让别人不舒服,而只要自己舒服就行;还有一类人生怕别人不舒服,尽量让别人舒服,哪怕委屈自己。猎头公司猎聘的老总有几十万年薪的,也有几百万的,甚至有过...

程序员为什么不炫富

程序员为什么不炫富

 提到互联网,尤其是互联网工程师们,人们往往会想到两个词:“高薪”和“高压”。在知乎上“为什么很少见工资高的程序员炫富?”的问题下,一个得票很高的答案是:“乐意炫富的人,不是因为有钱,而是因为付出的少...

dwz+jfinal 市县下拉菜单二级联动(实例)

在DWZ文档中对组合框combox的是这样描述的:在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref。re...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。