日常表格统计中我们会用到总计的功能,这个功能layui帮我们已经实现了,
但有时候我们也需要在某个业务类型上,实现小计功能:
由于pageHepler的介入,导致我们没办法在数据传到前端的时候进行小计数据的插入,只能通过前端加载完数据后进行渲染,使用到的是table.render 中的done()方法。
具体实现代码:
javascript
table.render({
elem: '#schoolInfo-table',
url: prefix + 'data',
page: true,
cols: cols,
skin: 'line',
toolbar: '#schoolInfo-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
done: function(res,curr,count){
console.log(res.data);
var that = this.elem.next();
var c1 = 0;
var c2 = 0;
res.data.forEach(function(item,index){
//寻找到当前行
var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
console.log(item.teacherWxCode)//获取当前行的某一列的值,这里只是展示作用
console.log(tr);
if((index+1)%2==0){
//要插入的小计数据的行信息
var newhtml = '<tr>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td>小计:</td>' +
'<td></td>' +
'<td style="text-align: center">'+c1+'</td>' +
'<td style="text-align: center">'+c2+'</td>' +
'<td></td>' +
'<td></td>' +
'</tr>';
tr.after(newhtml);
c1 = 0;
c2 = 0;
}else{
c1++;
c2++;
}
})
}
});