bootstrap treeview级联勾选的正确姿势

hotqin888

发布于 2018-09-11 15:07:07

1.4K0

发布于 2018-09-11 15:07:07

上一篇文章已经说过它自带级联功能。必须用这个：https://github.com/patternfly/patternfly-bootstrap-treeview

$('#tree').treeview({
                showCheckbox: true,
                data: [data], // data is not optional
                levels: 3,
                enableLinks: true,
                hierarchicalCheck:true,//级联勾选
                // propagateCheckEvent:true,
                highlightSearchResults:false,//搜索结果不高亮
                state: {
                  checked: true,
                  // disabled: true,
                  expanded: true,
                  // selected: true
                }
              });

手动勾选使用的方法是：toggleNodeChecked方法

因此，我们在做权限查询的时候，用这个方法。

根据原版里的例子，思路是需要先找（search）到这个目录的名称，然后选中（原版无联动功能），而目录名称很多是重复的，所以还是用patternfly里的find方法。

$.ajax({    
            type: 'GET',    
            dataType : "json",//返回数据类型  
            
            url: "/admin/role/getpermission",//请求的action路径  
            data: {roleid:row.Id,action:action,projectid:projectid}, 
               
            error: function () {//请求失败处理函数    
                alert('请求失败');    
            },  
            success:function(data){ //请求成功后处理函数。取到Json对象data
              // var findCheckableNodess = function() {
              //   return $('#tree').treeview('search', [ data, { ignoreCase: false, exactMatch: true } ]);//忽略大小写——这个只支持名称，名称有很多是重复的嘛。
              
              $('#tree').treeview('uncheckAll', { silent: true });//先把全部选中取消掉
              for(var i=0;i<data.length;i++){
                // alert(data[i]);
                var findCheckableNodess = function() {
                  return $('#tree').treeview('findNodes', [data[i], 'id']);//新版中的find方法，支持field字段，这里查id，id是唯一的，多么方便啊。
                }; 
                var checkableNodes = findCheckableNodess();
                // $('#tree').treeview('checkNode', [ checkableNodes, { silent: true } ]);//这个checknode只能选中一个。
                $('#tree').treeview('toggleNodeChecked', [ checkableNodes, { silent: true } ]);//这个togglenodechecked可以选中所有下级，上级也半选中状体。
              }
            }
          });