ztree實現(xiàn)權(quán)限橫向顯示功能
最近在做權(quán)限功能的時候，采用的ztree實現(xiàn)的，但是產(chǎn)品要求最后一層的權(quán)限節(jié)點要橫向顯示。開始在網(wǎng)上找的解決方案是用css樣式把最后一層的display設(shè)置為inline。在我本地電腦上看了下。效果不錯。
但是，后來測試在用十年前的筆記本測這個功能的時候，發(fā)現(xiàn)特別的卡，導(dǎo)致瀏覽器都崩潰了。所以，性能優(yōu)化開始了。
1、同步改為異步，雖然不卡，但是功能不滿足，很多人勾選了一個父節(jié)點（模塊節(jié)點），就保存，此時子節(jié)點根本沒有，所以保存的數(shù)據(jù)是有問題的。
2、設(shè)置showIcon和showLine為false，發(fā)現(xiàn)速度有一丟丟的提升，但是產(chǎn)品還是不滿意。
3、仔細(xì)看了下，ztree的checkbox都是用span模擬的，搞個背景圖。憑直覺覺得用原生的checkbox要比用圖片模擬要強一些。說干就干，找了ztree提供的一個例子，稍作改造，效果還是很明顯的。用到的主要方法時addDiyDom。
下面把主要的代碼貼上來。
1、數(shù)據(jù)結(jié)構(gòu)，要求有一個isLeaf節(jié)點，標(biāo)記是否是子節(jié)點。
var zNodes =[
{ id:1, pId:0, name:"父節(jié)點 1", open:true,isLeaf:false},
{ id:11, pId:1, name:"葉子節(jié)點 1-1",isLeaf:true},
{ id:12, pId:1, name:"葉子節(jié)點 1-2",open:true,isLeaf:false},
{ id:120, pId:12, name:"葉子節(jié)點 1-2-0",isLeaf:true},
{ id:121, pId:12, name:"葉子節(jié)點 1-2-1",isLeaf:true},
{ id:13, pId:1, name:"葉子節(jié)點 1-3",isLeaf:true},
{ id:2, pId:0, name:"父節(jié)點 2", open:true,isLeaf:false},
{ id:21, pId:2, name:"葉子節(jié)點 2-1",isLeaf:true},
{ id:22, pId:2, name:"葉子節(jié)點 2-2",isLeaf:true},
{ id:23, pId:2, name:"葉子節(jié)點 2-3",isLeaf:true},
{ id:3, pId:0, name:"父節(jié)點 3", open:true,isLeaf:false},
{ id:31, pId:3, name:"葉子節(jié)點 3-1",isLeaf:true},
{ id:32, pId:3, name:"葉子節(jié)點 3-2",isLeaf:true},
{ id:33, pId:3, name:"葉子節(jié)點 3-3",isLeaf:true}
];
2、addDiyDom方法
function addDiyDom(treeId, treeNode) {
//console.log(treeNode);
var aObj = $("#" + treeNode.tId + IDMark_A);
var editStr = $("<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+ "' onclick='checkedHandler(this)' ></input>");
editStr.data("treeNode",treeNode);
aObj.before(editStr);
}
3、自己寫的幾個級聯(lián)操作的方法
function checkedHandler(checkbox){
var $checkbox = $(checkbox),
treeNode = $checkbox.data("treeNode"),
state = checkbox.checked;
if(treeNode.isLeaf){ //子節(jié)點
if(state){ //子節(jié)點選中，父節(jié)點要跟著選中，子節(jié)點取消選擇，父節(jié)點不用級聯(lián)
setParentNodeChecked(checkbox);
}
}else{ //父節(jié)點
if(state){ //選中，級聯(lián)子節(jié)點，級聯(lián)父節(jié)點
setParentNodeChecked(checkbox);
setChildNodeChecked(checkbox);
}else{
setChildNodeChecked(checkbox);
}
}
}
/**設(shè)置父節(jié)點選中 */
function setParentNodeChecked(checkbox){
var $pNode = $(checkbox).closest("ul").parent();
var pCheckbox = $pNode.find(".checkboxBtn").get(0);
var treeNode = $(pCheckbox).data("treeNode");
if(pCheckbox.checked === checkbox.checked) return;
pCheckbox.checked = checkbox;
if(treeNode.pId != "0") setParentNodeChecked(pCheckbox);
}
/**設(shè)置子節(jié)點選中 */
function setChildNodeChecked(checkbox){
$(checkbox).closest("li").find(".checkboxBtn").each(function(){
this.checked = checkbox.checked;
});
}
4、css中，設(shè)置：
.ztree li.isLeaf{
display:inline;
}
以上所述是小編給大家介紹的ztree實現(xiàn)權(quán)限橫向顯示功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery插件Zclip實現(xiàn)完美兼容個瀏覽器點擊復(fù)制內(nèi)容到剪貼板
本文將結(jié)合實例講解如何使用一款基于jQuery的插件——Zclip來實現(xiàn)復(fù)制內(nèi)容到剪貼板的功能。其實IE上有個方法可以實現(xiàn)點擊復(fù)制，但是由于只是IE獨有，所以我們不提倡。而Zclip是利用一個隱藏的flash文件來完成復(fù)制的功能，關(guān)鍵是它兼容當(dāng)前各主流瀏覽器。2015-04-04
這篇文章主要介紹了jQuery EasyUI開發(fā)技巧總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握EasyUI的開發(fā)技巧，需要的朋友可以參考下2017-09-09
Jquery網(wǎng)頁內(nèi)滑動緩沖導(dǎo)航的實現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁內(nèi)滑動緩沖導(dǎo)航的實現(xiàn)代碼,實現(xiàn)滑動緩沖的方式實現(xiàn)頁內(nèi)導(dǎo)航，用戶體驗大大提升需要的朋友可以參考下2015-04-04
學(xué)習(xí)使用jQuery表單驗證插件和日歷插件
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗證插件與日歷插件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了jQuery簡單判斷值是否存在于數(shù)組中的方法,涉及jQuery數(shù)組遍歷及基于$.inArray的元素判斷相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片放大點擊切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了jQuery實現(xiàn)熱氣球動畫背景登錄框，適合用于后臺登陸界面設(shè)計，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
關(guān)于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結(jié)的jquery中attr()和prop()方法的區(qū)別，感興趣的朋友參考下2018-05-05
jQuery的Each比JS原生for循環(huán)性能慢很多的原因
這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下2016-07-07
jquery中加載圖片自適應(yīng)大小主要實現(xiàn)代碼
當(dāng)圖片較小時顯示實際大小，當(dāng)圖片超過div 大小時圖片自動適應(yīng)div的大小，下面有個示例，大家可以參考下，希望對大家有所幫助2013-08-08