zTree是利用jQuery的核心代碼岖寞，實(shí)現(xiàn)一套能完成大部分常用功能的Tree插件
先來看下我們
想要實(shí)現(xiàn)的效果哦
部分函數(shù)和屬性介紹】
核心參數(shù)：setting
var setting = {
view: {
showIcon: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid"
}
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
callback: {
beforeDrag: false,
onClick: zTreeOnClick
},
async:{
enable: true,
url: "<%=basePath%>arch_JobArch_getChildNodeJson.do",
autoParam:["id"],
}
};
function zTreeOnClick(event, treeId, treeNode) {
var jobid = treeNode.id;
//崗位詳情展示
$.ajax({
type:"post",
url:"<%=basePath%>arch_JobArch_getJobDetail.do",
data:{"jobid":jobid},
dataType:'json',
success:function(data,status){
if(status){
analyseJobDetail(data);
}
}
});
1.先來看看view: {showIcon: false}屬性
設(shè)置 zTree 是否顯示節(jié)點(diǎn)的圖標(biāo)巧号。
默認(rèn)值：true
true / false 分別表示 顯示 / 隱藏 圖標(biāo)
如果屬性設(shè)置為true,那么效果是這樣的
如果屬性設(shè)置為false,那么效果是這樣的
2.setting.data.simpleData
enable:
確定 zTree 初始化時(shí)的節(jié)點(diǎn)數(shù)據(jù)赞咙、異步加載時(shí)的節(jié)點(diǎn)數(shù)據(jù)烂琴、或 addNodes 方法中輸入的 newNodes 數(shù)據(jù)是否采用簡單數(shù)據(jù)模式 (Array)
不需要用戶再把數(shù)據(jù)庫中取出的 List 強(qiáng)行轉(zhuǎn)換為復(fù)雜的 JSON 嵌套格式
默認(rèn)值：false
true / false 分別表示 使用 / 不使用 簡單數(shù)據(jù)模式
idKey:
節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱椎工。[setting.data.simpleData.enable = true 時(shí)生效]
默認(rèn)值："id"
pIdKey:
節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱豆茫。[setting.data.simpleData.enable = true 時(shí)生效]
默認(rèn)值："pId"
3.setting.edit
enable:
設(shè)置 zTree 是否處于編輯狀態(tài)
請?jiān)诔跏蓟霸O(shè)置舱沧，初始化后需要改變編輯狀態(tài)請使用 zTreeObj.setEditable() 方法
默認(rèn)值: false
true / false 分別表示 可以 / 不可以 編輯
showRemoveBtn:
設(shè)置是否顯示刪除按鈕馋劈。[setting.edit.enable = true 時(shí)生效]
當(dāng)點(diǎn)擊某節(jié)點(diǎn)的刪除按鈕時(shí)：
1攻锰、首先觸發(fā) setting.callback.beforeRemove 回調(diào)函數(shù)，用戶可判定是否進(jìn)行刪除操作妓雾。
2娶吞、如果未設(shè)置 beforeRemove 或 beforeRemove 返回 true，則刪除節(jié)點(diǎn)并觸發(fā) setting.callback.onRemove 回調(diào)函數(shù)械姻。
默認(rèn)值：true
true / false 分別表示 顯示 / 隱藏 刪除按鈕
showRenameBtn:
設(shè)置是否顯示編輯名稱按鈕妒蛇。[setting.edit.enable = true 時(shí)生效]
當(dāng)點(diǎn)擊某節(jié)點(diǎn)的編輯名稱按鈕時(shí)：
1、進(jìn)入節(jié)點(diǎn)編輯名稱狀態(tài)楷拳。
2绣夺、編輯名稱完畢（Input 失去焦點(diǎn) 或 按下 Enter 鍵），會(huì)觸發(fā) setting.callback.beforeRename 回調(diào)函數(shù)欢揖，用戶可根據(jù)自己的規(guī)則判定是否允許修改名稱陶耍。
3、如果 beforeRename 返回 false浸颓，則繼續(xù)保持編輯名稱狀態(tài)物臂，直到名稱符合規(guī)則位置 （按下 ESC 鍵可取消編輯名稱狀態(tài)旺拉，恢復(fù)原名稱）。
4棵磷、如果未設(shè)置 beforeRename 或 beforeRename 返回 true蛾狗，則結(jié)束節(jié)點(diǎn)編輯名稱狀態(tài)，更新節(jié)點(diǎn)名稱仪媒，并觸發(fā) setting.callback.onRename 回調(diào)函數(shù)沉桌。
默認(rèn)值：true
true / false 分別表示 顯示 / 隱藏 編輯名稱按鈕
4.setting.callback
beforeDrag:
用于捕獲節(jié)點(diǎn)被拖拽之前的事件回調(diào)函數(shù)，并且根據(jù)返回值確定是否允許開啟拖拽操作
默認(rèn)值：null
如果返回 false算吩，zTree 將終止拖拽留凭，也無法觸發(fā) onDrag / beforeDrop / onDrop 事件回調(diào)函數(shù)
onClick:
用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)
如果設(shè)置了 setting.callback.beforeClick 方法，且返回 false偎巢，將無法觸發(fā) onClick 事件回調(diào)函數(shù)蔼夜。
默認(rèn)值：null
5.setting.async
enable：
設(shè)置 zTree 是否開啟異步加載模式
默認(rèn)值：false
true 表示 開啟 異步加載模式
false 表示 關(guān)閉 異步加載模式
如果設(shè)置為 true，請務(wù)必設(shè)置 setting.async 內(nèi)的其它參數(shù)压昼。
如果需要根節(jié)點(diǎn)也異步加載求冷，初始化時(shí) treeNodes 參數(shù)設(shè)置為 null 即可
url：
Ajax 獲取數(shù)據(jù)的 URL 地址。[setting.async.enable = true 時(shí)生效]
默認(rèn)值：""
設(shè)置固定的異步加載 url 字符串窍霞，請注意地址的路徑匠题，確保頁面能正常加載
url 內(nèi)也可以帶參數(shù)，這些參數(shù)就只能是通過 get 方式提交了但金，并且請注意進(jìn)行轉(zhuǎn)碼
autoParam：
異步加載時(shí)需要自動(dòng)提交父節(jié)點(diǎn)屬性的參數(shù)韭山。[setting.async.enable = true 時(shí)生效]
默認(rèn)值：[ ]
1、將需要作為參數(shù)提交的屬性名稱冷溃，制作成 Array 即可钱磅，例如：["id", "name"]
2、可以設(shè)置提交時(shí)的參數(shù)名稱似枕，例如 server 只接受 zId : ["id=zId"]
當(dāng)頁面剛加載時(shí)续搀，會(huì)調(diào)用zTreeOnClick方法到后臺(tái)查詢出所有的父級數(shù)據(jù)，暫時(shí)給用戶菠净。當(dāng)用戶點(diǎn)擊父級看子級時(shí)，這時(shí)根據(jù)傳入的數(shù)據(jù)異步加載到后臺(tái)查詢所有子級
