官方内容

//工具条事件
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') {
         //写逻辑
            }
        });
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐