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){
|
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 + '分'
|
||||||
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue