From c1330e026a5030be381656fb8ff08e287255ea40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 23 Apr 2023 11:03:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20treeTable=20=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 102 ++++++++++++++++++++------------------- 1 file changed, 53 insertions(+), 49 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index cf89c2fe..f743cc79 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -126,8 +126,9 @@ layui.define(['table'], function (exports) { that.tableIns = tableIns; var treeOptions = options.tree; - var isParentKey = treeOptions.data.key.isParent; - var childrenKey = treeOptions.data.key.children; + var customName = treeOptions.customName; + var isParentKey = customName.isParent; + var childrenKey = customName.children; // 处理属性 var parseData = options.parseData; @@ -143,8 +144,8 @@ layui.define(['table'], function (exports) { retData = parseData.apply(parseDataThat, args) || args[0]; } var dataName = parseDataThat.response.dataName; - // 处理simpleData - if (treeOptions.data.simpleData.enable && !treeOptions.async.enable) { // 异步加载和simpleData不应该一起使用 + // 处理 isSimpleData + if (treeOptions.data.isSimpleData && !treeOptions.async.enable) { // 异步加载和 isSimpleData 不应该一起使用 retData[dataName] = that.flatToTree(retData[dataName]); } @@ -154,8 +155,8 @@ layui.define(['table'], function (exports) { } } else { options.data = options.data || []; - // 处理simpleData - if (treeOptions.data.simpleData.enable) { + // 处理 isSimpleData + if (treeOptions.data.isSimpleData) { options.data = that.flatToTree(options.data); } if (options.initSort && options.initSort.type) { @@ -195,6 +196,17 @@ layui.define(['table'], function (exports) { // 初始默认配置 Class.prototype.config = { tree: { + customName: { + checked: 'LAY_CHECKED', // 节点数据中保存 check 状态的属性名称 + children: "children", // 节点数据中保存子节点数据的属性名称 + isParent: "isParent", // 节点数据保存节点是否为父节点的属性名称 + isHidden: "hidden", // 节点数据保存节点是否隐藏的属性名称 + name: "name", // 节点数据保存节点名称的属性名称 + url: "url", // 节点数据保存节点链接的目标 URL 的属性名称 + id: "id", // 唯一标识的属性名称 + pid: "parentId", + rootId: null + }, view: { indent: 14, // 层级缩进量 flexIconClose: '', // 关闭时候的折叠图标 @@ -208,21 +220,7 @@ layui.define(['table'], function (exports) { dblClickExpand: true, // 双击节点时，是否自动展开父节点的标识 }, data: { - key: { - checked: 'LAY_CHECKED', // 节点数据中保存 check 状态的属性名称 - children: "children", // 节点数据中保存子节点数据的属性名称 - isParent: "isParent", // 节点数据保存节点是否为父节点的属性名称 - isHidden: "hidden", // 节点数据保存节点是否隐藏的属性名称 - name: "name", // 节点数据保存节点名称的属性名称 - title: "", // 节点数据保存节点提示信息的属性名称 - url: "url", // 节点数据保存节点链接的目标 URL 的属性名称 - }, - simpleData: { - enable: false, // 是否简单数据模式 - idKey: "id", // 唯一标识的属性名称 - pIdKey: "parentId", - rootPId: null - } + isSimpleData: false // 是否简单数据模式 }, async: { enable: false, // 是否开启异步加载模式，只有开启的时候其他参数才起作用 @@ -277,20 +275,21 @@ layui.define(['table'], function (exports) { var that = this; var options = that.getOptions(); var treeOptions = options.tree; - var simpleDataOptions = treeOptions.data.simpleData; + var customName = treeOptions.customName; var tableId = options.id; tableData = tableData || table.cache[tableId]; - return flatToTree(tableData, simpleDataOptions.idKey, simpleDataOptions.pIdKey, treeOptions.data.key.children, simpleDataOptions.rootPId) + return flatToTree(tableData, customName.id, customName.pid, customName.children, customName.rootId) } Class.prototype.treeToFlat = function (tableData, parentId, parentIndex) { var that = this; var options = that.getOptions(); var treeOptions = options.tree; - var childrenKey = treeOptions.data.key.children; - var pIdKey = treeOptions.data.simpleData.pIdKey; + var customName = treeOptions.customName; + var childrenKey = customName.children; + var pIdKey = customName.pid; var flat = []; layui.each(tableData, function (i1, item1) { @@ -299,7 +298,7 @@ layui.define(['table'], function (exports) { dataNew[childrenKey] = null; dataNew[pIdKey] = item1[pIdKey] || parentId; flat.push(dataNew); - flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[treeOptions.data.simpleData.idKey], dataIndex)); + flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[customName.id], dataIndex)); }); return flat; @@ -323,7 +322,7 @@ layui.define(['table'], function (exports) { var dataRet = tableData; var tableCache = (options.url || indexArr.length > 1) ? null : table.cache[tableId]; // 只有在删除根节点的时候才需要处理 - for (var i = 0, childrenKey = treeOptions.data.key.children; i < indexArr.length; i++) { + for (var i = 0, childrenKey = treeOptions.customName.children; i < indexArr.length; i++) { if (newValue && i === indexArr.length - 1) { if (newValue === 'delete') { // 删除 @@ -373,9 +372,12 @@ layui.define(['table'], function (exports) { var options = that.getOptions(); var treeOptions = options.tree; var tableId = options.id; + data = data || that.getTableData(); - var isParentKey = treeOptions.data.key.isParent; - var childrenKey = treeOptions.data.key.children; + + var customName = treeOptions.customName; + var isParentKey = customName.isParent; + var childrenKey = customName.children; layui.each(data, function (i1, item1) { if (!(isParentKey in item1)) { @@ -400,7 +402,8 @@ layui.define(['table'], function (exports) { var tableId = tableViewElem.attr('lay-id'); var options = table.getOptions(tableId); var treeOptions = options.tree || {}; - var isParentKey = treeOptions.data.key.isParent; + var customName = treeOptions.customName || {}; + var isParentKey = customName.isParent; var trIndex = trElem.attr('lay-data-index'); // 可能出现多层 var treeTableThat = getThisTable(tableId); var tableData = treeTableThat.getTableData(); @@ -438,7 +441,7 @@ layui.define(['table'], function (exports) { nodeIconElem.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose); } - var childNodes = trData[treeOptions.data.key.children] || []; // 测试用后续需要改成子节点的字段名称 + var childNodes = trData[customName.children] || []; // 测试用后续需要改成子节点的字段名称 // 处理子节点展示与否 if (trExpand) { // 展开 @@ -506,8 +509,8 @@ layui.define(['table'], function (exports) { flexIconElem.html(''); // 事件 } else { - trData[treeOptions.data.key.children] = res[asyncResponse.dataName]; - treeTableThat.initData(trData[treeOptions.data.key.children], trData[LAY_DATA_INDEX]) + trData[customName.children] = res[asyncResponse.dataName]; + treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]) // 正常返回 expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag); } @@ -527,13 +530,13 @@ layui.define(['table'], function (exports) { if (options.initSort && !options.url) { var initSort = options.initSort; if (initSort.type) { - childNodes = trData[treeOptions.data.key.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc'); + childNodes = trData[customName.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc'); } else { // 恢复默认 - childNodes = trData[treeOptions.data.key.children] = layui.sort(childNodes, table.config.indexName); + childNodes = trData[customName.children] = layui.sort(childNodes, table.config.indexName); } } - treeTableThat.initData(trData[treeOptions.data.key.children], trData[LAY_DATA_INDEX]); + treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]); // 将数据通过模板得出节点的html代码 var str2 = table.getTrHtml(tableId, childNodes, null, null, trIndex); @@ -588,7 +591,7 @@ layui.define(['table'], function (exports) { return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' }).join(',')).addClass('layui-hide'); } else { - var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[treeOptions.data.simpleData.idKey], trIndex); + var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], trIndex); tableViewElem.find(childNodesFlat.map(function (value, index, array) { return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' }).join(',')).addClass('layui-hide'); @@ -700,7 +703,8 @@ layui.define(['table'], function (exports) { var treeOptions = options.tree || {}; var treeOptionsData = treeOptions.data || {}; var treeOptionsView = treeOptions.view || {}; - var isParentKey = treeOptionsData.key.isParent; + var customName = treeOptions.customName || {}; + var isParentKey = customName.isParent; var tableFilterId = tableViewElem.attr('lay-filter'); var treeTableThat = that; // var tableData = treeTableThat.getTableData(); @@ -718,7 +722,7 @@ layui.define(['table'], function (exports) { } var dataExpand = {}; // 记录需要展开的数据 - var nameKey = treeOptions.data.key.name; + var nameKey = customName.name; var indent = treeOptions.view.indent || 14; layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) { item = $(item); @@ -854,7 +858,7 @@ layui.define(['table'], function (exports) { var treeOptions = options.tree; data = data || table.cache[options.id]; - return updateStatus(data, statusObj, treeOptions.data.key.children); + return updateStatus(data, statusObj, treeOptions.customName.children); } Class.prototype.getTableData = function () { @@ -971,7 +975,7 @@ layui.define(['table'], function (exports) { delNode = that.getNodeDataByIndex(layui.type(node) === 'string' ? node : node[LAY_DATA_INDEX], false, 'delete'); var nodeP = that.getNodeDataByIndex(delNode[LAY_PARENT_INDEX]); that.updateCheckStatus(nodeP, true); - var delNodesFlat = that.treeToFlat([delNode], delNode[treeOptions.data.simpleData.pIdKey], delNode[LAY_PARENT_INDEX]); + var delNodesFlat = that.treeToFlat([delNode], delNode[treeOptions.customName.pid], delNode[LAY_PARENT_INDEX]); layui.each(delNodesFlat, function (i2, item2) { indexArr.push('tr[lay-data-index="' + item2[LAY_DATA_INDEX] + '"]'); }) @@ -1101,8 +1105,8 @@ layui.define(['table'], function (exports) { return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' }).join(','))); } else { - var isParentKey = treeOptions.data.key.isParent; - var childKey = treeOptions.data.key.children; + var isParentKey = treeOptions.customName.isParent; + var childKey = treeOptions.customName.children; parentNode[isParentKey] = true; var childrenNodes = parentNode[childKey]; @@ -1220,7 +1224,7 @@ layui.define(['table'], function (exports) { if (tableView.hasClass('layui-table-tree')) { updateObjParams(obj); - if (obj.field === options.tree.data.key.name) { + if (obj.field === options.tree.customName.name) { obj.tr.find('td[data-field="' + obj.field + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item') obj.update({}); // 通过update调用执行tr节点的更新 } @@ -1288,7 +1292,7 @@ layui.define(['table'], function (exports) { var treeOptions = options.tree; var tableId = options.id; var checkName = table.config.checkName; - var childrenKey = treeOptions.data.key.children; + var childrenKey = treeOptions.customName.children; var dataRet = []; dataP[LAY_CHECKBOX_HALF] = false; // 先设置为非半选，是否为半选又下面逻辑判断 @@ -1378,7 +1382,7 @@ layui.define(['table'], function (exports) { trData[checkName] = checked; form.render(trElem.find('input[type="radio"][lay-type="layTableRadio"]').prop('checked', checked)); } else { - var isParentKey = options.tree.data.key.isParent; + var isParentKey = options.tree.customName.isParent; // 切换只能用到单条，全选到这一步的时候应该是一个确定的状态 checked = layui.type(checked) === 'boolean' ? checked : !trData[checkName]; // 状态切换，如果遇到不可操作的节点待处理 todo // 全选或者是一个父节点，将子节点的状态同步为当前节点的状态 @@ -1476,16 +1480,16 @@ layui.define(['table'], function (exports) { /** * 获得数据 * @param {String} id 表格id - * @param {Boolean} simpleData 是否返回平铺结构的数据 + * @param {Boolean} isSimpleData 是否返回平铺结构的数据 * @return {Array} 表格数据 * */ - treeTable.getData = function (id, simpleData) { + treeTable.getData = function (id, isSimpleData) { var tableData = []; layui.each($.extend(true, [], table.cache[id] || []), function (index, item) { // 遍历排除掉临时的数据 tableData.push(item); }) - return simpleData ? getThisTable(id).treeToFlat(tableData) : tableData; + return isSimpleData ? getThisTable(id).treeToFlat(tableData) : tableData; } // 记录所有实例