1.场景:
今天发现一个离职同事留下的bug,table的删除逻辑有问题。仔细一看,同事是通过获取table的行data的name数据的来配合删除的。但由于他在table内实现的input是动态变化的且没有实时修改表格的data,在此记录一下修改方案。
2.code:
<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'});});});});