layui表格绑定单元格内tool的坑

一. 已实现功能的代码：

1. 表格

<table id="table_editArea" lay-filter="editAreas"></table>

2. 单元格内tool

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

3. 事件监听绑定

 layui.use(['form', 'layer', 'upload','table'], function () {
    
    
        $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var table=layui.table;
        //展示已知数据
        table.render({
    
    
            elem: '#table_editArea'
            ,url: null //数据接口
            ,cols: [[ //标题栏
                {
    
    field: 'textUnit', title: '可编辑的块'}
                ,{
    
    field: 'leftMargin', title: '距标签左边距离(mm)',edit: 'text'}
                ,{
    
    field: 'topMargin', title: '距标签上边距离(mm)',edit: 'text'}
                ,{
    
    field: 'rightMargin', title: '距标签右边距离(mm)',edit: 'text'}
                ,{
    
    field: 'bottomMargin', title: '距标签下边距离(mm)',edit: 'text'}
                ,{
    
    fixed: 'right', title: '操作',align:'center' ,width:60,toolbar: '#barDemo'}

            ]]
            ,data: [{
    
    
                "textUnit": "Text1"
                ,"leftMargin": "1"
                ,"topMargin": "1"
                ,"rightMargin": "1"
                ,"bottomMargin": "1"
            }]
            //,skin: 'line' //表格风格
           // ,even: true
            //,page: true //是否显示分页
            //,limits: [5, 7, 10]
            //,limit: 5 //每页默认显示的数量
        });
        //删除Text工具栏事件
        table.on('tool(editAreas)',function(obj){
    
    
            console.log(obj);
            var oldData=table.cache["table_editArea"];
            switch(obj.event){
    
    
                case "deleteThisItem":
                    alert(1111);
                    break;
            }
        });

二. 掉坑描述：

**on（）中的第一个参数**

tool  

			**不是toolbar！！！**，写toolbar监听不到的，官网有的地方用toolbar，好像是头工具栏的，搞不清楚就晕。。。

我开始就用的toolbar去监听单元格内的按钮点击事件了，怎么都找不到原因，唉，大好的时间都浪费了。。。
**on（）中的第一个参数后面带个括号的

（editAreas）

				**不是table的id！！！**，写table_editArea监听不到，

官网的描述还是比较确切的，但是如果在简单表格基础上进行添加，很容易就用了

的id了，因为官网给的示例是没有lay-filter的

三. 问题解决：

还是得多花些时间仔细比较描述的不同的。

table.on('tool(editAreas)',function(obj){
    
    

tool就是tool，没得商量，也没有地方定义过，死记就好了，单元格内的工具条按钮用tool，表格头部的工具条用toolbar