css代码:
<table class="layui-hide" id="demo" lay-filter="demo"></table>
js代码:
首先要对表格渲染下
var addata = [{//可以赋值
"LocationNumber": ""
, "InventoryQuantity": ""
}]
layui.use('table', function () {
var table = layui.table;
//展示已知数据
tables = table.render({
elem: '#demo'
,width:500
, cols: [[ //标题栏
{ type: 'checkbox', fixed: 'left', hide: true }
, { fixed: 'left', toolbar: '#barDemoKCCF', title: '操作', width: 180, align: 'center' }
, { field: 'LocationNumber', title: '仓位编码', width: 158, templet: '#checkboxTpl' }
, { field: 'InventoryQuantity', title: '拆分数量', edit: 'text', width: 158 }
]]
//这里就是一开始渲染就添加一个空的一行数据,或者添加一下数据也可以
, data: addata
, even: true
});
//监听添加一行和删除一行操作
table.on('tool(demo)', function (obj) {
//var data = obj.data;
if (obj.event === 'edit') {
var Data = table.cache["demo"];
var datas = {
"left":""
,"id": ""
,"username": ""
}
Data.push(datas);
tables.reload({
data: Data
});
} else if (obj.event === 'del') {
var Data = table.cache["demo"];
if (obj.tr.data('index') != 0) {
Data.splice(obj.tr.data('index'), 1)//根据索引删除当前行
tables.reload({
data: Data
});
}
}
});
//这是监听可编辑的
table.on('edit(demo)', function (obj) {
var Data = table.cache["demo"];
// Data [0].emails = Data [0].email * Data [0].username;//测试计算可行
tables.reload({
data: Data
});
});
});