1. 程式人生 > >bootstrap treeview級聯勾選的正確姿勢

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可以選中所有下級,上級也半選中狀體。
              }
            }
          });