From 4b7f74b97be37196e73cf463c564d331eaebcfab Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Mon, 27 Jun 2022 03:39:23 +0800 Subject: [PATCH 1/8] =?UTF-8?q?table=20=E4=BF=AE=E5=A4=8D=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=E9=97=AE=E9=A2=98=E5=92=8C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 71 +++++++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 154394d5..dd6a1ccc 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1013,7 +1013,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ }; table.cache[that.key] = data; //记录数据 - + that.totalRowData = totalRowData;// 记录统计信息 + //显示隐藏分页栏 //that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE); @@ -1081,7 +1082,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ ,totalNums = {}; if(!options.totalRow) return; - + data = data || table.cache[that.key]; + totalRowData = totalRowData || that.totalRowData; + layui.each(data, function(i1, item1){ //若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []） if(layui.type(item1) === 'array' && item1.length === 0) return; @@ -1352,8 +1355,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ if(options.toolbar){ bodyHeight -= (that.layTool.outerHeight() || 50); } - - //减去统计朗的高度 + + //减去统计栏的高度 if(options.totalRow){ bodyHeight -= (that.layTotal.outerHeight() || 40); } @@ -1668,42 +1671,42 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ tr: tr //行元素 ,data: table.clearCacheKey(data) //当前行数据 ,del: function(){ //删除行数据 - table.cache[that.key][index] = []; + table.cache[that.key][index] = []; + that.renderTotal(); tr.remove(); that.scrollPatch(); } ,update: function(fields){ //修改行数据 fields = fields || {}; - layui.each(fields, function(key, value){ - var td = tr.children('td[data-field="'+ key +'"]') - ,cell = td.children(ELEM_CELL); //获取当前修改的列 + var updateNode = {}; // 记录需要更新的列 + var updateFlag = false; // 记录是否发生了实质的修改 - //更新缓存中的数据 - if(key in data) data[key] = value; - - that.eachCols(function(i, item3){ - //更新相应列视图 - if(item3.field == key){ - cell.html(parseTempData.call(that, { - item3: item3 - ,content: value - ,tplData: data - })); - td.data('content', value); - item3.templet && that.renderForm(); - } else if(item3.templet || item3.toolbar){ //更新所有其他列的模板 - var thisTd = tr.children('td[data-field="'+ (item3.field || i) +'"]') - ,content = data[item3.field]; - thisTd.children(ELEM_CELL).html(parseTempData.call(that, { - item3: item3 - ,content: content - ,tplData: data - })); - thisTd.data('content', content); - that.renderForm(); - } - }); + that.eachCols(function(i, item3){ + if(item3.field in fields){ // 修改的数据中包含了表格中的字段 + updateFlag = true; // 标记为有实质的修改 + data[item3.field] = fields[item3.field]; // 更新缓存中的数据 + updateNode[item3.key] = item3; + } else if(item3.templet || item3.toolbar){ // 记录其他有模板需要联动更新的字段 + updateNode[item3.key] = item3; + } }); + + if (!updateFlag) { // 检测到没有实际的变化直接结束不做无谓的渲染 + return updateFlag; // 返回标记状态以便调用的时候可以根据返回是否===false判断是否真的发生实质的数据以及节点修改 + } + layui.each(updateNode, function (key, item3) { + var thisTd = tr.children('td[data-key="' + that.index + '-' + key +'"]') + ,content = data[item3.field]; + thisTd.children(ELEM_CELL).html(parseTempData.call(that, { + item3: item3 + ,content: content + ,tplData: data + })); + thisTd.data('content', content); + }) + + that.renderTotal(); + that.renderForm(); } }, sets); }; @@ -1800,7 +1803,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ ,data = table.cache[that.key][index]; data[field] = value; //更新缓存中的值 - + that.renderTotal(); // 更新统计栏信息 layui.event.call(this, MOD_NAME, 'edit('+ filter +')', commonMember.call(this, { value: value ,field: field From 58f7c19ca526e3d79b32dcfb5044a2661081e8e1 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Mon, 27 Jun 2022 06:15:29 +0800 Subject: [PATCH 2/8] =?UTF-8?q?table=20=E4=BF=AE=E5=A4=8DLAY=5FDISABLED?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=9A=84=E4=B8=80=E4=BA=9B=E5=BC=82=E5=B8=B8?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/json/table/demo1.json | 3 ++- src/modules/table.js | 13 +++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/examples/json/table/demo1.json b/examples/json/table/demo1.json index e53682f6..ae07a368 100644 --- a/examples/json/table/demo1.json +++ b/examples/json/table/demo1.json @@ -29,7 +29,8 @@ ,"checkin": "106" ,"joinTime": "2016-10-14" ,"LAY_CHECKED": true - }, { + ,"LAY_DISABLED": true +}, { "id": "10003" ,"username": "苏轼" ,"email": "test3@email.com" diff --git a/src/modules/table.js b/src/modules/table.js index dd6a1ccc..d3eea9cf 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1724,8 +1724,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ //全选 if(isAll){ childs.each(function(i, item){ - item.checked = checked; - that.setCheckData(i, checked); + if (!item.disabled) { + item.checked = checked; + that.setCheckData(i, checked); + } }); that.syncCheckAll(); that.renderForm('checkbox'); @@ -2113,14 +2115,13 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ //计算全选个数 layui.each(data, function(i, item){ - if(layui.type(item) === 'array'){ + if(layui.type(item) === 'array' || item[table.config.disabledName]){ // 不可操作的节点对于统计来说也属于无效 invalidNum++; //无效数据，或已删除的 - return; } if(item[table.config.checkName]){ - nums++; + arr.push(table.clearCacheKey(item)); if(!item[table.config.disabledName]){ - arr.push(table.clearCacheKey(item)); + nums++; } } }); From 1f5781e55f0b4b2277e84dd99bb8cb759a377ed0 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Mon, 27 Jun 2022 07:32:09 +0800 Subject: [PATCH 3/8] =?UTF-8?q?table=20=E5=A4=84=E7=90=86LAY=5FDISABLED?= =?UTF-8?q?=E5=9C=A8=E4=B8=80=E4=BA=9B=E7=89=B9=E6=AE=8A=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=A2=83=E6=AF=94=E5=A6=82=E5=BD=93=E5=89=8D=E9=A1=B5=E6=89=80?= =?UTF-8?q?=E6=9C=89=E8=AE=B0=E5=BD=95=E9=83=BD=E4=B8=8D=E5=8F=AF=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E7=9A=84=E6=97=B6=E5=80=99=E5=85=A8=E9=80=89=E6=A1=86?= =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=EF=BC=88disabled=E5=92=8Cchecked?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index d3eea9cf..bd017b68 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -997,8 +997,15 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ that.renderForm(); typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex); - that.syncCheckAll(); - + if (that.layBody.find('input[name="layTableCheckbox"]:not(:disabled)').length) { + // 当前有可操作的单项复选框才需要同步状态 + that.syncCheckAll(); + } else { + // 没有任何可操作的时候禁止全选框操作并且设置其选中状态 此时不宜用table.checkStatus获取是否全选状态 + form.render(that.layHeader.find('input[name="layTableCheckbox"]').prop('disabled', true) + .prop('checked', !that.layBody.find('input[name="layTableCheckbox"]:not(:checked)').length)); + } + //滚动条补丁 that.haveInit ? that.scrollPatch() : setTimeout(function(){ that.scrollPatch(); From 0a230b6528e5b6314a3dd8324ac1a21386a95934 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Mon, 27 Jun 2022 19:33:40 +0800 Subject: [PATCH 4/8] =?UTF-8?q?table=20=E4=BF=AE=E5=A4=8D=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=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 | 5 ++++- src/modules/table.js | 28 ++++++++++++++++++++-------- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index 16f53ce1..eb199515 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -989,13 +989,16 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-page .layui-laypage input{width: 40px;} .layui-table-page .layui-laypage button{padding: 0 10px;} .layui-table-page select{height: 18px;} -.layui-table-pagebar{float: right; line-height: 32px;} +.layui-table-pagebar{float: right; line-height: 23px;} +.layui-table-pagebar .layui-btn-sm{margin-top: -2px;} +.layui-table-pagebar .layui-btn-xs{margin-top: 2px;} .layui-table-view select[lay-ignore]{display: inline-block;} .layui-table-patch .layui-table-cell{padding: 0; width: 30px;} .layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; min-width: 100%; min-height: 100%; padding: 5px 14px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;} .layui-table-edit:focus{border-color: #5FB878!important;} +input.layui-input.layui-table-edit{height: 100%;} select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;} .layui-table-view .layui-form-switch, .layui-table-view .layui-form-checkbox, diff --git a/src/modules/table.js b/src/modules/table.js index c0d1af9a..90a1b0ea 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -197,7 +197,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ ,'{{# }; }}' ,'{{# if(right){ }}' - ,'
' + ,'
' ,'
' ,TPL_HEADER({fixed: 'right'}) ,'
' @@ -380,7 +380,12 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ if(options.cols.length > 1){ // 补全高度 var th = that.layFixed.find(ELEM_HEADER).find('th'); - th.height(that.layHeader.height() - 1 - parseFloat(th.css('padding-top')) - parseFloat(th.css('padding-bottom'))); + // 固定列表头同步跟本体th一致高度 + var headerMain = that.layHeader.first(); + layui.each(th, function (thIndex, thElem) { + thElem = $(thElem); + thElem.height(headerMain.find('th[data-key="' + thElem.attr('data-key') + '"]').height() + 'px'); + }) } that.pullData(that.page); //请求数据 @@ -867,6 +872,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ //渲染视图 ,render = function(){ //后续性能提升的重点 + //同步表头父列的相关值 + options.HAS_SET_COLS_PATCH || that.setColsPatch(); + options.HAS_SET_COLS_PATCH = true; + var thisCheckedRowIndex; if(!sort && that.sortKey){ return that.sort(that.sortKey.field, that.sortKey.sort, true); @@ -1013,10 +1022,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ that.haveInit = true; layer.close(that.tipsIndex); - - //同步表头父列的相关值 - options.HAS_SET_COLS_PATCH || that.setColsPatch(); - options.HAS_SET_COLS_PATCH = true; }; table.cache[that.key] = data; //记录数据 @@ -1040,7 +1045,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ that.renderForm(); return that.errorView(options.text.none); } else { - that.layFixed.removeClass(HIDE); + that.layFixLeft.removeClass(HIDE); } //如果执行初始排序 @@ -2116,12 +2121,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ var nums = 0 ,invalidNum = 0 ,arr = [] + ,arrDisabled = [] ,data = table.cache[id] || []; //计算全选个数 layui.each(data, function(i, item){ - if(layui.type(item) === 'array' || item[table.config.disabledName]){ // 不可操作的节点对于统计来说也属于无效 + if(layui.type(item) === 'array'){ invalidNum++; //无效数据，或已删除的 + return; + } + if (item[table.config.disabledName]) { + invalidNum++; //不可操作的数据也不计入内 + arrDisabled.push(table.clearCacheKey(item)); } if(item[table.config.checkName]){ arr.push(table.clearCacheKey(item)); @@ -2133,6 +2144,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ return { data: arr //选中的数据 ,isAll: data.length ? (nums === (data.length - invalidNum)) : false //是否全选 + ,dataDisabled: arrDisabled //不可操作的记录(选中与否的都在内) }; }; From f86ef95201a1c426747ba8599906dcc0ff8c2fda Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Mon, 27 Jun 2022 21:55:06 +0800 Subject: [PATCH 5/8] =?UTF-8?q?table=20=E4=BF=AE=E5=A4=8D=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=8C=96=E5=AD=98=E5=9C=A8hide=E5=AD=97=E6=AE=B5?= =?UTF-8?q?=E7=9A=84=E6=97=B6=E5=80=99table.eachCols=E9=83=A8=E5=88=86?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E6=B2=A1=E6=9C=89=E9=81=8D=E5=8E=86=E5=88=B0?= =?UTF-8?q?=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/table.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 90a1b0ea..d8d52f50 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -2077,13 +2077,21 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ // 找到它的子列所在cols的下标 var i2 = i1 + (parseInt(item2.rowspan) || 1); layui.each(cols[i2], function (i22, item22) { - //如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环 - if (item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return; - item22.PARENT_COL_INDEX = index; - - item2.CHILD_COLS.push(item22); - childIndex = childIndex + (item22.hide ? 0 : parseInt(item22.colspan > 1 ? item22.colspan : 1)); - eachChildCols(index, cols, i2, item22); + if (item22.parentKey) { // 如果字段信息中包含了parentKey和key信息 + if (item22.parentKey === item2.key) { + item22.PARENT_COL_INDEX = index; + item2.CHILD_COLS.push(item22); + eachChildCols(index, cols, i2, item22); + } + } else { + // 没有key信息以colspan数量所谓判断标准 + //如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环 + if (item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return; + item22.PARENT_COL_INDEX = index; + item2.CHILD_COLS.push(item22); + childIndex = childIndex + (item22.hide ? 0 : parseInt(item22.colspan > 1 ? item22.colspan : 1)); + eachChildCols(index, cols, i2, item22); + } }); } }; From 7b610bfd5a74e3d040f528f17823858e6f1beed0 Mon Sep 17 00:00:00 2001 From: sunxiaobin89 <285584806@qq.com> Date: Tue, 28 Jun 2022 18:49:24 +0800 Subject: [PATCH 6/8] =?UTF-8?q?table=20=E4=BF=AE=E5=A4=8DreloadData?= =?UTF-8?q?=E6=94=B9=E5=8F=98page=E6=97=B6=E5=80=99=E5=87=BA=E7=8E=B0?= =?UTF-8?q?=E7=9A=84=E4=B8=80=E4=BA=9B=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/layui.css | 2 +- src/modules/table.js | 23 ++++++++++++----------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index eb199515..9a7939a6 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -990,7 +990,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-page .layui-laypage button{padding: 0 10px;} .layui-table-page select{height: 18px;} .layui-table-pagebar{float: right; line-height: 23px;} -.layui-table-pagebar .layui-btn-sm{margin-top: -2px;} +.layui-table-pagebar .layui-btn-sm{margin-top: -1px;} .layui-table-pagebar .layui-btn-xs{margin-top: 2px;} .layui-table-view select[lay-ignore]{display: inline-block;} diff --git a/src/modules/table.js b/src/modules/table.js index d8d52f50..cab5f716 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -217,13 +217,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ , '' ,'
' ,'{{# } }}' - - ,'{{# if(d.data.page || d.data.pagebar){ }}' - ,'
' + + ,'
' ,'
' ,'
' - ,'{{# } }}' - + ,'