From d412b90320c27f954507f2eedadbafbca79040ed Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Fri, 14 Apr 2023 18:27:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E4=B9=8B=E5=90=8E=E7=9B=B8=E5=85=B3=E7=9A=84=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E5=A4=8D=E9=80=89=E6=A1=86=E7=8A=B6=E6=80=81=E5=BC=82?= =?UTF-8?q?=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/css/layui.css | 7 ++- src/modules/treeTable.js | 129 ++++++++++++++++++++++++++++----------- 2 files changed, 97 insertions(+), 39 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index 68de0302..87c82bb1 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1108,10 +1108,13 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-table-tips-c:before{position: relative; right: -2px;} /** 树表 **/ -.layui-table-tree-nodeIcon {padding-right: 2px;width: 20px;} +.layui-table-tree .layui-table-cell {display: inline-flex; align-items: center;} +.layui-table-tree-nodeIcon {width: 20px;} .layui-table-tree-nodeIcon > * {width: 100%;} +.layui-table-tree-flexIcon,.layui-table-tree-nodeIcon {margin-right: 2px;} +.layui-table-tree-flexIcon {cursor: pointer;} -/** 文件上传 **/ + /** 文件上传 **/ .layui-upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);} .layui-upload-list{margin: 11px 0;} .layui-upload-choose{max-width: 200px; padding: 0 10px; color: #999; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index 2c179790..0e474628 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -171,6 +171,15 @@ layui.define(['table'], function (exports) { }); // 更新cache中的内容 将子节点也存到cache中 updateCache(); + // 更新全选框的状态 + var layTableAllChooseElem = tableView.find('[name="layTableCheckbox"][lay-filter="layTableAllChoose"]'); + if (layTableAllChooseElem.length) { + var checkStatus = treeTable.checkStatus(id); + layTableAllChooseElem.prop({ + checked: checkStatus.isAll && checkStatus.data.length, + indeterminate: !checkStatus.isAll && checkStatus.data.length + }) + } that.renderTreeTable(tableView); @@ -661,7 +670,7 @@ layui.define(['table'], function (exports) { .html(['
', treeOptions.view.flexIconClose, // 折叠图标 '
', @@ -814,6 +823,7 @@ layui.define(['table'], function (exports) { var tableThat = getThisTable(tableId); var trData = obj.data = treeTable.getNodeDataByIndex(tableId, obj.index); // 克隆的 var trIndex = trData[LAY_DATA_INDEX]; + obj.dataIndex = trIndex; // 处理update方法 var updateFn = obj.update; @@ -827,17 +837,9 @@ layui.define(['table'], function (exports) { } // 处理del方法 - var delFn = obj.del; obj.del = function () { - var updateThat = this; - var args = arguments; - // 原始的方法是讲对应下标的元素换成空数组，并删除相关节点，已经由 - // var ret = delFn.apply(updateThat, args); - // delete table.cache[tableId][trIndex]; treeTable.removeNode(tableId, trIndex); - // return ret; } - } // 更新数据 @@ -857,7 +859,6 @@ layui.define(['table'], function (exports) { var newNodeTemp = that.getNodeDataByIndex(index, false, newNode); // 获取新的tr替换 var trNew = table.getTrHtml(id, [newNodeTemp]); - debugger; // 重新渲染tr layui.each(['main', 'fixed-l', 'fixed-r'], function (i, item) { tableView.find('.layui-table-' + item + ' tbody tr[lay-data-index="' + index + '"]').replaceWith($(trNew[['trs', 'trs_fixed', 'trs_fixed_r'][i]].join('')).attr({ @@ -881,6 +882,8 @@ layui.define(['table'], function (exports) { var indexArr = []; layui.each(index, function (index, indexValue) { delNode = that.getNodeDataByIndex(indexValue, false, 'delete'); + var nodeP = that.getNodeDataByIndex(delNode[LAY_PARENT_INDEX]); + that.updateCheckStatus(nodeP, true);// 删除节点接近取消选择 todo var delNodesFlat = that.treeToFlat([delNode], delNode[treeOptions.data.simpleData.pIdKey], delNode[LAY_PARENT_INDEX]); layui.each(delNodesFlat, function (i2, item2) { indexArr.push('tr[lay-data-index="' + item2[LAY_DATA_INDEX] + '"]'); @@ -1137,6 +1140,47 @@ layui.define(['table'], function (exports) { } }) + // 更新表格的复选框状态 + Class.prototype.updateCheckStatus = function (dataP, checked) { + var that = this; + var options = that.getOptions(); + var treeOptions = options.tree; + var tableId = options.id; + var tableView = options.elem.next(); + + var checkName = table.config.checkName; + + // 如有必要更新父节点们的状态 + if (dataP) { + var trsP = that.updateParentCheckStatus(dataP, checked); + 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], + indeterminate: itemP[LAY_CHECKBOX_HALF] + })) + }) + } + + // 更新全选的状态 + var isAll = true; + var isIndeterminate = false; + layui.each(table.cache[tableId], function (i1, item1) { + if (item1[checkName] || item1[LAY_CHECKBOX_HALF]) { + isIndeterminate = true; + } + if (!item1[checkName]) { + isAll = false; + } + }) + isIndeterminate = isIndeterminate && !isAll; + form.render(tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({ + 'checked': isAll, + indeterminate: isIndeterminate + })); + + return isAll + } + // 更新父节点的选中状态 Class.prototype.updateParentCheckStatus = function (dataP, checked) { var that = this; @@ -1197,42 +1241,53 @@ layui.define(['table'], function (exports) { var checkedStatus = {}; checkedStatus[checkName] = checked; checkedStatus[LAY_CHECKBOX_HALF] = false; - var trs = that.updateStatus(trData ? [trData] : table.cache[tableId], checkedStatus); + + // 处理不可操作的信息 + var checkedStatusFn = function (d) { + if (!d[table.config.disabledName]) { // 节点不可操作的不处理 + d[checkName] = checked; + d[LAY_CHECKBOX_HALF] = false; + } + } + + // var trs = that.updateStatus(trData ? [trData] : table.cache[tableId], checkedStatus); + var trs = that.updateStatus(trData ? [trData] : table.cache[tableId], checkedStatusFn); form.render(tableView.find(trs.map(function (value) { - return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"] input[name="layTableCheckbox"]'; + return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"] input[name="layTableCheckbox"]:not(:disabled)'; }).join(',')).prop({checked: checked, indeterminate: false})); } - + var trDataP; // 更新父节点以及更上层节点的状态 if (trData && trData[LAY_PARENT_INDEX]) { // 找到父节点，然后判断父节点的子节点是否全部选中 - var trDataP = that.getNodeDataByIndex(trData[LAY_PARENT_INDEX]); - var trsP = that.updateParentCheckStatus(trDataP, checked); - layui.each(trsP, function (indexP, itemP) { - form.render(tableView.find('tr[lay-data-index="' + itemP[LAY_DATA_INDEX] + '"] input[name="layTableCheckbox"]').prop({ - checked: itemP[checkName], - indeterminate: itemP[LAY_CHECKBOX_HALF] - })) - }) + trDataP = that.getNodeDataByIndex(trData[LAY_PARENT_INDEX]); + // var trsP = that.updateParentCheckStatus(trDataP, checked); + // 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], + // indeterminate: itemP[LAY_CHECKBOX_HALF] + // })) + // }) } + obj.isAll = that.updateCheckStatus(trDataP, checked); + // 全选图标的状态更新 - obj.isAll = true; - var isIndeterminate = false; - layui.each(table.cache[tableId], function (i1, item1) { - if (item1[checkName] || item1[LAY_CHECKBOX_HALF]) { - isIndeterminate = true; - } - if (!item1[checkName]) { - obj.isAll = false; - return true; - } - }) - isIndeterminate = isIndeterminate && !obj.isAll; - form.render(tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({ - 'checked': obj.isAll, - indeterminate: isIndeterminate - })); + // obj.isAll = true; + // var isIndeterminate = false; + // layui.each(table.cache[tableId], function (i1, item1) { + // if (item1[checkName] || item1[LAY_CHECKBOX_HALF]) { + // isIndeterminate = true; + // } + // if (!item1[checkName]) { + // obj.isAll = false; + // } + // }) + // isIndeterminate = isIndeterminate && !obj.isAll; + // form.render(tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({ + // 'checked': obj.isAll, + // indeterminate: isIndeterminate + // })); } })