【layui】table数据表格使用经验

（1）操作栏按钮事件监听

table.on('tool(zongdi_extra_table)', function (obj) {
    if (obj.event == 'del') {//绑定的事件
        var tableData = table.cache['zongdi_extra_table'];
        obj.del();//删除一行表格元素样式
        tableData.splice(index, 1);//删除表格数据缓存
    }
}

（2）单元格事件监听

事件绑定，直接在数据表格渲染中添加

function Loaddata_zongdi_extra(parseData) {
            table.render({
                elem: '#zongdi_extra_table',
                title: '明细',
                cols: [[
                    {
                        title: '土地用途<span class="titletips">*</span>',
                        field: 'aa',
                        align: 'center',
                        event: 'seeyongtu',//绑定的事件名称
                        style: 'cursor: pointer',
                        // edit: 'text',
                        width: 280,
                        // templet: '',
                        // toolbar: '#selectyongtubtn'
                    }, {
                        title: '面积（㎡）<span class="titletips">*</span>',
                        field: 'bb',
                        align: 'center',
                        edit: 'text',
                        width: 140,
                    }, {
                        title: '操作',
                        align: 'center',
                        width: 80,
                        toolbar: '#mingxi_lineBar'
                    }
                ]],
                data: parseData,
            });
        }

监听方式

table.on('tool(zongdi_extra_table)', function (obj) {
    if (obj.event == 'seeyongtu') {
        //代码逻辑
    }
}

（3）单元格添加动态title

html页面添加脚本

<script type="text/html" id="titleaa_hb">
    <div class="cell"><span title="{{d.aa}}">{{d.aa==undefined|d.aa==null?"":d.aa}</span</div>
</script>

在渲染数据表格中添加templet进行绑定

{
    title: '项目名称',
    field: 'aa',
    align: 'left',
    width: 375,
    templet: '#titleaa_hb',//绑定模板
}

（4）表头标识，在表头字段添加提示

直接在渲染内的title属性添加要在表头字段的内容，可以在js对应的html页面的css样式代码文件内写好，然后使用class

{
    title: '出让面积（ha）<span class="titletips">*</span>',
    field: 'bb',
    align: 'center',
    width: 145,
    edit: 'text'
}

.titletips {
    color: red;
    font-size: 20px;
}