
第一种、利用table的【edit: ‘text’】属性添加编辑
<div class="layui-form-item" style="margin-bottom: 5px;">
<label class="layui-form-label">添加SKU</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm" data-type="addSku" style="width: 50px;">
<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
</button>
<table class="layui-hide" id="skuTable" lay-filter="skuTable"></table>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit="" lay-filter="submit">
<i class="layui-icon"></i>提交</button>
</div>
</div>
let jsondata=[{sku: '', qty: ''}];
table.render({
elem: '#skuTable',
data: jsondata,
cols: [[
{field: 'sku', title: 'SKU', edit: 'text',templet:function(d){
return '<input type="text" placeholder="请输入" value="'+d.sku+'" lay-verify="required" class="layui-input" style="height:28px;">'
}},
{field: 'qty', title: '数量', edit: 'number',templet:function(d){
return '<input type="text" placeholder="请输入" value="'+d.qty+'" lay-verify="required" class="layui-input" style="height:28px;">'
}},
{fixed: 'right', title: '操作', width:60, align:'center', templet:function(d){
return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>';
}}
]],
page: false,limit:10000
});
var $ = layui.$, active = {
addSku:function(){
table.reload('skuTable', {
data: table.cache['skuTable'].concat({ sku: '', qty: '' })
});
}
};
$('.layui-input-block .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
table.on('tool(skuTable)', function(obj){
if(obj.event === 'del'){ obj.del(); }
})
form.on('submit(submit)', function(data){
data.field.items = table.cache['skuTable'].map(function(row){
return { sku: row.sku, qty: row.qty };
});
admin.req({
url: layui.setter.baseUrl+'admin/ceshi/add',
data: data.field,
type: 'post',
success: function(res){
if(res.code==1){
layer.msg(res.msg , {icon: 1,shade:0.5,time: 1000} , function(){
layer.close(index);
var recodePage = $(".layui-laypage-skip .layui-input" ).val();
layui.table.reload('ceshi_list',{page:{curr: recodePage}});
});
}else{
layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
}
}
});
});

第二种、在table中利用input的【οnblur=“skuBlur(this)”】属性添加编辑
<div class="layui-form" lay-filter="see_transit" style="padding: 0 10px 0 0;">
<div class="layui-form-item">
<script type="text/html" template>
<input type="hidden" name="id" class="layui-input" value="{{ d.params.id || '' }}" >
</script>
<button type="button" class="layui-btn" data-type="addSku">
<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
</button>
<button type="button" class="layui-btn" style="padding: 0 30px;"
lay-submit="" lay-filter="submit">提交</button>
</div>
<table class="layui-hide" id="skuTable" lay-filter="skuTable"></table>
</div>
let items= [
{ id: 1,qty: 10,sku: "H-B26-004" },
{ id: 2,qty: 20,sku: "dddd" }
],jsondata=[];
jsondata = items.map(function(row){
return { sku: row.sku, qty: row.qty,id:row.id,isEditable:false };
});
table.render({
elem: '#skuTable',
data: jsondata,
cols: [[
{field: 'sku', title: 'SKU',templet:function(d){
return d.isEditable ? '<input type="text" placeholder="请输入" value="'+d.sku+'" lay-verify="required" class="layui-input" onblur="skuBlur(this)" style="height:28px;">':d.sku;
}},
{field: 'qty', title: '数量',templet:function(d){
return d.isEditable ? '<input type="text" placeholder="请输入" value="'+d.qty+'" lay-verify="required" class="layui-input" onblur="qtyBlur(this)" style="height:28px;">':d.qty;
}},
{fixed: 'right', title: '操作', width:60, align:'center', templet:function(d){
return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>';
}}
]],page: false,limit:10000
});
window.skuBlur = function(obj){ initBlur(obj,'sku'); }
window.qtyBlur = function(obj){ initBlur(obj,'qty'); }
function initBlur(obj,name){
let data = table.cache['skuTable'].find(function (item) {
return $(obj).parents('tr').attr('data-index') == item.LAY_TABLE_INDEX;
});
if (data) data[name] = $(obj).val();
}
var $ = layui.$, active = {
addSku:function(){
table.reload('skuTable', {
data: table.cache['skuTable'].concat({ sku: '', qty: '', isEditable: true })
});
}
};
$('.layui-form .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
table.on('tool(skuTable)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
if(data.isEditable){
obj.del();
} else{
layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
admin.req({
url: layui.setter.baseUrl+'admin/ceshi/del',
data: {id:data.id},
type:'get',
success: function(res){
if(res.code==1){
obj.del();
layer.close(index);
}else{
layer.msg(res.msg);
}
}
});
});
}
}
})
form.on('submit(submit)', function(data){
var newSkus = table.cache['skuTable'].filter(function(ns){
return ns.isEditable
})
data.field.item = newSkus.map(function(row){
return { sku: row.sku, qty: row.qty };
});
admin.req({
url: layui.setter.baseUrl+'admin/ceshi/lists_add',
data: data.field,
type: 'post',
success: function(res){
if(res.code==1){
layer.msg(res.msg , {icon: 1,shade:0.5,time: 1000} , function(){
layer.close(index);
});
}else{
layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
}
}
});
});