欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > 记录一次有关layui的bug修复,监听table内的input的动态变化并且修改表格

记录一次有关layui的bug修复,监听table内的input的动态变化并且修改表格

2025/2/26 1:37:37 来源:https://blog.csdn.net/U12Euphoria/article/details/139916918  浏览:    关键词:记录一次有关layui的bug修复,监听table内的input的动态变化并且修改表格

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'});});});});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词