ztree實現權限橫向顯示功能
更新時間：2017年05月20日 13:29:26 作者：Tengri
最近在做權限功能的時候，采用的ztree實現的，但是產品要求最后一層的權限節(jié)點要橫向顯示。下面小編把基于ztree實現權限橫向顯示功能的實現思路分享給大家，供大家參考
最近在做權限功能的時候，采用的ztree實現的，但是產品要求最后一層的權限節(jié)點要橫向顯示。開始在網上找的解決方案是用css樣式把最后一層的display設置為inline。在我本地電腦上看了下。效果不錯。
但是，后來測試在用十年前的筆記本測這個功能的時候，發(fā)現特別的卡，導致瀏覽器都崩潰了。所以，性能優(yōu)化開始了。
1、同步改為異步，雖然不卡，但是功能不滿足，很多人勾選了一個父節(jié)點（模塊節(jié)點），就保存，此時子節(jié)點根本沒有，所以保存的數據是有問題的。
2、設置showIcon和showLine為false，發(fā)現速度有一丟丟的提升，但是產品還是不滿意。
3、仔細看了下，ztree的checkbox都是用span模擬的，搞個背景圖。憑直覺覺得用原生的checkbox要比用圖片模擬要強一些。說干就干，找了ztree提供的一個例子，稍作改造，效果還是很明顯的。用到的主要方法時addDiyDom。
下面把主要的代碼貼上來。
1、數據結構，要求有一個isLeaf節(jié)點，標記是否是子節(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、自己寫的幾個級聯操作的方法
function checkedHandler(checkbox){
var $checkbox = $(checkbox),
treeNode = $checkbox.data("treeNode"),
state = checkbox.checked;
if(treeNode.isLeaf){ //子節(jié)點
if(state){ //子節(jié)點選中，父節(jié)點要跟著選中，子節(jié)點取消選擇，父節(jié)點不用級聯
setParentNodeChecked(checkbox);
}
}else{ //父節(jié)點
if(state){ //選中，級聯子節(jié)點，級聯父節(jié)點
setParentNodeChecked(checkbox);
setChildNodeChecked(checkbox);
}else{
setChildNodeChecked(checkbox);
}
}
}
/**設置父節(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);
}
/**設置子節(jié)點選中 */
function setChildNodeChecked(checkbox){
$(checkbox).closest("li").find(".checkboxBtn").each(function(){
this.checked = checkbox.checked;
});
}
4、css中，設置：
.ztree li.isLeaf{
display:inline;
}
以上所述是小編給大家介紹的ztree實現權限橫向顯示功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了jQuery實現的簡單懸浮層功能,結合完整實例形式分析了jQuery基于時間函數動態(tài)修改css樣式實現窗口浮動效果的相關技巧,需要的朋友可以參考下2017-01-01
jquery 實時監(jiān)聽輸入框值變化的完美方法(必看)
下面小編就為大家?guī)硪黄猨query 實時監(jiān)聽輸入框值變化的完美方法(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了zTree異步加載展開第一級節(jié)點的實現方法,需要的朋友可以參考下2017-09-09
jquery插件沖突(jquery.noconflict)解決方法分享
本文主要解決了如何讓多個不同的jQuery版本在同一個頁面并存而不沖突的方法,需要的朋友可以參考下2014-03-03
本文主要介紹了JQuery的基本知識，如：JQuery的dom操作，動態(tài)創(chuàng)建dom節(jié)點，刪除節(jié)點，document方法等等，文章篇尾處附上實例小練習。需要的朋友可以參考下2016-12-12
本篇文章主要介紹了JQuery中解決重復動畫的辦法，有分別有圖片滾動輪播，回到頁面頂部，聯級菜單滑出，手風琴等效果，有需要的朋友可以來看一下。2016-10-10
本篇文章主要是對jquery中l(wèi)ive()重復綁定的解決方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
加載等待效果想必大家都有見到過吧，其實很簡單，在本文將為大家介紹下使用jquery是如何實現的，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery 復合選擇器應用的幾個例子,本文例子所引用的jQuery版本為 jQuery-1.8.3.min.js，喜歡的朋友可以學習下2014-09-09
這篇文章主要介紹了jquery日歷插件datepicker用法,結合實例形式分析了jquery日歷插件datepicker的定義與使用技巧,需要的朋友可以參考下2016-01-01