bootstrap treeview級聯勾選的正確姿勢
阿新 • • 發佈:2019-02-15
手動勾選使用的方法是:toggleNodeChecked方法$('#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 } });
因此,我們在做許可權查詢的時候,用這個方法。
根據原版裡的例子,思路是需要先找(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可以選中所有下級,上級也半選中狀體。 } } });