Layui 表格操作按钮实现编辑、查看、删除功能

<table class='layui-hide' id='projectList'></table>
<script type='text/html' id='barDemo'>
  <div class='layui-clear-space'>
    <a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>
    <a class='layui-btn layui-btn-xs' lay-event='more'>
      更多 
      <i class='layui-icon layui-icon-down'></i>
    </a>
  </div>
</script> 
<p>,{fixed: 'right', title:'操作', toolbar: '#barDemo'}</p>
<p>table.on('tool(projectList)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
layer.open({
title: '编辑 - id:'+ data.id,
type: 1,
area: ['80%','80%'],
content: '<div style="padding: 16px;">自定义表单元素</div>'
});
} else if(obj.event === 'more'){
dropdown.render({
elem: obj.tr[0].cells[obj.tr[0].cells.length - 1].childNodes[0].childNodes[0], // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '查看',
id: 'detail'
},{
title: '删除',
id: 'del'
}],
click: function(menudata){
if(menudata.id === 'detail'){
layer.msg('查看操作，当前行 ID:'+ data.id);
} else if(menudata.id === 'del'){
layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
obj.del(); // 删除对应行（tr）的DOM结构
layer.close(index);
// 向服务端发送删除指令
});
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
}
});</p>