mirror of https://github.com/layui/layui
feat(table): 新增 `table.updateTotalRow`
parent
95dcb17ebc
commit
bc61f9ff08
|
@ -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>
|
||||
|
|
|
@ -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…
Reference in New Issue