feat(table): col.totalRow 支持函数,改进 updateTotalRow 参数

pull/1540/head
sight 2024-01-13 13:36:20 +08:00
parent d361a327ea
commit 1a5258b292
3 changed files with 70 additions and 12 deletions

View File

@ -275,7 +275,28 @@ totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'
```
!}}
注意:*合计行模板仅支持字符写法,不支持函数写法,请勿与 `templet` 用法混淆。*
// 函数写法(2.9.4+)
totalRow: function(obj){
// 内置用于快速实现合计
// obj.field - 当前列字段值
// obj.totalValue - 当前列合计值
// obj.totalData - 所有列合计数据
// 用于自定义列计算
// obj.columnValues - 当前列值的数组
// obj.columnData - 所有列值的数据
// obj.tableData - 当前页所有数据
// 合计格式化
return '合计:' + obj.totalValue + '🥇'
// 平均
return '平均分:' + obj.totalValue / obj.columnValues.length
}
注意:*合计行模板函数写法,与 `templet` 用法不同,请勿混淆。*
- **采用后端合计**

View File

@ -338,12 +338,27 @@ table.updateTotalRow('test', {
});
// 自定义合计行计算,建议采用前端合计时使用
table.updateTotalRow('test', function(field, columnValues, tableData){
if(field === 'score') {
return columnValues.reduce(function(accumulator, currentValue){
table.updateTotalRow('test', function(obj){
// 内置用于快速实现合计
// obj.field - 当前列字段值
// obj.totalValue - 当前列合计值
// obj.totalData - 所有列合计数据
// 用于自定义列计算
// obj.columnValues - 当前列值的数组
// obj.columnData - 所有列值的数据
// obj.tableData - 当前页所有数据
// 合计
if(obj.field === 'count'){
return obj.columnValues.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
});
}
// 平均
if(obj.field === 'score'){
return obj.totalValue / obj.columnValues.length + '分'
}
});
```

View File

@ -1436,9 +1436,17 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var tds = [];
that.eachCols(function(i3, item3){
var field = item3.field || i3;
var totalRowOpts = {
field: field,
totalData: totalNums,
totalValue: totalNums[field],
columnData: columnValues,
columnValues: columnValues[field],
tableData: data
}
// 合计数据的特定字段
var TOTAL_NUMS = (typeof totalRowData === 'function' && item3.totalRow)
? totalRowData(field, columnValues[field], data)
? totalRowData(totalRowOpts)
: totalRowData && totalRowData[item3.field];
// 合计数据的小数点位数处理
@ -1458,12 +1466,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
tplData[field] = thisTotalNum;
// 获取自动计算的合并内容
var getContent = item3.totalRow ? (parseTempData.call(that, {
item3: item3,
content: thisTotalNum,
tplData: tplData
}) || text) : text;
var getContent = typeof item3.totalRow === 'function'
? item3.totalRow(totalRowOpts)
: item3.totalRow
? (parseTempData.call(that, {
item3: item3,
content: thisTotalNum,
tplData: tplData
}) || text)
: text;
return getContent;
}();
@ -1517,10 +1528,21 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.layTotal.find('tbody').html('<tr>' + tds.join('') + (patchElem.length ? patchElem.get(0).outerHTML : '') + '</tr>');
};
/**
* @typedef totalRowCallbackParams
* @prop {string} field - 当前列字段值
* @prop {number} totalValue - 当前列合计值
* @prop {Object.<string, number>} totalData - 所有列合计数据
* @prop {Array<string | number>} columnValues - 当前列值的数组
* @prop {Object.<string, Array<string | number>>} columnData - 所有列值的数据
* @prop {Array<object>} tableData - 当前页所有数据
*
*/
/**
* 更新合计行数据未传入合计行数据时将使用内置的自动合计
* @param {string} id 表格 ID
* @param {Object.<string, any> | ((field: string, columnValues: Array<any>, tableData: Array<any>) => string | number)} [totalRowData] - 合计行数据若为函数则为计算每一列合计数据的回调
* @param {Object.<string, any> | ((params: totalRowCallbackParams) => string | number)} [totalRowData] - 合计行数据若为函数则为计算每一列合计数据的回调
*/
table.updateTotalRow = function(id, totalRowData){
var that = getThisTable(id);