Browse Source

feat(table): 新增 `table.updateTotalRow`

pull/1540/head
sight 10 months ago
parent
commit
bc61f9ff08
  1. 60
      docs/table/index.md
  2. 29
      src/modules/table.js

60
docs/table/index.md

@ -314,6 +314,38 @@ data.splice(newIndex, 0, item[0]);
table.renderData('test');
```
<h3 id="table.updateTotalRow" lay-pid="api" class="ws-anchor ws-bold">更新合计行 <sup>2.9.4+</sup></h3>
`table.updateTotalRow(id, totalRowData);`
- 参数 `id` : table 渲染时的 `id` 属性值
- 参数 `totalRowData` : 合计行数据,未传入时,将使用内置的前端自动合计。若为函数,则为计算每一列数据的回调
```js
// 渲染
table.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id 索引
// 其他属性 …
});
// 内置前端自动合计
table.updateTotalRow('test');
// 传入合计行数据,建议采用后端合计时使用
table.updateTotalRow('test', {
score: 100,
count: 20
});
// 自定义合计行计算,建议采用前端合计时使用
table.updateTotalRow('test', function(field, columnValues, tableData){
if(field === 'score') {
return columnValues.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
});
}
});
```
<h3 id="table.updateRow" lay-pid="api" class="ws-anchor ws-bold">更新指定行数据 <sup>2.9.4+</sup></h3>
`table.updateRow(id, opts);`
@ -336,7 +368,7 @@ table.render({
// 其他属性 …
});
// 更新单行
// 更新指定行数据
table.updateRow('test', {
index: 0,
row: {
@ -344,32 +376,6 @@ table.updateRow('test', {
username: 'name'
}
});
// 更新多行
table.updateRow('test', [
{
index: 0,
row: {
id: 1,
username: 'name1'
}
},
{
index: 1,
row: {
id: 2,
username: 'name2'
}
}
]);
// 更新单元格
table.updateRow('test', {
index: 0,
row: {
username: 'name'
}
})
```
<h3 id="table.checkStatus" lay-pid="api" class="ws-anchor ws-bold">获取选中行</h3>

29
src/modules/table.js

@ -1410,6 +1410,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var that = this;
var options = that.config;
var totalNums = {};
var columnValues = {};
if(!options.totalRow) return;
@ -1423,6 +1424,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(item3.totalRow){
totalNums[field] = (totalNums[field] || 0) + (parseFloat(content) || 0);
// 收集合计列的值
if(!columnValues[field]) columnValues[field] = [];
columnValues[field].push(content);
}
});
});
@ -1432,18 +1436,20 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var tds = [];
that.eachCols(function(i3, item3){
var field = item3.field || i3;
// 合计数据的特定字段
var TOTAL_NUMS = totalRowData && totalRowData[item3.field];
var TOTAL_NUMS = (typeof totalRowData === 'function' && item3.totalRow)
? totalRowData(field, columnValues[field], data)
: totalRowData && totalRowData[item3.field];
// 合计数据的小数点位数处理
var decimals = 'totalRowDecimals' in item3 ? item3.totalRowDecimals : 2;
var thisTotalNum = totalNums[field]
? parseFloat(totalNums[field] || 0).toFixed(decimals)
: '';
: '';
// td 显示内容
var content = function(){
// 如果直接传入了合计行数据,则不输出自动计算的结果
var content = TOTAL_NUMS ? TOTAL_NUMS : function(){
var text = item3.totalRowText || '';
var tplData = {
LAY_COL: item3
@ -1458,8 +1464,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
tplData: tplData
}) || text) : text;
// 如果直接传入了合计行数据,则不输出自动计算的结果
return TOTAL_NUMS || getContent;
return getContent;
}();
// 合计原始结果
@ -1512,6 +1517,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.layTotal.find('tbody').html('<tr>' + tds.join('') + (patchElem.length ? patchElem.get(0).outerHTML : '') + '</tr>');
};
/**
* 更新合计行数据未传入合计行数据时将使用内置的自动合计
* @param {string} id 表格 ID
* @param {Object.<string, any> | ((field: string, columnValues: Array<any>, tableData: Array<any>) => string | number)} [totalRowData] - 合计行数据若为函数则为计算每一列合计数据的回调
*/
table.updateTotalRow = function(id, totalRowData){
var that = getThisTable(id);
var data = table.cache[that.key] || []; //列表数据
that.renderTotal(data, totalRowData)
}
//找到对应的列元素
Class.prototype.getColElem = function(parent, key){
var that = this;

Loading…
Cancel
Save