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

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'
          });
        });
      });
    });
相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95271 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大1 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师1 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学1 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端