From 60e1ebae8cc8600244b92db17d0d9f49359a7358 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 23 May 2023 16:57:41 +0800 Subject: [PATCH 01/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20treeTable=20?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=8A=98=E5=8F=A0=E7=8A=B6=E6=80=81=E8=AE=B0?= =?UTF-8?q?=E5=BF=86=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index c3bd6958..9bff8b5e 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -106,9 +106,13 @@ layui.define(['table'], function (exports) { var updateOptions = function (id, options, reload) { var that = getThisTable(id); - var thatOptionsTemp = $.extend(true, {} , that.getOptions(), options); + reload === 'reloadData' || (that.status = { // 用于记录一些状态信息 + expand: {} // 折叠状态 + }); + var thatOptionsTemp = $.extend(true, {}, that.getOptions(), options); var treeOptions = thatOptionsTemp.tree; var childrenKey = treeOptions.customName.children; + var idKey = treeOptions.customName.id; // 处理属性 delete options.hasNumberCol; delete options.hasChecboxCol; @@ -141,6 +145,10 @@ layui.define(['table'], function (exports) { if (treeOptions.data.isSimpleData && !treeOptions.async.enable) { // 异步加载和 isSimpleData 不应该一起使用 retData[dataName] = that.flatToTree(retData[dataName]); } + // 处理节点状态 + updateStatus(retData[dataName], function (item) { + item[LAY_EXPAND] = that.status.expand[item[idKey]] + }, childrenKey); if (parseDataThat.autoSort && parseDataThat.initSort && parseDataThat.initSort.type) { layui.sort(retData[dataName], parseDataThat.initSort.field, parseDataThat.initSort.type === 'desc', true) @@ -943,7 +951,7 @@ layui.define(['table'], function (exports) { }); // 根据需要处理options中的一些参数 - updateOptions(that.config.id, options, true); + updateOptions(that.config.id, options, type || true); // 对参数进行深度或浅扩展 that.config = $.extend(deep, {}, that.config, options); From 33d87d9840d9723ac7c3f0ec13f88d0b41a770eb Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 23 May 2023 17:12:12 +0800 Subject: [PATCH 02/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20treeTable=20?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87=E7=9A=84=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 9bff8b5e..f5705f6b 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -229,6 +229,7 @@ layui.define(['table'], function (exports) { name: "name", // 节点数据保存节点名称的属性名称 id: "id", // 唯一标识的属性名称 pid: "parentId", // 父节点唯一标识的属性名称 + icon: "icon", // 图标的属性名称 }, view: { indent: 14, // 层级缩进量 From 1d87009241cb1501fbd501c91100e447965142fb Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 23 May 2023 17:14:40 +0800 Subject: [PATCH 03/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20treeTable=20`isSimpl?= =?UTF-8?q?eData`=20=E6=A8=A1=E5=BC=8F=E6=B8=B2=E6=9F=93=E4=B9=8B=E5=90=8E?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=A1=BA=E5=BA=8F=E8=B7=9F=E5=8E=9F=E5=A7=8B?= =?UTF-8?q?=E5=B1=9E=E4=BA=8E=E4=B8=8D=E5=90=8C=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index f5705f6b..dc6f7a0e 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -279,14 +279,18 @@ layui.define(['table'], function (exports) { // 创建一个空的 nodes 对象，用于保存所有的节点 var nodes = {}; // 遍历所有节点，将其加入 nodes 对象中 + var idTemp = ''; layui.each(flatArr, function (index, item) { - nodes[item[idKey]] = $.extend({}, item); - nodes[item[idKey]][childrenKey] = []; + idTemp = idKey + item[idKey]; + nodes[idTemp] = $.extend({}, item); + nodes[idTemp][childrenKey] = []; }) // 遍历所有节点，将其父子关系加入 nodes 对象 + var pidTemp = ''; layui.each(nodes, function (index, item) { - if (item[pIdKey] && nodes[item[pIdKey]]) { - nodes[item[pIdKey]][childrenKey].push(item); + pidTemp = idKey + item[pIdKey]; + if (pidTemp && nodes[pidTemp]) { + nodes[pidTemp][childrenKey].push(item); } }) // 返回顶层节点 From 504b6c78fe04be1025e2717c78cb18799bebe225 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 23 May 2023 17:23:09 +0800 Subject: [PATCH 04/15] =?UTF-8?q?=E4=BC=98=E5=8C=96=20treeTable=20`checkSt?= =?UTF-8?q?atus`=20=E6=96=B0=E5=A2=9E=E7=AC=AC=E4=BA=8C=E4=B8=AA=E5=8F=82?= =?UTF-8?q?=E6=95=B0=20includeHalfCheck=20=E6=94=AF=E6=8C=81=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E7=9A=84=E9=80=89=E4=B8=AD=E8=8A=82=E7=82=B9=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E5=8C=85=E6=8B=AC=E5=8D=8A=E9=80=89=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E7=9A=84=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index dc6f7a0e..c821b7ce 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -1290,19 +1290,20 @@ layui.define(['table'], function (exports) { } // 获取表格选中状态 - treeTable.checkStatus = function (id) { + treeTable.checkStatus = function (id, includeHalfCheck) { var that = getThisTable(id); - if(!that) return; + if (!that) return; + var checkName = table.config.checkName; // 需要区分单双选 var tableData = treeTable.getData(id, true); var checkedData = tableData.filter(function (value, index, array) { - return value[table.config.checkName]; + return value[checkName] || (includeHalfCheck && value[LAY_CHECKBOX_HALF]); }); var isAll = true; layui.each(table.cache[id], function (i1, item1) { - if (!item1[table.config.checkName]) { + if (!item1[checkName]) { isAll = false; return true; } From 2d7b9c020ee1eb20be770cd462e658de1df2ebc7 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 23 May 2023 18:08:35 +0800 Subject: [PATCH 05/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20treeTable=20?= =?UTF-8?q?=E5=B1=95=E5=BC=80=E5=85=A8=E9=83=A8=E8=8A=82=E7=82=B9=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E6=97=B6=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index c821b7ce..f0b21c79 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -474,9 +474,15 @@ layui.define(['table'], function (exports) { flexIconElem.html(trExpand ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose) trData[isParentKey] && flexIconElem.css('visibility', 'visible'); // 处理节点图标 - treeOptions.view.showIcon && trsElem.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)') + treeOptions.view.showIcon && trsElem + .find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)') .html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose); + treeTableThat.status.expand[trData[customName.id]] = trData[LAY_EXPAND] = trExpand; + if (retValue === null) { + return retValue; + } + var childNodes = trData[customName.children] || []; // 处理子节点展示与否 if (trExpand) { @@ -485,7 +491,6 @@ layui.define(['table'], function (exports) { trsElem.nextAll(childNodes.map(function (value, index, array) { return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' }).join(',')).removeClass(HIDE); - trData[LAY_EXPAND] = trExpand; layui.each(childNodes, function (i1, item1) { if (!item1[isParentKey]) { return; From 1b31ba87fc35e58fb7712c5dd73b4c9aa240118a Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Wed, 24 May 2023 14:52:47 +0800 Subject: [PATCH 06/15] =?UTF-8?q?=E4=BC=98=E5=8C=96=20treeTable=20?= =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=8E=92=E5=BA=8F=E5=92=8C=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E5=86=85=E8=A1=A8=E5=8D=95=E5=88=9D=E5=A7=8B=E5=8C=96=E7=9A=84?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 51 ++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index f0b21c79..0484b448 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -10,7 +10,6 @@ layui.define(['table'], function (exports) { var form = layui.form; var table = layui.table; var hint = layui.hint(); - var timer = {}; // 记录定时器 index // api var treeTable = { @@ -427,7 +426,9 @@ layui.define(['table'], function (exports) { var debounceFn = (function () { var fn = {}; return function (tableId, func, wait) { - fn[tableId] = fn[tableId] || layui.debounce(func, wait); + if (!fn[tableId]) { + fn[tableId] = layui.debounce(func, wait); + } return fn[tableId]; } })() @@ -667,13 +668,15 @@ layui.define(['table'], function (exports) { }).join(',')).addClass(HIDE); } } - debounceFn(tableId, function () { + + + debounceFn('resize-' + tableId, function () { treeTable.resize(tableId); - }, 25)(); + }, 0)(); if (callbackFlag && trData[LAY_ASYNC_STATUS] !== 'loading') { var onExpand = treeOptions.callback.onExpand; - layui.type(onExpand) === 'function' && onExpand(tableId, trData, expandFlag); + layui.type(onExpand) === 'function' && onExpand(tableId, trData, trExpand); } return retValue; @@ -908,14 +911,18 @@ layui.define(['table'], function (exports) { }); // 当前层的数据看看是否需要展开 - sonSign !== false && layui.each(dataExpand, function (index, item) { - var trDefaultExpand = tableViewElem.find('tr[lay-data-index="' + index + '"]'); - trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptionsView.flexIconOpen); - expandNode({trElem: trDefaultExpand.first()}, true); - }); - - options.hasNumberCol && that.formatNumber(tableId); - form.render(null, tableFilterId); + if (sonSign !== false && dataExpand) { + layui.each(dataExpand, function (index, item) { + var trDefaultExpand = tableViewElem.find('tr[lay-data-index="' + index + '"]'); + trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptionsView.flexIconOpen); + expandNode({trElem: trDefaultExpand.first()}, true); + }); + } else { + debounceFn('renderTreeTable-' + tableId, function () { + options.hasNumberCol && formatNumber(that); + form.render(null, tableFilterId); + }, 0)(); + } } var formatNumber = function (that) { @@ -923,24 +930,18 @@ layui.define(['table'], function (exports) { var tableViewElem = options.elem.next(); var num = 0; + var trMain = tableViewElem.find('.layui-table-main tbody tr'); + var trFixedL = tableViewElem.find('.layui-table-fixed-l tbody tr'); + var trFixedR = tableViewElem.find('.layui-table-fixed-r tbody tr'); layui.each(that.treeToFlat(table.cache[options.id]), function (i1, item1) { - if (layui.isArray(item1)) { - return; - } var itemData = that.getNodeDataByIndex(item1[LAY_DATA_INDEX]); itemData['LAY_NUM'] = ++num; - tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"] .laytable-cell-numbers').html(itemData['LAY_NUM']); + trMain.eq(i1).find('.laytable-cell-numbers').html(num); + trFixedL.eq(i1).find('.laytable-cell-numbers').html(num); + trFixedR.eq(i1).find('.laytable-cell-numbers').html(num); }) } - Class.prototype.formatNumber = function (id) { - var that = this; - clearTimeout(id); - timer[id] = setTimeout(function () { - formatNumber(that); - }, 10) - } - // 树表渲染 Class.prototype.render = function (type) { var that = this; From 394f34efce5bf8fca1de3eafb986ac985b094024 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Wed, 24 May 2023 15:02:34 +0800 Subject: [PATCH 07/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20treeTable=20?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=8F=B6=E5=AD=90=E8=8A=82=E7=82=B9=E6=B2=A1?= =?UTF-8?q?=E6=9C=89=E6=8A=98=E5=8F=A0=E5=9B=BE=E6=A0=87=E6=B2=A1=E6=9C=89?= =?UTF-8?q?=E5=8F=98=E5=8C=96=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 0484b448..636eab6a 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -453,9 +453,6 @@ layui.define(['table'], function (exports) { var isToggle = layui.type(expandFlag) !== 'boolean'; var trExpand = isToggle ? !trData[LAY_EXPAND] : expandFlag; var retValue = trData[isParentKey] ? trExpand : null; - if (retValue === null) { - return retValue; - } if (callbackFlag && trExpand != trData[LAY_EXPAND] && (!trData[LAY_ASYNC_STATUS] || trData[LAY_ASYNC_STATUS] === 'local')) { var beforeExpand = treeOptions.callback.beforeExpand; @@ -580,7 +577,6 @@ layui.define(['table'], function (exports) { }); return retValue; } - trData[LAY_EXPAND] = trExpand; trExpanded = trData[LAY_HAS_EXPANDED] = true; if (childNodes.length) { // 判断是否需要排序 @@ -646,7 +642,6 @@ layui.define(['table'], function (exports) { } } } else { - trData[LAY_EXPAND] = trExpand; // 关闭 if (sonSign && !isToggle) { // 非状态切换的情况下 layui.each(childNodes, function (i1, item1) { @@ -740,7 +735,9 @@ layui.define(['table'], function (exports) { tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass(HIDE); tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose); - treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconClose); + treeOptions.view.showIcon && tableView + .find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)') + .html(treeOptions.view.iconClose); } else { var tableDataFlat = treeTable.getData(id, true); // 展开所有 From 5b54593d840fb6e101a770bea46dc14ae4d541a5 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Wed, 24 May 2023 16:46:56 +0800 Subject: [PATCH 08/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20treeTable=20`expandA?= =?UTF-8?q?ll`=20=E5=B1=95=E5=BC=80=E8=8A=82=E7=82=B9=E6=8E=92=E5=BA=8F?= =?UTF-8?q?=E5=87=BA=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 636eab6a..15d362a8 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -784,15 +784,20 @@ layui.define(['table'], function (exports) { tableView.find('tbody tr[data-level!="0"]').removeClass(HIDE); // 处理节点的图标 tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen); - treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconOpen); + treeOptions.view.showIcon && tableView + .find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)') + .html(treeOptions.view.iconOpen); } else { - // 如果有未打开过的父节点，将内容全部生成 + // 如果有未打开过的父节点，将 tr 内容全部重新生成 that.updateStatus(null, function (d) { if (d[isParentKey]) { d[LAY_EXPAND] = true; d[LAY_HAS_EXPANDED] = true; } - }); // {LAY_EXPAND: true, LAY_HAS_EXPANDED: true}); + }); + if (options.initSort && options.initSort.type && (!options.url || options.autoSort)) { + return treeTable.sort(id); + } var trAll = table.getTrHtml(id, tableDataFlat); var trAllObj = { @@ -800,23 +805,17 @@ layui.define(['table'], function (exports) { trs_fixed: $(trAll.trs_fixed.join('')), trs_fixed_r: $(trAll.trs_fixed_r.join('')) } + var props; layui.each(tableDataFlat, function (dataIndex, dataItem) { var dataLevel = dataItem[LAY_DATA_INDEX].split('-').length - 1; - trAllObj.trs.eq(dataIndex).attr({ + props = { 'data-index': dataItem[LAY_DATA_INDEX], 'lay-data-index': dataItem[LAY_DATA_INDEX], 'data-level': dataLevel - }) - trAllObj.trs_fixed.eq(dataIndex).attr({ - 'data-index': dataItem[LAY_DATA_INDEX], - 'lay-data-index': dataItem[LAY_DATA_INDEX], - 'data-level': dataLevel - }) - trAllObj.trs_fixed_r.eq(dataIndex).attr({ - 'data-index': dataItem[LAY_DATA_INDEX], - 'lay-data-index': dataItem[LAY_DATA_INDEX], - 'data-level': dataLevel - }) + }; + trAllObj.trs.eq(dataIndex).attr(props) + trAllObj.trs_fixed.eq(dataIndex).attr(props) + trAllObj.trs_fixed_r.eq(dataIndex).attr(props) }) layui.each(['main', 'fixed-l', 'fixed-r'], function (i, item) { tableView.find('.layui-table-' + item + ' tbody').html(trAllObj[['trs', 'trs_fixed', 'trs_fixed_r'][i]]); From cdd8934d6dfdd06bed16e61e6ea1ddc45bec8074 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Wed, 24 May 2023 16:52:57 +0800 Subject: [PATCH 09/15] =?UTF-8?q?=E4=BC=98=E5=8C=96=20treeTable=20?= =?UTF-8?q?=E6=A0=91=E8=A1=A8=E8=8A=82=E7=82=B9=E6=B8=B2=E6=9F=93=E6=96=B9?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 45 +++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 15d362a8..27492c5e 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -623,9 +623,7 @@ layui.define(['table'], function (exports) { tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed_r); // 初始化新增的节点中的内容 - layui.each(str2Obj, function (key, item) { - treeTableThat.renderTreeTable(item, dataLevelNew); - }) + treeTableThat.renderTreeTable(str2Obj.trs, dataLevelNew); if (sonSign && !isToggle) { // 非状态切换的情况下 // 级联展开/关闭子节点 @@ -830,7 +828,7 @@ layui.define(['table'], function (exports) { var that = this; var options = that.getOptions(); var tableViewElem = options.elem.next(); - tableViewElem.addClass(TABLE_TREE); + !tableViewElem.hasClass(TABLE_TREE) && tableViewElem.addClass(TABLE_TREE); var tableId = options.id; var treeOptions = options.tree || {}; var treeOptionsData = treeOptions.data || {}; @@ -853,7 +851,7 @@ layui.define(['table'], function (exports) { }) } - var dataExpand = {}; // 记录需要展开的数据 + var dataExpand = null; // 记录需要展开的数据 var nameKey = customName.name; var indent = treeOptionsView.indent || 14; layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) { @@ -863,21 +861,26 @@ layui.define(['table'], function (exports) { if (itemCell.hasClass('layui-table-tree-item')) { return; } - itemCell.addClass('layui-table-tree-item'); var trIndex = trElem.attr('lay-data-index'); if (!trIndex) { // 排除在统计行中的节点 return; } + trElem = tableViewElem.find('tr[lay-data-index="' + trIndex + '"]'); var trData = treeTableThat.getNodeDataByIndex(trIndex); + if (trData[LAY_EXPAND]) { // 需要展开 + dataExpand = dataExpand || {}; dataExpand[trIndex] = true; } + if (trData[LAY_CHECKBOX_HALF]) { + trElem.find('input[type="checkbox"][name="layTableCheckbox"]').prop('indeterminate', true); + } - var tableCellElem = item.find('div.layui-table-cell'); - var htmlTemp = tableCellElem.html(); - - var flexIconElem = item.find('div.layui-table-cell') + var htmlTemp = itemCell.html(); + itemCell = trElem.find('td[data-field="' + nameKey + '"]>div.layui-table-cell'); + itemCell.addClass('layui-table-tree-item'); + var flexIconElem = itemCell .html(['
' + - (trData.icon || treeOptionsView.icon || + (trData[customName.icon] || treeOptionsView.icon || (trData[isParentKey] ? (trData[LAY_EXPAND] ? treeOptionsView.iconOpen : treeOptionsView.iconClose) : treeOptionsView.iconLeaf) || @@ -1204,22 +1207,16 @@ layui.define(['table'], function (exports) { trs_fixed_r: $(newNodesHtml.trs_fixed_r.join('')) } + var attrs = {}; layui.each(newNodes, function (newNodeIndex, newNodeItem) { - newNodesHtmlObj.trs.eq(newNodeIndex).attr({ + attrs = { 'data-index': newNodeItem[LAY_DATA_INDEX], 'lay-data-index': newNodeItem[LAY_DATA_INDEX], 'data-level': '0' - }) - newNodesHtmlObj.trs_fixed.eq(newNodeIndex).attr({ - 'data-index': newNodeItem[LAY_DATA_INDEX], - 'lay-data-index': newNodeItem[LAY_DATA_INDEX], - 'data-level': '0' - }) - newNodesHtmlObj.trs_fixed_r.eq(newNodeIndex).attr({ - 'data-index': newNodeItem[LAY_DATA_INDEX], - 'lay-data-index': newNodeItem[LAY_DATA_INDEX], - 'data-level': '0' - }) + }; + newNodesHtmlObj.trs.eq(newNodeIndex).attr(attrs) + newNodesHtmlObj.trs_fixed.eq(newNodeIndex).attr(attrs) + newNodesHtmlObj.trs_fixed_r.eq(newNodeIndex).attr(attrs) }) var trIndexPrev = parseInt(newNodes[0][LAY_DATA_INDEX]) - 1; var tableViewElemMAIN = tableViewElem.find(ELEM_MAIN); From 3772c6f1e8106bcce46c0b8f476a996ec7061416 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Wed, 24 May 2023 16:55:21 +0800 Subject: [PATCH 10/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20treeTable=20?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E9=80=89=E4=B8=AD=E7=8A=B6=E6=80=81=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 27492c5e..928b73e2 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -1125,7 +1125,7 @@ layui.define(['table'], function (exports) { var indexArr = []; 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); + that.updateCheckStatus(nodeP); 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] + '"]'); @@ -1148,7 +1148,7 @@ layui.define(['table'], function (exports) { layui.each(table.cache[id], function (i4, item4) { tableView.find('tr[data-level="0"][lay-data-index="' + item4[LAY_DATA_INDEX] + '"]').attr('data-index', i4); }) - options.hasNumberCol && that.formatNumber(id); + options.hasNumberCol && formatNumber(that); } /** @@ -1279,7 +1279,7 @@ layui.define(['table'], function (exports) { parentNode[LAY_ASYNC_STATUS] = 'local'; // 转为本地数据，应该规定异步加载子节点的时候addNodes的规则 expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + parentIndex + '"]')}, true) } - that.updateCheckStatus(parentNode, true); + that.updateCheckStatus(parentNode); treeTable.resize(id); if (focus) { // 滚动到第一个新增的节点 @@ -1415,7 +1415,7 @@ layui.define(['table'], function (exports) { // 如有必要更新父节点们的状态 if (dataP) { - var trsP = that.updateParentCheckStatus(dataP, checked); + var trsP = that.updateParentCheckStatus(dataP, layui.type(checked) === 'boolean' ? checked : null); layui.each(trsP, function (indexP, itemP) { form.render(tableView.find('tr[lay-data-index="' + itemP[LAY_DATA_INDEX] + '"] input[name="layTableCheckbox"]:not(:disabled)').prop({ checked: itemP[checkName], @@ -1455,7 +1455,7 @@ layui.define(['table'], function (exports) { var dataRet = []; dataP[LAY_CHECKBOX_HALF] = false; // 先设置为非半选，是否为半选又下面逻辑判断 - if (checked) { + if (checked === true) { // 为真需要判断子节点的情况 if (!dataP[childrenKey].length) { checked = false; @@ -1468,7 +1468,7 @@ layui.define(['table'], function (exports) { } }); } - } else { + } else if (checked === false) { // 判断是否为半选 layui.each(dataP[childrenKey], function (index, item) { if (item[checkName] || item[LAY_CHECKBOX_HALF]) { // 只要有一个子节点为选中或者半选状态 @@ -1476,6 +1476,17 @@ layui.define(['table'], function (exports) { return true; } }); + } else { + // 状态不确定的情况下根据子节点的信息 + checked = false; + var checkedNum = 0; + layui.each(dataP[childrenKey], function (index, item) { + if (item[checkName]) { + checkedNum++; + } + }); + checked = dataP[childrenKey].length ? dataP[childrenKey].length === checkedNum : dataP[checkName]; // 如果没有子节点保留原来的状态; + dataP[LAY_CHECKBOX_HALF] = checked ? false : checkedNum > 0; } dataP[checkName] = checked; dataRet.push($.extend({}, dataP)); @@ -1585,13 +1596,13 @@ layui.define(['table'], function (exports) { } }) - /** * 设置行选中状态 * @param {String} id 树表id - * @param {Object|String} index 节点下标 - * @param {Boolean} checked 选中或取消 - * @param {Boolean} [callbackFlag] 是否触发事件回调 + * @param {Object} opts + * @param {Object|String} opts.index 节点下标 + * @param {Boolean} opts.checked 选中或取消 + * @param {Boolean} [opts.callbackFlag] 是否触发事件回调 * */ treeTable.setRowChecked = function (id, opts) { var that = getThisTable(id); From 5a6122b4d96ebc50e322bc019cf26ff5125a8d6d Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Thu, 25 May 2023 10:49:14 +0800 Subject: [PATCH 11/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20treeTable=20`reAsync?= =?UTF-8?q?`=20=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD=E5=AD=90=E8=8A=82?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 928b73e2..11fca3e2 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -1662,6 +1662,41 @@ layui.define(['table'], function (exports) { return isSimpleData ? getThisTable(id).treeToFlat(tableData) : tableData; } + /** + * 重新加载子节点 + * @param {String} id 表格id + * @param {String} dataIndex 父节点的dataIndex + * */ + treeTable.reAsync = function (id, dataIndex) { + var that = getThisTable(id); + if (!that) { + return; + } + + var options = that.getOptions(); + var treeOptions = options.tree; + if (!treeOptions.async || !treeOptions.async.enable) { + return; + } + var dataP = that.getNodeDataByIndex(dataIndex); + if (!dataP) { + return; + } + dataP[LAY_HAS_EXPANDED] = false; + dataP[LAY_EXPAND] = false; + dataP[LAY_ASYNC_STATUS] = false; + layui.each(that.treeToFlat(dataP[treeOptions.customName.children]).reverse(), function (i1, item1) { + treeTable.removeNode(id, item1[LAY_DATA_INDEX]); + }) + // 重新展开 + treeTable.expandNode(id, { + index: dataIndex, + expandFlag: true, + callbackFlag: true, + }) + } + + // 记录所有实例 thisTreeTable.that = {}; // 记录所有实例对象 // thisTreeTable.config = {}; // 记录所有实例配置项 From ccdcdcd4dca2846c8bdf8c671ea46e5d3a717eb2 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Thu, 25 May 2023 16:29:13 +0800 Subject: [PATCH 12/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20treeTable=20`async`?= =?UTF-8?q?=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E5=AD=90=E8=8A=82=E7=82=B9=E7=9A=84=E6=96=B9=E6=B3=95?= =?UTF-8?q?=20`format`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 11fca3e2..ab606398 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -516,9 +516,24 @@ layui.define(['table'], function (exports) { } else { var asyncSetting = treeOptions.async || {}; var asyncUrl = asyncSetting.url || options.url; - // 提供一个能支持用户在获取子数据转换调用的回调，这样让子节点数据获取更加灵活 todo - if (asyncSetting.enable && trData[isParentKey] && asyncUrl && !trData[LAY_ASYNC_STATUS]) { + if (asyncSetting.enable && trData[isParentKey] && !trData[LAY_ASYNC_STATUS]) { trData[LAY_ASYNC_STATUS] = 'loading'; + flexIconElem.html(''); + + // 异步获取子节点数据成功之后处理方法 + var asyncSuccessFn = function (data) { + 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); + } + + var format = asyncSetting.format; // 自定义数据返回方法 + if (layui.type(format) === 'function') { + format(trData, options, asyncSuccessFn); + return retValue; + } + var params = {}; // 参数 var data = $.extend(params, asyncSetting.where || options.where); @@ -540,8 +555,6 @@ layui.define(['table'], function (exports) { var asyncParseData = asyncSetting.parseData || options.parseData; var asyncResponse = asyncSetting.response || options.response; - // that.loading(); - flexIconElem.html('') $.ajax({ type: asyncType || 'get', url: asyncUrl, @@ -551,7 +564,6 @@ layui.define(['table'], function (exports) { jsonpCallback: asyncJsonpCallback, headers: asyncHeaders || {}, success: function (res) { - trData[LAY_ASYNC_STATUS] = 'success'; // 若有数据解析的回调，则获得其返回的数据 if (typeof asyncParseData === 'function') { res = asyncParseData.call(options, res) || res; @@ -563,10 +575,8 @@ layui.define(['table'], function (exports) { flexIconElem.html(''); // 事件 } else { - trData[customName.children] = res[asyncResponse.dataName]; - treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]) // 正常返回 - expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag); + asyncSuccessFn(res[asyncResponse.dataName]); } }, error: function (e, msg) { From fcfe5c2fed67630fee9f9cc7872f1bbb6b056251 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Thu, 25 May 2023 18:12:32 +0800 Subject: [PATCH 13/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20treeTable=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20getNodeById=20=E5=92=8C=20getNodesByFilter?= =?UTF-8?q?=20=E6=96=B9=E6=B3=95=E9=80=9A=E8=BF=87=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E8=BF=94=E5=9B=9E=E8=8A=82=E7=82=B9=E5=AF=B9?= =?UTF-8?q?=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 122 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 118 insertions(+), 4 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index ab606398..0a699de8 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -331,6 +331,79 @@ layui.define(['table'], function (exports) { return flat; } + // 通过当前行数据返回 treeNode 信息 + Class.prototype.getTreeNode = function (data) { + var that = this; + if (!data) { + return hint.error('找不到节点数据'); + } + var options = that.getOptions(); + var treeOptions = options.tree; + var tableId = options.id; + var customName = treeOptions.customName; + + var treeNode = { + data: data, + dataIndex: data[LAY_DATA_INDEX], + getParentNode: function () { + return that.getNodeByIndex(data[LAY_PARENT_INDEX]) + }, + } + // 带上一些常用的方法 + + return treeNode; + } + + // 通过 index 返回节点信息 + Class.prototype.getNodeByIndex = function (index) { + var that = this; + var treeNodeData = that.getNodeDataByIndex(index); + if (!treeNodeData) { + return hint.error('找不到节点数据'); + } + var options = that.getOptions(); + var treeOptions = options.tree; + var customName = treeOptions.customName; + var parentKey = customName.parent; + var tableId = options.id; + + var treeNode = { + data: treeNodeData, + dataIndex: treeNodeData[LAY_DATA_INDEX], + getParentNode: function () { + return that.getNodeByIndex(treeNodeData[LAY_PARENT_INDEX]) + } + }; + + treeNode.dataIndex = index; + return treeNode; + } + + // 通过 id 获取节点信息 + Class.prototype.getNodeById = function (id) { + var that = this; + var options = that.getOptions(); + var treeOptions = options.tree; + var customName = treeOptions.customName; + var idKey = customName.id; + + // 通过 id 拿到数据的 dataIndex + var dataIndex = ''; + var tableDataFlat = treeTable.getData(options.id, true); + layui.each(tableDataFlat, function (i1, item1) { + if (item1[idKey] === id) { + dataIndex = item1[LAY_DATA_INDEX]; + return true; + } + }) + if (!dataIndex) { + return; + } + + // 用index + return that.getNodeByIndex(dataIndex); + } + // 通过index获取节点数据 Class.prototype.getNodeDataByIndex = function (index, clone, newValue) { var that = this; @@ -356,9 +429,6 @@ layui.define(['table'], function (exports) { // 删除 if (tableCache) { // 同步cache - // tableCache.splice(tableCache.findIndex(function (value) { - // return value[LAY_DATA_INDEX] === index; - // }), 1); layui.each(tableCache, function (i1, item1) { if (item1[LAY_DATA_INDEX] === index) { tableCache.splice(i1, 1); @@ -1664,12 +1734,15 @@ layui.define(['table'], function (exports) { * @return {Array} 表格数据 * */ treeTable.getData = function (id, isSimpleData) { + var that = getThisTable(id); + if (!that) return; + var tableData = []; layui.each($.extend(true, [], table.cache[id] || []), function (index, item) { // 遍历排除掉临时的数据 tableData.push(item); }) - return isSimpleData ? getThisTable(id).treeToFlat(tableData) : tableData; + return isSimpleData ? that.treeToFlat(tableData) : tableData; } /** @@ -1706,6 +1779,47 @@ layui.define(['table'], function (exports) { }) } + /** + * 通过数据id获取节点对象 + * */ + treeTable.getNodeById = function (id, dataId) { + var that = getThisTable(id); + if (!that) return; + + return that.getNodeById(dataId); + } + + /** + * 根据自定义规则搜索节点数据 + * @param {String} id 树表id + * @param {Function} filter 自定义过滤器函数 + * @param {Object} [opts] + * @param {Boolean} [opts.isSingle] 是否只找到第一个 + * @param {Object} [opts.parentNode] 在指定在某个父节点下的子节点中搜索 + * @return {Object} 节点对象 + * */ + treeTable.getNodesByFilter = function (id, filter, opts) { + var that = getThisTable(id); + if (!that) return; + var options = that.getOptions(); + + opts = opts || {}; + var isSingle = opts.isSingle; + var parentNode = opts.parentNode; + var dataP = parentNode && parentNode.data; + // dataP = dataP || table.cache[id]; + var nodes = that.treeToFlat(dataP ? (dataP[options.tree.customName.children] || []) : table.cache[id]).filter(filter); + var nodesResult = []; + layui.each(nodes, function (i1, item1) { + nodesResult.push(that.getNodeByIndex(item1[LAY_DATA_INDEX])); + if (isSingle) { + return true; + } + }); + + return nodesResult; + } + // 记录所有实例 thisTreeTable.that = {}; // 记录所有实例对象 From 8e873dde1dfa365ab419524a16f76eef98b0764f Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Fri, 26 May 2023 13:43:21 +0800 Subject: [PATCH 14/15] =?UTF-8?q?=E5=AE=8C=E5=96=84=20treeTable=20?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E8=8A=82=E7=82=B9=E6=96=B9=E6=B3=95=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E7=9A=84=E8=8A=82=E7=82=B9=E5=AF=B9=E8=B1=A1=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=87=A0=E4=B8=AA=E5=B8=B8?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E8=8A=82=E7=82=B9=E6=96=B9=E6=B3=95=E6=96=B9?= =?UTF-8?q?=E4=BE=BF=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 0a699de8..92a90c84 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -372,6 +372,22 @@ layui.define(['table'], function (exports) { dataIndex: treeNodeData[LAY_DATA_INDEX], getParentNode: function () { return that.getNodeByIndex(treeNodeData[LAY_PARENT_INDEX]) + }, + update: function (data) { + return treeTable.updateNode(tableId, index, data) + }, + remove: function () { + return treeTable.removeNode(tableId, index) + }, + expand: function (opts) { + return treeTable.expandNode(tableId, $.extend({}, opts, { + index: index + })) + }, + setChecked: function (opts) { + return treeTable.setRowChecked(tableId, $.extend({}, opts, { + index: index + })) } }; From cbfbc11dd8c0134c70c74cfe34142267bca5d001 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <470459819@qq.com> Date: Sun, 28 May 2023 12:39:19 +0800 Subject: [PATCH 15/15] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20table=20`setRowCheck?= =?UTF-8?q?ed`=20=E6=96=B9=E6=B3=95=E6=97=A0=E6=B3=95=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E5=AF=B9=E5=BA=94=E7=9A=84=E4=BA=8B=E4=BB=B6=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 1712f5d7..62844c8d 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1459,9 +1459,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK); } - // 仅设置样式状态 - if(opts.selectedStyle || selectedStyle) return; - // 同步数据选中属性值 var thisData = table.cache[that.key]; @@ -1475,13 +1472,28 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ }); // 若存在复选框或单选框，则标注选中样式 - tr.find('input[lay-type="'+ ({ + var checkedElem = tr.find('input[lay-type="'+ ({ radio: 'layTableRadio', checkbox: 'layTableCheckbox' }[opts.type] || 'checkbox') +'"]').prop('checked', opts.checked); that.syncCheckAll(); that.renderForm(opts.type); + + // 仅设置样式状态 + if(opts.selectedStyle || selectedStyle) return; + + layui.event.call( + checkedElem[0], + MOD_NAME, opts.type + '('+ options.elem.attr('lay-filter') +')', + that.commonMember.call(checkedElem[0], { + checked: opts.checked, + type: opts.index === 'all' ? 'all' : 'one', + getCol: function(){ // 获取当前列的表头配置信息 + return that.col(checkedElem.closest('td').data('key')); + } + }) + ); }; // 数据排序