layui 數據表格按鈕事件綁定和渲染

先看效果圖

使用兩種渲染方法：

1.toolbar引入模板

頂部的添加和刪除按鈕，右側的三個篩選，打印，導出按鈕

基礎參數屬性：toolbar:'#demo2',

//創建 刪除  添加按鈕模板
<!-- 生成模塊 -->
<script id="demo2" lay-filter="test1">
    <button type="button" class="layui-btn layui-btn-normal" lay-event="add">添加</button>
    <button type="button" class="layui-btn layui-btn-danger" lay-event="delete">刪除</button>
</script>

 

綁定：

//監聽事件
table.on('toolbar(test)', function(obj){
    
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
        
      layer.msg('刪除');
      
    break;
//    case 'update':
//      layer.msg('編輯');
//    break;
  };
});

 

2.templet引入模板

渲染修改按鈕到數據表格

使用屬性：

創建模板：

 

<script id="demo1" lay-filter="test1">
    <button type="button" class="layui-btn layui-btn-warm" lay-event="update">修改</button>
</script>

 

 

 

使用表頭屬性：toolbar: '#demo1'

綁定監聽事件

//監聽工具條
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 === 'add'){ //添加
      
    //do somehing
  } else if(layEvent === 'delete'){ //刪除
    layer.confirm('真的刪除行么', function(index){
      obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
      layer.close(index);
      //向服務端發送刪除指令
    });
  } else if(layEvent === 'update'){ //修改
    //do something
      console.log(data);
      layer.msg('修改');
    //同步更新緩存對應的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
});