企业网站的概念_web前端开发是网页设计吗_营销渠道_快速排名网站

第一种、利用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">&#xe654;</i>提交</button></div>
</div>

// ======默认table======
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
});
// ======监听 添加SKU 按钮======
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 删除 按钮======
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>

// ======默认table======
let items= [{ id: 1,qty: 10,sku: "H-B26-004" },{ id: 2,qty: 20,sku: "dddd" }
],jsondata=[];
// 添加isEditable:false属性使得默认数据不可编辑
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
});
// ======监听输入框变化来修改table的data======
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();
}
// ======监听 添加SKU 按钮======
var $ = layui.$, active = {addSku:function(){// 添加isEditable:true属性，表示数据可修改编辑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 删除 按钮======
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){// 筛选出isEditable为true的条目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});}}}); 
});