1.数据表格初始化
table.render({
elem: '#scheduleList'
,height: '280'
,cols: [[
{field: 'termNo' , align: 'center' , title: t_period },
{field: 'pmtDate' , align: 'center' , title: t_dueDate , templet : "<div>{{layui.util.toDateString(d.pmtDate, 'yyyy-MM-dd')}}</div>"},
{field: 'totalAmt' , align: 'center' , title: '<span class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+t_payable+'</span>' , edit:'text'},
{field: 'remainingPrincipal' , align: 'center' , title: t_balance}
]]
,data:data
,limit:Number.MAX_VALUE
});
2.单元格编辑事件 edit
table.on('edit(scheduleList)', function (obj) { //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
var tr = obj.data; //行数据
var coll = obj.value; //单元格编辑之后的值
var oldtext = $(obj.tr).find("td[data-field='"+obj.field+"'] div").text(); //单元格编辑之前的值
if(!regNumber.test(coll)){
//数据格式不合规
return false;
}
//计算差额
var modify = oldtext - coll;
tr.remainingPrincipal = tr.remainingPrincipal + modify ; //修改联动列
obj.update(tr); //重新载入内容
});
3.实现效果