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

1547年前javaScript2713

效果图:

图片.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

相关文章

JS实现点击图片直接打开QQ对话框

这是使用了腾讯的web接口。 <a href="tencent://message/?uin=你的QQ号&Site=QQ交谈&Menu=yes" tar...

函数date_format(timestamp without time zone,unknow)不存在,没有匹配指定名称和参数类型的函数,您也许需要增加明确的类型转换

函数date_format(timestamp without time zone,unknow)不存在,没有匹配指定名称和参数类型的函数,您也许需要增加明确的类型转换

瀚高库报错:执行以下语句即可:CREATE OR REPLACE FUNCTION date_format(indate TIMESTAMP,&nbs...

Oracle 新建的表只能加引号才能查询出来怎么办

oracle数据库新建的表只能加引号才能查出来的解决办法:   CREATE TABLE "tour".""(  &nb...

知道mysql的索引吗?什么情况下索引不可用呢?

1普通索引:最基本的索引,没有任何限制  唯一索引:与"普通索引"类似,不同的就是:索引列的值必须唯一,但允许有空值。  主键索引:它 是一种特殊的唯一索引,不...

java实现根据ip定位地理位置(调用百度接口)

这里用的是若依的springboot框架,框架里自带的获取地理位置接口是调用的淘宝的,已经不可用。于是找到哦百度接口实现。调用百度接口:http://api.map.baidu.com/locatio...

java实现用ffmpeg 获取视频时长

首先需要引入ffmpeg.exe调用 int time = ConvertM3U8.getVideoTime(downloadPath);方法: st...

发表评论    

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