table控件增加小計和合計功能

分享 未结
3 455
老司机309
悬赏:20飞吻
1、不修改table.js源碼
2、客戶端統計本頁數據,同時統計服務端輸出的全部數據。

 done: function (res) {
// 当前表格对象
var tab = this;
var tbody = tab.elem.next().find("tbody");
var tfoot = function () {
var tfoot = tbody.next();
if (tfoot.length === 0) {
tfoot = $("<tfoot>");
tbody.after(tfoot);
}
tfoot.empty();
return tfoot;
}();

// 本页小计
!function () {
var subdata = {};
var subtotal = tab.cols[0].filter(function (item, index) {
if (item.subtotal) subdata[index] = true;
return item.subtotal;
}).length > 0;
if (!subtotal) return;
var data = new Array();
layui.each(tbody.find("tr"), function (trIndex, item) {
layui.each($(item).find("td"), function (tdIndex, td) {
if (!subdata[tdIndex]) return;
var value = td.innerText;
if (!data[tdIndex]) {
data[tdIndex] = value;
} else {
var match = value.match(/[0-9\.\-\+]+/g);
if (match !== null) {
var index = -1;
data[tdIndex] = data[tdIndex].replace(/([\d\.\+\-]+)/g, function (input) {
index++;
if (match.length < index) return input;
var result = Number(input) + Number(match[index]);
if (/\.\d{5,}/.test(result)) result = result.toFixed(4);
return result;
});
}
}
});
});
var tr = $("<tr class='layui-table-subtotal'></tr>");
layui.each(tab.cols[0], function (index, item) {
if (index === 0 && !subdata[0]) {
tr.append($("<td>小计</td>"));
} else {
if (item.subtotal) {
console.log();
tr.append($("<td>" + data[index] + "</td>"));
} else {
tr.append($("<td></td>"));
}
}
});
tfoot.append(tr);
}();

// 合计
!function () {
var totaldata = {};
var total = tab.cols[0].filter(function (item, index) {
if (item.total) totaldata[index] = item.total;
return item.total;
}).length > 0;

// 此處服務端輸出的統計字段名為 total,可根據實際情況修改
if (!res.total || !total) return;

var tr = $("<tr class='layui-table-total'></tr>");
layui.each(tab.cols[0], function (index, item) {
if (index === 0 && !totaldata[0]) {
tr.append($("<td>合计</td>"));
} else {
if (item.total) {
var td = $("<td></td>");
var templet = item.total;
if (/<div>/.test(templet)) {
td.html(laytpl(templet).render(res.total));
} else if (res.total[templet]) {
td.html(res.total[templet]);
}
tr.append(td);
} else {
tr.append($("<td></td>"));
}
}
});
tfoot.append(tr);
}();
}
調用方法:
table的cols設定中增加了兩個屬性
subtotal: true, // bool 類型,設定該列是否支持當頁統計
total:"<div>{{ htmlFunction.money(d.Money) }}</div>" // string 類型,可以是模板語法,也可以是服務端返回的總計字段名

PS:本頁數據統計並不是來源於table中的data數據,而是通過讀取渲染之後的tbody,通過正則表達式把裡面的數字部分取出來然後再累加。 所以可以支持 模板輸出的內容。
比如說 cols :[[ { title:"金額",templet:"<div>{{ d.Money }} / {{ d.LockMoney }}</div>" , subtotal: true } ]],本頁統計之後會原樣輸出 成為 d.Money / d.LockMoney。

效果圖如下:
回帖
  • 斯考特
    2018-12-20
    这个新版不是已经有了吗
    0 回复
  • 新版本是基于数据字段的统计,如果是自定义的字段内容则无法统计。
    比如说我有一列的内容是 templet:"<div>收入:{{ d.Income }}元/支出:{{d.Out}}元</div>",
    使用这个扩展方法你可以统计出来,并且按照列的格式进行排版。
    0 回复
  • 一码春秋
    2018-12-21
    @老司机309 不错不错,我这边也在做统计。。。自己硬生生each到字段加的统计。。。。[泪]
    0 回复