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){ table.updateTotalRow('test', function(obj){
if(field === 'score') { // 内置用于快速实现合计
return columnValues.reduce(function(accumulator, currentValue){ // 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; 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 = []; var tds = [];
that.eachCols(function(i3, item3){ that.eachCols(function(i3, item3){
var field = item3.field || i3; 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) var TOTAL_NUMS = (typeof totalRowData === 'function' && item3.totalRow)
? totalRowData(field, columnValues[field], data) ? totalRowData(totalRowOpts)
: totalRowData && totalRowData[item3.field]; : totalRowData && totalRowData[item3.field];
// 合计数据的小数点位数处理 // 合计数据的小数点位数处理
@ -1458,12 +1466,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
tplData[field] = thisTotalNum; tplData[field] = thisTotalNum;
// 获取自动计算的合并内容 // 获取自动计算的合并内容
var getContent = item3.totalRow ? (parseTempData.call(that, { var getContent = typeof item3.totalRow === 'function'
item3: item3, ? item3.totalRow(totalRowOpts)
content: thisTotalNum, : item3.totalRow
tplData: tplData ? (parseTempData.call(that, {
}) || text) : text; item3: item3,
content: thisTotalNum,
tplData: tplData
}) || text)
: text;
return getContent; 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>'); 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 {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){ table.updateTotalRow = function(id, totalRowData){
var that = getThisTable(id); var that = getThisTable(id);