layui table表格可搜索下拉框

 

layuiTableColumnEdit

　　在layui table的基礎上對表格列進行擴展：點擊單元格顯示可搜索下拉列表及日期時間選擇器。

　　碼雲地址:https://gitee.com/yangqianlong98/layuiTableColumnEdit

一、介紹

　　此項目是為了解決layui table表格單元格（column）點擊事件中無下拉列表（select）及日期時間選擇器功能的問題。
  a.可異步ajax請求后台數據。
  b.可直接以數組形式傳參
  c.可輸入關鍵字搜索下拉框數據
  d.可加入日期時間選擇器

二、使用說明

使用方法

　　

<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>

　　

 

 

 

效果圖