bootstrap treeview级联勾选的正确姿势

上一篇文章已经说过它自带级联功能。必须用这个: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可以选中所有下级,上级也半选中状体。
              }
            }
          });



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/78991829
上一篇engineercms利用pdf.js制作连续看图功能
下一篇beego利用casbin进行权限管理——第三节 策略查询
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭