mirror of https://github.com/layui/layui
feat(table): col.totalRow 支持函数,改进 updateTotalRow 参数
parent
d361a327ea
commit
1a5258b292
|
@ -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` 用法不同,请勿混淆。*
|
||||
|
||||
|
||||
|
||||
- **采用后端合计**
|
||||
|
||||
|
|
|
@ -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 + '分'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue