layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

包括tree的下拉,checkbox,拖拽,右鍵菜單,手風(fēng)琴,懶加載,搜索

更新:2020-12-17 創(chuàng)建:2018-9-14

文檔

仿elementUI文檔重寫(xiě)
eleTree.render()參數(shù)說(shuō)明
1. elem: "",   //指定原始 table 容器的選擇器或 DOM
2. data: [], 直接賦值數(shù)據(jù)
3. emptText: "暫無(wú)數(shù)據(jù)", // 內(nèi)容為空的時(shí)候展示的文本
4. renderAfterExpand: true, // 是否在第一次展開(kāi)某個(gè)樹(shù)節(jié)點(diǎn)后才渲染其子節(jié)點(diǎn)
5. highlightCurrent: false, // 是否高亮當(dāng)前選中節(jié)點(diǎn),默認(rèn)值是 false。
6. defaultExpandAll: false, // 是否默認(rèn)展開(kāi)所有節(jié)點(diǎn)
7. expandOnClickNode: true, // 是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開(kāi)或者收縮節(jié)點(diǎn), 默認(rèn)值為 true,如果為 false,則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開(kāi)或者收縮節(jié)點(diǎn)。
8. checkOnClickNode: false, // 是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn),默認(rèn)值為 false,即只有在點(diǎn)擊復(fù)選框時(shí)才會(huì)選中節(jié)點(diǎn)。
9. defaultExpandedKeys: [], // 默認(rèn)展開(kāi)的節(jié)點(diǎn)的 key 的數(shù)組
10. autoExpandParent: true, // 展開(kāi)子節(jié)點(diǎn)的時(shí)候是否自動(dòng)展開(kāi)父節(jié)點(diǎn)
11. showCheckbox: false, // 節(jié)點(diǎn)是否可被選擇
12. checkStrictly: false, // 在顯示復(fù)選框的情況下,是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法,默認(rèn)為 false
13. defaultCheckedKeys: [], // 默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組
14. accordion: false, // 是否每次只打開(kāi)一個(gè)同級(jí)樹(shù)節(jié)點(diǎn)展開(kāi)(手風(fēng)琴效果)
15. indent: 16, // 相鄰級(jí)節(jié)點(diǎn)間的水平縮進(jìn),單位為像素
16. lazy: false, // 是否懶加載子節(jié)點(diǎn),需與 load 方法結(jié)合使用
17. load: function() {}, // 加載子樹(shù)數(shù)據(jù)的方法,僅當(dāng) lazy 屬性為true 時(shí)生效
18. draggable: false, // 是否開(kāi)啟拖拽節(jié)點(diǎn)功能
19. contextmenuList: [], // 啟用右鍵菜單,支持的操作有:"copy","add","edit","remove"
20. method: "get", // 接口http請(qǐng)求類(lèi)型,默認(rèn):get
21. url: "", // 異步數(shù)據(jù)接口
22. contentType: "", // 發(fā)送到服務(wù)端的內(nèi)容編碼類(lèi)型
23. headers: {}, // 接口的請(qǐng)求頭。如:headers: {token: 'sasasas'}
24. done: null, // 數(shù)據(jù)請(qǐng)求完成的回調(diào)函數(shù),只有異步請(qǐng)求才會(huì)有
25. response: { // 對(duì)于后臺(tái)數(shù)據(jù)重新定義名字
statusName: "code",
statusCode: 0,
dataName: "data"
},
26. request: { // 對(duì)后臺(tái)返回的數(shù)據(jù)格式重新定義
name: "label",
key: "id",
children: "children",
checked: "checked",
disabled: "disabled",
isLeaf: "isLeaf"
},
27. searchNodeMethod: null // 對(duì)樹(shù)節(jié)點(diǎn)進(jìn)行篩選時(shí)執(zhí)行的方法,返回 true 表示這個(gè)節(jié)點(diǎn)可以顯示,返回 false 則表示這個(gè)節(jié)點(diǎn)會(huì)被隱藏
基礎(chǔ)方法
var el=eleTree.render({
// ...
})
> el.updateKeyChildren(key,data) // 更新子節(jié)點(diǎn)
> el.updateKeySelf(key,data) //更新當(dāng)前節(jié)點(diǎn)
> el.getChecked(leafOnly, includeHalfChecked) // 獲取選中的節(jié)點(diǎn),接收兩個(gè) boolean 類(lèi)型的參數(shù),1. 是否只是葉子節(jié)點(diǎn),默認(rèn)值為 false 2. 是否包含半選節(jié)點(diǎn),默認(rèn)值為 false
> el.setChecked(arr) //設(shè)置選中的節(jié)點(diǎn),傳入數(shù)組key值
> el.unCheckNodes() //取消所有選中的節(jié)點(diǎn)
> el.expandAll() //展開(kāi)所有
> el.unExpandAll() //合并所有
> el.remove(key) //刪除節(jié)點(diǎn)
> el.append(key,data) //添加子節(jié)點(diǎn)
> el.insertBefore(key,data) //添加到節(jié)點(diǎn)之前
> el.insertAfter(key,data) //添加到節(jié)點(diǎn)之后
> el.reload(data) //重新加載樹(shù)
> el.search(val) //搜索樹(shù)(val為搜索值),執(zhí)行此方法會(huì)去執(zhí)行searchNodeMethod方法,searchNodeMethod的第一個(gè)參數(shù)為val搜索值,第二個(gè)參數(shù)為每個(gè)節(jié)點(diǎn)的數(shù)據(jù)
事件監(jiān)聽(tīng)
eleTree.render({
// ...
})
// 節(jié)點(diǎn)點(diǎn)擊事件
eleTree.on("nodeClick(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.event); // event對(duì)象
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // 與d.node相同
})
// input被選中事件
eleTree.on("nodeChecked(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.isChecked); // input是否被選中
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // input對(duì)于的dom
})
// 鼠標(biāo)右鍵事件
eleTree.on("nodeContextmenu(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.event); // event對(duì)象
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // 與d.node相同
})
// 節(jié)點(diǎn)被拖拽事件
eleTree.on("nodeDrag(data1)",function(d) {
console.log(d);
d.stop(); // 取消拖拽
console.log(d.current); // 起始節(jié)點(diǎn)對(duì)應(yīng)的dom和數(shù)據(jù)
console.log(d.target); // 鼠標(biāo)落點(diǎn)對(duì)應(yīng)的dom和數(shù)據(jù)
console.log(this); // 鼠標(biāo)落點(diǎn)對(duì)應(yīng)的dom
})
// 添加子節(jié)點(diǎn)事件
eleTree.on("nodeAppend(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // 與d.node相同
d.stop(); // 取消添加
d.setData({ // 自定義數(shù)據(jù)
key: 666,
label: "aaa"
})
})
// 添加節(jié)點(diǎn)之前事件
eleTree.on("nodeInsertBefore(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // 與d.node相同
d.stop(); // 取消添加
d.setData({ // 自定義數(shù)據(jù)
key: 666,
label: "aaa"
})
})
// 添加節(jié)點(diǎn)之后事件
eleTree.on("nodeInsertAfter(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(this); // 與d.node相同
d.stop(); // 取消添加
d.setData({ // 自定義數(shù)據(jù)
key: 666,
label: "aaa"
})
})
// 節(jié)點(diǎn)被編輯事件
eleTree.on("nodeEdit(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
console.log(d.value); // 新輸入的值
console.log(this); // 與d.node相同
d.stop(); // 取消編輯
})
// 節(jié)點(diǎn)被刪除事件
eleTree.on("nodeRemove(data1)",function(d) {
console.log(d.data); // 點(diǎn)擊節(jié)點(diǎn)對(duì)于的數(shù)據(jù)
console.log(d.node); // 點(diǎn)擊的dom節(jié)點(diǎn)
d.stop(); // 取消刪除
})

下載

立即下載 去 GitHub 下載
該擴(kuò)展組件由第三方用戶(hù)主動(dòng)投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。