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');
|
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>
|
<h3 id="table.updateRow" lay-pid="api" class="ws-anchor ws-bold">更新指定行数据 <sup>2.9.4+</sup></h3>
|
||||||
|
|
||||||
`table.updateRow(id, opts);`
|
`table.updateRow(id, opts);`
|
||||||
|
@ -336,7 +368,7 @@ table.render({
|
||||||
// 其他属性 …
|
// 其他属性 …
|
||||||
});
|
});
|
||||||
|
|
||||||
// 更新单行
|
// 更新指定行数据
|
||||||
table.updateRow('test', {
|
table.updateRow('test', {
|
||||||
index: 0,
|
index: 0,
|
||||||
row: {
|
row: {
|
||||||
|
@ -344,32 +376,6 @@ table.updateRow('test', {
|
||||||
username: 'name'
|
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>
|
<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 that = this;
|
||||||
var options = that.config;
|
var options = that.config;
|
||||||
var totalNums = {};
|
var totalNums = {};
|
||||||
|
var columnValues = {};
|
||||||
|
|
||||||
if(!options.totalRow) return;
|
if(!options.totalRow) return;
|
||||||
|
|
||||||
|
@ -1423,6 +1424,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||||
|
|
||||||
if(item3.totalRow){
|
if(item3.totalRow){
|
||||||
totalNums[field] = (totalNums[field] || 0) + (parseFloat(content) || 0);
|
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 = [];
|
var tds = [];
|
||||||
that.eachCols(function(i3, item3){
|
that.eachCols(function(i3, item3){
|
||||||
var field = item3.field || i3;
|
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 decimals = 'totalRowDecimals' in item3 ? item3.totalRowDecimals : 2;
|
||||||
var thisTotalNum = totalNums[field]
|
var thisTotalNum = totalNums[field]
|
||||||
? parseFloat(totalNums[field] || 0).toFixed(decimals)
|
? parseFloat(totalNums[field] || 0).toFixed(decimals)
|
||||||
: '';
|
: '';
|
||||||
|
|
||||||
// td 显示内容
|
// td 显示内容
|
||||||
var content = function(){
|
// 如果直接传入了合计行数据,则不输出自动计算的结果
|
||||||
|
var content = TOTAL_NUMS ? TOTAL_NUMS : function(){
|
||||||
var text = item3.totalRowText || '';
|
var text = item3.totalRowText || '';
|
||||||
var tplData = {
|
var tplData = {
|
||||||
LAY_COL: item3
|
LAY_COL: item3
|
||||||
|
@ -1458,8 +1464,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||||
tplData: tplData
|
tplData: tplData
|
||||||
}) || text) : text;
|
}) || text) : text;
|
||||||
|
|
||||||
// 如果直接传入了合计行数据,则不输出自动计算的结果
|
return getContent;
|
||||||
return TOTAL_NUMS || 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>');
|
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){
|
Class.prototype.getColElem = function(parent, key){
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
Loading…
Reference in New Issue