<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>

<script>

    layui.config({

        base: 'module/'

    }).extend({

        layuiTableColumnEdit:'js/layuiTableColumnEdit'

    }).use(['table','layuiTableColumnEdit','layer'], function () {

        var table = layui.table,layuiTableColumnEdit = layui.layuiTableColumnEdit,$ = layui.$;

        var params = [

            {name:1,value:"张三1"},

            {name:2,value:"张三2"},

            {name:3,value:"张三3"},

            {name:4,value:"张三4"},

            {name:5,value:"张三5"}

        ];

        var cols = table.render({

            elem: '#tableId'

            ,id:'id'

            ,url:'data.json'

            ,height: 'full-90'

            ,page: true

            ,cols: [[

                {type:'checkbox'}

                ,{field:'name',title: '姓名',width:120,event:'name'}

                //select（下拉框）date（时间选择框）

                ,{field:'danxuan', title: '单选',width:120,event:'danxuan',select:{data:params}}

                //data 为下拉框数据  enabled => true：多选，false：单选。默认为false

                ,{field:'duoxuan', title: '多选',width:120,event:'duoxuan',select:{data:params,enabled:true}}

                //dateType表示日期时间格式，date为“yyyy-MM-dd”，datetime为“yyyy-MM-dd HH:ss:mm”

                ,{field:'birthday', title: '生日',width:120,event:'birthday',date:{dateType:'date'}}

            ]]

        }).config.cols;

        //参数cols是table.render({})中的cols属性值

        var aopTable = layuiTableColumnEdit.aopObj(cols); //获取一个aop对象

        aopTable.on('tool(tableEvent)',function (obj) {

            var field = $(this).data('field');

            console.log(obj);

            if(field === 'danxuan'){

                obj.update({danxuan:obj.value.value});

            }

            if(field === 'duoxuan'){

                obj.update({duoxuan:obj.value[0].value});

            }

            if(field === 'birthday'){

                obj.update({birthday:obj.value});

            }

        });

        /*

        * 注意：

        *

        * 1、 aopTable.on('tool(xxx)',function (obj) {})

        * 2、 table.on('tool(yyy)',function (obj) {})

        *

        * 如果1中的xxx与2中的yyy字符串相同时，不能同时用，用了会造成后调用者覆盖前调用者。

        * 应该直接用1来代替2，因为1中包含了2中的事件。

        *

        * 如果不相同，则可以同时使用。

        * */

    });

</script>