layui 在表格单元格上直接录数据

Posted 2021-09-09 洛阳醉长安行

前言：
在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");
               });