LayUItable动态表格分栏操作

官方内容

//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});

通过单独定义个js（script）id来实现点击与插入html
lay-event="" 这个值很重要

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm layui-btn-normal " lay-event="edit" style="background: #327DF6;width: 50px">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="return" style="width: 50px">确定</a>
</script>

首先定义表单属性cols

{ toolbar: '#barDemo'}

安装官方文档简单来实现以两个为例子

 table.on('tool(table)', function (obj) {//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data;
            if (obj.event === 'return') {
          //写逻辑
            } else if (obj.event === 'edit') {
         //写逻辑
            }
        });