mirror of
https://gitee.com/layui/layui.git
synced 2025-06-28 13:34:27 +08:00
feat(treeTable): expandNode 新增 done 回调 (#2721)
* feat(treeTable): expandNode 新增 done 回调 * docs(treeTable): 更新文档 * update code * Update docs/treeTable/index.md
This commit is contained in:
morning-star
GitHub
parent
1eb01c6706
commit
e3f683cdc0
@ -274,7 +274,8 @@ treeTable.addNodes('test', {
|
||||
| index | 节点对应的行下标，一般可通过 `<tr>` 元素的 `data-index` 属性获得 | number | - |
|
||||
| expandFlag | 设置展开或关闭状态，若为 `true` 则表示展开；`false` 则为关闭；`null` 则表示切换 | boolean/null | - |
|
||||
| inherit | 子节点是否继承父节点的展开或关闭状态，`expandFlag` 属性必须为 `boolean` 型时才有效。 | boolean | `false` |
|
||||
| callbackFlag | 是否触发事件（`beforeExpand,onExpand`） | boolean | `false` |
|
||||
| callbackFlag | 是否触发 tree.callback 事件（`beforeExpand,onExpand`） | boolean | `false` |
|
||||
| done <sup>2.11.3+</sup>| 节点操作完成后的回调函数 | (tableId, trData, trExpand) => void | - |
|
||||
|
||||
若操作的节点不是一个父节点，则返回 `null`，否则返回操作之后的折叠状态。
|
||||
|
||||
|
||||
@ -14,12 +14,17 @@
|
||||
<div class="layui-fluid" style="padding: 15px;">
|
||||
<button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
|
||||
<button class="layui-btn" lay-on="flatData">flatData</button>
|
||||
<button class="layui-btn" lay-on="expandNode">expandNode</button>
|
||||
<button class="layui-btn" lay-on="unexpandNode">unexpandNode</button>
|
||||
<table id="demo"></table>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
|
||||
<script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js"
|
||||
src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script>
|
||||
<script>
|
||||
Mock.setup({
|
||||
timeout: '100-300'
|
||||
});
|
||||
layui.use(["treeTable", "util"], function () {
|
||||
var treeTable = layui.treeTable;
|
||||
var util = layui.util;
|
||||
@ -39,6 +44,11 @@
|
||||
async: {
|
||||
enable: true,
|
||||
autoParam: ["parentId=id"]
|
||||
},
|
||||
callback: {
|
||||
onExpand: function (tableId, trData, trExpand) {
|
||||
console.log('onExpand', tableId, trData.id, trExpand);
|
||||
}
|
||||
}
|
||||
},
|
||||
}, true)
|
||||
@ -57,6 +67,28 @@
|
||||
}
|
||||
},
|
||||
}, true)
|
||||
},
|
||||
expandNode: function(){
|
||||
treeTable.expandNode('demo', {
|
||||
index: 0,
|
||||
expandFlag: true,
|
||||
inherit: true,
|
||||
callbackFlag: true,
|
||||
done: function (tableId, trData, trExpand) {
|
||||
console.log('done', tableId, trData.id, trExpand);
|
||||
}
|
||||
})
|
||||
},
|
||||
unexpandNode: function(){
|
||||
treeTable.expandNode('demo', {
|
||||
index: 0,
|
||||
expandFlag: false,
|
||||
inherit: true,
|
||||
callbackFlag: true,
|
||||
done: function (tableId, trData, trExpand) {
|
||||
console.log('done', tableId, trData.id, trExpand);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@ -130,7 +162,7 @@
|
||||
//var testDatas = getTreeData(rootNodes);
|
||||
|
||||
Mock.mock(/getDatas/, "get", (config) => {
|
||||
console.log(config);
|
||||
//console.log(config);
|
||||
var params = layui.url(config.url);
|
||||
var search = params.search;
|
||||
var parentId = search.parentId;
|
||||
|
||||
@ -590,7 +590,7 @@ layui.define(['table'], function (exports) {
|
||||
})()
|
||||
|
||||
// 优化参数，添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
|
||||
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
|
||||
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag, done) {
|
||||
// treeNode // 需要展开的节点
|
||||
var trElem = treeNode.trElem;
|
||||
var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
|
||||
@ -658,7 +658,7 @@ layui.define(['table'], function (exports) {
|
||||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
} else if (item1[LAY_EXPAND]) { // 初始化级联展开
|
||||
expandNode({
|
||||
dataIndex: item1[LAY_DATA_INDEX],
|
||||
@ -666,7 +666,7 @@ layui.define(['table'], function (exports) {
|
||||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, true);
|
||||
}, true, undefined, undefined, undefined, done);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -681,7 +681,7 @@ layui.define(['table'], function (exports) {
|
||||
trData[LAY_ASYNC_STATUS] = 'success';
|
||||
trData[customName.children] = data;
|
||||
treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX])
|
||||
expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag);
|
||||
expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag, done);
|
||||
}
|
||||
|
||||
var format = asyncSetting.format; // 自定义数据返回方法
|
||||
@ -804,7 +804,7 @@ layui.define(['table'], function (exports) {
|
||||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -820,7 +820,7 @@ layui.define(['table'], function (exports) {
|
||||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
});
|
||||
tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点，其他由递归的处理
|
||||
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
|
||||
@ -843,6 +843,10 @@ layui.define(['table'], function (exports) {
|
||||
layui.type(onExpand) === 'function' && onExpand(tableId, trData, trExpand);
|
||||
}
|
||||
|
||||
if(layui.type(done) === 'function' && trData[LAY_ASYNC_STATUS] !== 'loading'){
|
||||
done(tableId, trData, trExpand);
|
||||
}
|
||||
|
||||
return retValue;
|
||||
}
|
||||
|
||||
@ -853,7 +857,8 @@ layui.define(['table'], function (exports) {
|
||||
* @param {Number|String} opts.index 展开行的数据下标
|
||||
* @param {Boolean} [opts.expandFlag] 展开、关闭、切换
|
||||
* @param {Boolean} [opts.inherit] 是否级联子节点
|
||||
* @param {Boolean} [opts.callbackFlag] 是否触发事件
|
||||
* @param {Boolean} [opts.callbackFlag] 是否触发 tree.callback 事件
|
||||
* @param {Boolean} [opts.done] 节点操作完成后的回调函数
|
||||
* @return [{Boolean}] 状态结果
|
||||
* */
|
||||
treeTable.expandNode = function (id, opts) {
|
||||
@ -871,7 +876,7 @@ layui.define(['table'], function (exports) {
|
||||
var tableViewElem = options.elem.next();
|
||||
return expandNode({
|
||||
trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
|
||||
}, expandFlag, sonSign, null, callbackFlag)
|
||||
}, expandFlag, sonSign, null, callbackFlag, opts.done)
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user