layui 插入一列

要在Layui表格中插入一列，可以按照以下步骤进行操作：

1. 在表格的cols属性中添加新列的定义，比如：

cols: [
    {field: 'id', title: 'ID', width: 80},
    {field: 'username', title: '用户名', width: 120},
    {field: 'email', title: '邮箱', width: 150},
    {field: 'sex', title: '性别', width: 80},
    {field: 'city', title: '城市', width: 100},
    {field: 'sign', title: '签名', width: 200},
    {field: 'experience', title: '积分', width: 80},
    {field: 'score', title: '评分', width: 80},
    {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} //已有的操作列
]

2. 在表格的data属性中添加新列的数据，比如：

data: [
    {id: 10000, username: 'user-0', email: 'user-0@qq.com', sex: '女', city: '城市-0', sign: '签名-0', experience: 255, score: 66},
    {id: 10001, username: 'user-1', email: 'user-1@qq.com', sex: '男', city: '城市-1', sign: '签名-1', experience: 884, score: 76},
    {id: 10002, username: 'user-2', email: 'user-2@qq.com', sex: '女', city: '城市-2', sign: '签名-2', experience: 650, score: 90},
    {id: 10003, username: 'user-3', email: 'user-3@qq.com', sex: '女', city: '城市-3', sign: '签名-3', experience: 362, score: 58},
    {id: 10004, username: 'user-4', email: 'user-4@qq.com', sex: '男', city: '城市-4', sign: '签名-4', experience: 416, score: 84},
    {id: 10005, username: 'user-5', email: 'user-5@qq.com', sex: '女', city: '城市-5', sign: '签名-5', experience: 321, score: 67},
    {id: 10006, username: 'user-6', email: 'user-6@qq.com', sex: '女', city: '城市-6', sign: '签名-6', experience: 337, score: 54},
    {id: 10007, username: 'user-7', email: 'user-7@qq.com', sex: '男', city: '城市-7', sign: '签名-7', experience: 374, score: 98},
    {id: 10008, username: 'user-8', email: 'user-8@qq.com', sex: '男', city: '城市-8', sign: '签名-8', experience: 192, score: 32},
    {id: 10009, username: 'user-9', email: 'user-9@qq.com', sex: '女', city: '城市-9', sign: '签名-9', experience: 735, score: 74}
]

3. 在表格的templet属性中添加新列的模板，比如：

templet: function(d){
    return '<span>'+ d.newColumn +'</span>';
}

其中d表示当前行的数据对象，newColumn为新添加的列名。

4. 在表格的initComplete回调函数中为新列添加事件，比如：

initComplete: function(){
    //监听单元格事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            //编辑
            editData(data);
        } else if(obj.event === 'delete'){
            //删除
            deleteData(data);
        }
    });
}

其中test为表格的lay-filter属性值，edit和delete为新列的事件名称。

5. 最后，通过表格重载方法实现新列的显示，比如：

table.reload('test', {
    cols: [
        {field: 'id', title: 'ID', width: 80},
        {field: 'username', title: '用户名', width: 120},
        {field: 'email', title: '邮箱', width: 150},
        {field: 'sex', title: '性别', width: 80},
        {field: 'city', title: '城市', width: 100},
        {field: 'sign', title: '签名', width: 200},
        {field: 'experience', title: '积分', width: 80},
        {field: 'score', title: '评分', width: 80},
        {field: 'newColumn', title: '新列', width: 100}, //新添加的列
        {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ],
    data: [
        {id: 10000, username: 'user-0', email: 'user-0@qq.com', sex: '女', city: '城市-0', sign: '签名-0', experience: 255, score: 66, newColumn: '新值1'},
        {id: 10001, username: 'user-1', email: 'user-1@qq.com', sex: '男', city: '城市-1', sign: '签名-1', experience: 884, score: 76, newColumn: '新值2'},
        //...
    ]
});

注意，表格重载方法中的test为表格的lay-filter属性值。