效果图

表格占位

<div class="layui-col-md10" style="width: calc(83.33333333% - 20px);">
    <table class="layui-table" id="myTable" lay-filter="myTable"></table>
</div>

工具栏占位

<script type="text/html" id="myTableToolbar">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal" lay-event="addRow">新增</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="deleteRow">删除</button>
    </div>
</script>

操作栏占位

<!-- myTable的操作栏-->
<script type="text/html" id="myTableBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="deleteRow">删除</a>
    </div>
</script>

dropdown占位

<!--规格下拉框-->
<script type="text/html" id="specDropdown">
    <button id="specDropdownSelect" class="layui-btn layui-btn-primary dropdpwn-demo">
        <span>{{= d.specificationName || '请选择规格'}}</span>
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
</script>

table渲染和dropdown渲染

• 解决思路：用数组来渲染table，新增或删除行之后，更新数组并重新渲染table。

• css是为了解决dropdown的下拉框嵌入table里

  var saleList = []
  tableIns2 = table.render({
    elem: '#myTable'
    , data: saleList
    , page: true //开启分页
    , cols: [
                [
                    {field: 'number', title: '序号', width: 80, fixed: 'left'},
                    {field: 'specification', title: '规格', width: 230, templet: '#specDropdown'},
                    {field: 'specificationName', title: '规格', hide: true},
                    {field: 'price', title: ' 单价', edit: 'text', width: 130},
                    {field: 'weight', title: '重量', edit: 'text', width: 130},
                    {field: 'amount', title: '金额', edit: 'text', width: 130,},
                    {fixed: 'right', width: '160', title: '操作', toolbar: '#myTableBar'}
                ]
            ], css: [ // 设置单元格样式
                // 取消默认的溢出隐藏，并设置适当高度
                '.layui-table-cell{height: 50px; line-height: 40px;}',
                '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                '.layui-table-cell select{height: 36px; padding: 0 5px;}'
            ].join('')
            , toolbar: '#myTableToolbar'
            , done: function (res, curr, count) {
                var options = this;
                table.getRowData = function (elem) {
                    var index = $(elem).closest('tr').data('index');
                    return table.cache[options.id][index] || {};
                };
                $.ajax({
                    url: "/dataProClass/getParentList?itemType=8&idLength=4",
                    type: "get",
                    dataType: "json",
                    headers: {"Content-Type": "application/json;charset=UTF-8", "authorization": token},
                    success: function (res) {
                        dataSpec = res.data;
                        let data = []
                        for (let i = 0; i < dataSpec.length; i++) {
                            let item = {};
                            item.id = dataSpec[i].id;
                            item.title = dataSpec[i].item_name
                            data.push(item);
                        }
                        dropdown.render({
                            elem: '.dropdpwn-demo',
                            // trigger: 'hover',
                            // 此处的 data 值，可根据 done 返回的 res 遍历来赋值
                            data: data,
                            click: function (obj) {
                                var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                                this.elem.find('span').html(obj.title);
                                // 更新数据中对应的字段
                                data.specification = obj.id;
                                data.specificationName = obj.title;
  
                            }
                        });
                    }
                });
  
            }
  });

表头工具

//表头工具
table.on('toolbar(myTable)', function (obj) {
      switch (obj.event) {
          case 'addRow':
              var oldData = table.cache['myTable'];
              let newData = {number: oldData.length + 1};
              oldData.push(newData)
              table.reload('myTable', {data: oldData});
              console.log(oldData);
              break;
          case 'deleteRow':
              var oldData = table.cache['myTable'];
              let number = obj.data.number;
              oldData = oldData.filter(x => x.number != number);
              table.reload('myTable', {data: oldData});
              break;
      }
});

操作栏事件

table.on('tool(myTable)', function (obj) {
       var data = obj.data;
       switch (obj.event) {
           case 'deleteRow':
               var oldData = table.cache['myTable'];
               let number = obj.data.number;
               oldData = oldData.filter(x => x.number != number);
               for (let i = 0; i < oldData.length; i++) {
                   oldData[i].number = i + 1;
               }
               table.reload('myTable', {data: oldData});
               break;
       }
});

编辑回显

• 这里要注意，data取自obj.data，里面会带有一个$ref属性，不删除直接提交后台会报json的parse错误，所以需要删除。

  let myTableData = data.detailList;
  for (let i = 0; i < myTableData.length; i++) {
    myTableData[i].number = (i + 1);
    delete myTableData[i].$ref;
  }
  table.reload('myTable', {data: myTableData});