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