1.场景:
今天发现一个离职同事留下的bug,table的删除逻辑有问题。仔细一看,同事是通过获取table的行data的name数据的来配合删除的。但由于他在table内实现的input是动态变化的且没有实时修改表格的data,在此记录一下修改方案。
2.code:
typescript
<table id="attributeTable" lay-filter="attributeTable">
</table>
-------------------------------------------------------------------------------------
<script type="text/html" id="inputNameTpl">
<div class="layui-input-inline" style="width: 100%;">
<input type="text" name="inputName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input table-input" value="{{d.name || ''}}">
</div>
</script>
<script type="text/html" id="inputValueTpl">
<div class="layui-input-inline" style="width: 100%;">
<input type="text" name="inputValue" placeholder="多属性用英文逗号隔开" autocomplete="off" class="layui-input table-input" value="{{d.nameCode || ''}}">
</div>
</script>
-------------------------------------------------------------------------------------
layui.use(['table', 'form'], function(){
var tableHeight = $(document).height() > 800 ? $(document).height() - 575 : 430 ;
layui.table.render({
elem: '#attributeTable'
,id: 'attributeTable'
,height:tableHeight
,limit:100000
,data:App.addDttributeData
,cols: [[
{checkbox: true}
,{field: 'name', title: '属性名称',align:'center',templet: '#inputNameTpl'}
,{field: 'nameCode', title: '属性值',align:'center',templet: '#inputValueTpl'}
]]
});
// 监听表格单击事件
layui.table.on('row(attributeTable)', function(obj){
// 监听表格内input的修改事件
$('.table-input').on('change', function(){
var value = $(this).val(); // 获取input的值
var field = $(this).attr("name"); // 获取input的name值
// 根据field更新原始数据
if (field == "inputName"){
obj.update({
name: value,
});
} else if (field == "inputValue"){
obj.update({
nameCode: value,
});
}
layui.table.reload("attributeTable", {
scrollPos: 'fixed'
});
});
});
});