关于layui:layui-如何在表格中使用layui的表单组件修改数据

47次阅读

共计 6268 个字符，预计需要花费 16 分钟才能阅读完成。

前言：
在 layui 开发中 在表格中的每一行记录单元格里展现下拉框和单选框，间接从表格上对数据进行更新。省的再弹窗来对数据进行批改，那么如何实现呢？？

首先确定表格的 dom 构造：

<div class="tableTab_box" style="padding: 0px 10px">
  <div class="layui-form">
    <table id="tList" lay-even lay-skin="nob" class="layui-table"></table>
  </div>
    </div>

而后在表格下方退出 layui 独有的数据行模版块、d就是以后行的数据
咱们须要在每一行的单元格中应用 radio、checkbox（layui 开关）
因为每一行记录的 input 的职责是针对它本人所在行的进行数据操作，所以就须要利用 agentId 为每行记录中的 input 进行惟一标识，从而实现通过监听组件的变动并获取对应的 agentId 进行相应数据的批改。
其次因为多条记录中多个 input 的 name 不能雷同起因，所以须要加上 name="extension-{{d.agentId}}" 让 name 都是惟一的

  <script type="text/html" id="extensionTpl">
    <input type="radio" name="extension-{{d.agentId}}"
    data-agentid="{{d.agentId}}" value="1" title="1 级" lay-filter="extension" {{d.extension == "1" ? 'checked' : ''}}>
     <input type="radio"
     name="extension-{{d.agentId}}" data-agentid="{{d.agentId}}" value="2"
    title="2 级" lay-filter="extension" {{d.extension == "2" ? 'checked' : ''}}>
    <input type="radio" name="extension-{{d.agentId}}"
    data-agentid="{{d.agentId}}" value="3" title="3 级" lay-filter="extension" {{d.extension == "3" ? 'checked' : ''}}>
  </script>

接下来是开关的，逻辑也是根本一样

  <script type="text/html" id="onlineTpl">
    <div>
      <input type="checkbox" name="online-{{d.agentId}}"
      data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线 | 离线"
      lay-filter="online" {{d.online == 1 ? 'checked' : ''}}>
    </div>
  </script>

最终所有的 html 构造如下

<div class="tableTab_box" style="padding: 0px 10px">
  <div class="layui-form">
    <table id="tList" lay-even lay-skin="nob" class="layui-table"></table>
  </div>
  <script type="text/html" id="extensionTpl">
    <input type="radio" name="extension-{{d.agentId}}"
    data-agentid="{{d.agentId}}" value="1" title="1 级" lay-filter="extension" {{d.extension == "1" ? 'checked' : ''}}> <input type="radio"name="extension-{{d.agentId}}"data-agentid="{{d.agentId}}"value="2"title="2 级 "lay-filter="extension"{{d.extension =="2"?'checked':''}}>
    <input type="radio" name="extension-{{d.agentId}}"
    data-agentid="{{d.agentId}}" value="3" title="3 级" lay-filter="extension" {{d.extension == "3" ? 'checked' : ''}}>
  </script>
  <script type="text/html" id="onlineTpl">
    <div>
      <input type="checkbox" name="online-{{d.agentId}}"
      data-agentid="{{d.agentId}}" lay-skin="switch" lay-text="在线 | 离线"
      lay-filter="online" {{d.online == 1 ? 'checked' : ''}}>
    </div>
  </script>
</div>

上面来看 js 逻辑：
首先是定义表格数据的初始化。这里就是惯例的表格数据定义。值得注意的是表格渲染实现 (done) 中对单元格有一个解决，避免渲染后的单元格挡住下拉选项。

         $(".layui-table-body, .layui-table-box, .layui-table-cell").css(
              "overflow",
              "visible"
            );// 避免单元格挡住下拉框
            form.render();
        table.render({
          elem: "#tList",
          url: "getTable/xxx",
          page: true,
          method: "post",
          request: {
            pageName: "page", // 页码的参数名称，默认：page
            limitName: "pageCount", // 每页数据量的参数名，默认：lim
          },
          skin: "line",
          cols: [
            [
              {
                title: "No.",
                type: "numbers",
                fixed: "left",
                width: 50,
              },

              {
                field: "agentId",
                title: "字段 11",
              },
              {
                field: "extension",
                title: "优先级",
                templet: "#extensionTpl",
                align: "center",
              },

              {
                field: "online",
                title: "状态",
                templet: "#onlineTpl",
                align: "center",
              },
              {
                field: "curUser",
                title: "人员",
                align: "center",
                templet: getCurListData,
              },
            ],
          ],
          dataType: "json",
          contentType: "application/json",
          data: {
            page: 0,
            pageCount: 0,
          },
          done: function () {$(".layui-table-body, .layui-table-box, .layui-table-cell").css(
              "overflow",
              "visible"
            );// 避免单元格挡住下拉框
            form.render();},
          parseData: function (res) {
            var count = res.data && res.data.total ? res.data.total : 0;
            var dataList = res.data && res.data.list ? res.data.list : [];
            return {
              code: res.code, // 接口状态
              msg: res.description, // 提醒文本
              count: count, // 总数据长度
              data: dataList, // 列表
            };
          },
        });
      
      // 获取以后记录人员
        getCurListData(function(){ // 避免表格渲染实现后下拉框数据没更新
                    getSeatManageList();
                    form.render("select");
               });

接下来是一开始定义在表格行中的几个控件事件监听：
间接通过监听组件上定义的 lay-filter （extension、online），而后在回调函数中获取到对应定义在元素上的 h5 属性 data 值。留神这个回调参数的obj 和 jq 的 $（this） 有些区别
updateAgent 函数就是依据以后行的 id 和值进行 ajax 申请后端对数据进行更新

   // 监听操作
      form.on("radio(extension)", function (obj) {console.log(this);
        updateAgent({id: $(this).data("agentid"),
          extension: this.value,
        });
      });
      // 监听
      form.on("switch(online)", function (obj) {
        updateAgent({id: $(this).data("agentid"),
          online: obj.elem.checked ? 1 : 0,
        });
      });
      // 监听
      form.on("select(curUser)", function (obj) {
        if (
          obj.elem.value == "" ||
          $(obj.elem).data("value") == obj.elem.value
        ) {// 这里做了一个小优化。当两次操作的值没还是一样的话就不进行申请
          return;
        }
        updateAgent({id: $(obj.elem).data("agentid"),
          curUser: obj.elem.value,
        });
        $(obj.elem).data("value", obj.elem.value);
      });
      // 监听下拉扭转
       form.on("select(agentName)", function (obj) {
         if (
           obj.elem.value == "" ||
           $(obj.elem).data("value") == obj.elem.value
         ) {// 当值没扭转则不申请
           return; 
         }
         updateCallLog([
           {id: $(obj.elem).data("id"),
             agentName: obj.elem.value,
           },
         ]);
         $(obj.elem).data("value", obj.elem.value);
       });
       // 监听表格编辑事件
         table.on("edit(callRecordsList)", function (obj) {
           var value = obj.value; // 失去批改后的值
           updateCallLog([
             {
               id: obj.data.id,
               remarks: value,
             },
           ]);
         });

所有 js 代码

    window.getSeatManageList =   function () {
        tableRender({
          elem: "#seatList",
          url: "getTable/xxx",
          page: true,
          method: "post",
          request: {
            pageName: "page", // 页码的参数名称，默认：page
            limitName: "pageCount", // 每页数据量的参数名，默认：lim
          },
          skin: "line",
          cols: [
            [
              {
                title: "No.",
                type: "numbers",
                fixed: "left",
                width: 50,
              },

              {
                field: "agentId",
                title: "字段 11",
              },
              {
                field: "extension",
                title: "优先级",
                templet: "#extensionTpl",
                align: "center",
              },

              {
                field: "online",
                title: "状态",
                templet: "#onlineTpl",
                align: "center",
              },
              {
                field: "curUser",
                title: "以后人员",
                align: "center",
                templet: renderCurSeatListSelect,
              },
            ],
          ],
          dataType: "json",
          contentType: "application/json",
          data: {
            page: 0,
            pageCount: 0,
          },
          done: function () {$(".layui-table-body, .layui-table-box, .layui-table-cell").css(
              "overflow",
              "visible"
            );// 避免单元格挡住下拉框
            form.render();},
          parseData: function (res) {
            var count = res.data && res.data.total ? res.data.total : 0;
            var dataList = res.data && res.data.list ? res.data.list : [];
            return {
              code: res.code, // 接口状态
              msg: res.description, // 提醒文本
              count: count, // 总数据长度
              data: dataList, // 列表
            };
          },
        });
      }
      
      
      
            // 监听操作
      form.on("radio(extension)", function (obj) {console.log(this);
        updateAgent({id: $(this).data("agentid"),
          extension: this.value,
        });
      });
      // 监听
      form.on("switch(online)", function (obj) {
        updateAgent({id: $(this).data("agentid"),
          online: obj.elem.checked ? 1 : 0,
        });
      });
      // 监听
      form.on("select(curUser)", function (obj) {
        if (
          obj.elem.value == "" ||
          $(obj.elem).data("value") == obj.elem.value
        ) {return;}
        updateAgent({id: $(obj.elem).data("agentid"),
          curUser: obj.elem.value,
        });
        $(obj.elem).data("value", obj.elem.value);
      });
      // 监听下拉扭转
       form.on("select(agentName)", function (obj) {
         if (
           obj.elem.value == "" ||
           $(obj.elem).data("value") == obj.elem.value
         ) {// 当值没扭转则不申请
           return; 
         }
         updateCallLog([
           {id: $(obj.elem).data("id"),
             agentName: obj.elem.value,
           },
         ]);
         $(obj.elem).data("value", obj.elem.value);
       });
       // 监听表格编辑事件
         table.on("edit(callRecordsList)", function (obj) {
           var value = obj.value; // 失去批改后的值
           updateCallLog([
             {
               id: obj.data.id,
               remarks: value,
             },
           ]);
         });
         
         
             // 获取以后记录人员
        getCurListData(function(){ // 避免表格渲染实现后下拉框数据没更新
                    getSeatManageList();
                    form.render("select");
               });

正文完
layui
发表至： layui
2021-06-12
 0
关于layui:layui-table-表格动态表头列
关于layui:00038layui-打开新页面并通过url带参数在新页面获取url的参数
关于layui:00026layui-添加多文件并显示在列表中
关于layui:00033layui-自定义-字典模块-及-工具方法