午夜福利国产在线观看1,五月天欧美精品在线观看

文檔

討論問題帖子： https://fly.layui.com/jie/66450/
一、概述

edit新增的功能是基于lay-event事件進(jìn)行的aop增強(qiáng)實現(xiàn)的，因此在cols配置的屬性中務(wù)必開啟lay-event點擊事件！由于在table.on('tool(yyy)',function (obj) {})方法基礎(chǔ)上進(jìn)行的aop代理而產(chǎn)生的AopEvent代理對象，因此此代理對象的on方法與table的on('tool(yyy)')方法使用方式是一致的，即table的on('tool(yyy)')方法里的回調(diào)函數(shù)可以作為代理對象的on方法的回調(diào)函數(shù)。因此使用者可以按照之前的代碼格式編寫代碼，而不用擔(dān)心代理對象內(nèi)部發(fā)生了何種復(fù)雜的代碼實現(xiàn)，以及l(fā)ayui table源碼發(fā)生變化也不會導(dǎo)致組件的不可用或者需要對組件進(jìn)行相應(yīng)的修改（零入侵table源碼）。----拿來即用

新增的功能
1、下拉框（單或多選）
2、日期選擇框
3、下拉框聯(lián)動（下拉框聯(lián)動下拉框、日期框聯(lián)動下拉框）
4、輸入框（該輸入框與官網(wǎng)的不一致，失去焦點事件會對table.on('tool(lay-filter)',function(obj){})進(jìn)行回調(diào)）
5、數(shù)據(jù)校驗

lay-event開啟例子

table.render({cols:[[{field:'name',title: '姓名',width:120,event:'name'}]]}); //開啟event功能

二、問題

用官方模板實現(xiàn)的表格下拉框存在以下問題：
1、下拉框數(shù)據(jù)過多時，表格產(chǎn)生很長的滾動條
2、無關(guān)鍵詞模糊搜索出相應(yīng)的下拉數(shù)據(jù)
3、數(shù)據(jù)過多時，下拉框被表頭所遮住，修改表格的樣式會出現(xiàn)其他的bug
4、無法實現(xiàn)復(fù)雜操作（下拉框單多選和級聯(lián)可配置等）
5、有部分表格下拉框組件還是比較優(yōu)秀的，但是也還是無法解決以上所有的問題，或者解決了80%，但入侵layui table的源碼過重，不利于使用與維護(hù)
6、無法與layui table的事件進(jìn)行整合

用data-edit(cols中edit屬性)實現(xiàn)的日期選擇框存在以下問題：
1、只有輸入框值改變時才觸發(fā)的table.on('edit(lay-filter)',function(obj){})方法的回調(diào)，因此用戶體驗較差

三、解決方案

思路：單元格點擊事件(可以是自定義事件) => 生成自定義的輸入框(input) => 在當(dāng)前窗口body元素生成最后一個div子元素(下拉框) => 給input注冊值改變事件用于關(guān)鍵詞搜索
=> 給div注冊點擊事件用于數(shù)據(jù)選擇及相對應(yīng)的事件回調(diào)

方案一
table表格渲染完成后，在done方法中自定義單元格事件。此方案能完成80%的功能，但因無法與layui table的事件進(jìn)行整合，使用起來較為復(fù)雜。

方案二
在table.on('tool(yyy)',function (obj) {})方法回調(diào)的事件中，根據(jù)當(dāng)前單元格(this)進(jìn)行動態(tài)生成下拉框或者日期選擇框。此方案已解決了所有的問題，但對使用者對layui table組件的熟練度有一定要求(從部分后端猿咨詢中可知)。

方案三
在方案二的基礎(chǔ)上對table.on('tool(yyy)',function (obj) {})中的方法進(jìn)行aop代理增強(qiáng)，實現(xiàn)0入侵layui table源碼無縫整合。此方案為最終的方案。

三、文檔

四、最簡潔的栗子

引入組件

    layui.config({
        base: 'module/'
    }).extend({
        tableEdit:'js/tableEdit'
    }).use(['table','tableEdit'], function () {
        var table = layui.table,tableEdit = layui.tableEdit;
    });

完整栗子

<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script>
   layui.config({
        base: 'module/'
    }).extend({
        tableEdit:'js/tableEdit'
    }).use(['table','tableEdit','layer'], function () {
        var table = layui.table,tableEdit = layui.tableEdit,$ = 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:'module/json/data.json'
            ,height: 'full-90'
            ,page: true
            ,cols: [[
                {type:'checkbox'}
                //type的類型值：select（下拉框）date（時間選擇框）input(輸入框)
                //input為輸入框，失去焦點會觸發(fā)回調(diào)，aopTable.on()中觸發(fā)的回調(diào)
                ,{field:'name',title: '輸入框',width:120,event:'name',config:{type:'input'}}
                //data 為下拉框數(shù)據(jù)
                ,{field:'danxuan',align:'center', title: '單選',width:120,event:'danxuan',config:{type:'select',data:params},templet:function (d) {
                    return d.danxuan && d.danxuan.value ? d.danxuan.value : '';
                }}
                //  enabled => true：多選，false：單選。默認(rèn)為false
                ,{field:'duoxuan', title: '多選',width:120,event:'duoxuan',config:{type:'select',data:params,enabled:true},templet:function (d) {
                    var str = [];
                    d.duoxuan.forEach(function (e) {
                        str.push(e.value)
                    });
                    return str.join(' || ');
                }}
                //dateType表示日期時間格式，date為“yyyy-MM-dd”，datetime為“yyyy-MM-dd HH:ss:mm”
                ,{field:'birthday', title: '生日',width:120,event:'birthday',config:{type:'date',dateType:'date'}}
                //cascadeSelectField字段為級聯(lián)開關(guān)字段(存在該字段則級聯(lián)，否則不級聯(lián))
                ,{field:'xlkjl', title: '下拉框聯(lián)動(上級)',width:150,event:'xlkjl',config:{type:'select',data:params,cascadeSelectField:'xialaxiaji'},templet:function (d) {
                    return d.xlkjl && d.xlkjl.value ? d.xlkjl.value : '';
                }}
                ,{field:'xialaxiaji', title: '下拉框聯(lián)動(下級)',width:150,event:'xiaji',config:{type:'select',data:params},templet:function (d) {
                    return d.xialaxiaji && d.xialaxiaji.value ? d.xialaxiaji.value : '';
                }}
                ,{field:'rqjl', title: '日期聯(lián)動(上級)',width:150,event:'rqjl',config:{type:'date',dateType:'date',cascadeSelectField:'rqxiaji'}}
                ,{field:'rqxiaji', title: '日期框聯(lián)動(下級)',width:150,event:'rqxiaji',config:{type:'select',data:params},templet:function (d) {
                    return d.rqxiaji && d.rqxiaji.value ? d.rqxiaji.value : '';
                }}
            ]]
        }).config.cols;

        /**
         * 參數(shù)cols是table.render({})中的cols屬性值
         * aop代理是基于event點擊事件進(jìn)行操作的，因此cols中務(wù)必開啟event點擊事件！
         **/
        var aopTable = tableEdit.aopObj(cols); //獲取一個aop對象
        /**
         * 注意：
         * 1、 aopTable.on('tool(xxx)',function (obj) {})
         * 2、 table.on('tool(yyy)',function (obj) {})
         * 如果1中的xxx與2中的yyy字符串相同時，不能同時用，用了會造成后調(diào)用者覆蓋前調(diào)用者。
         * 應(yīng)該直接用1來代替2，因為1中包含了2中的事件。
         * 如果不相同，則可以同時使用。
         **/
        aopTable.on('tool(tableEvent)',function (obj) {
            var field = obj.field; //單元格字段
            var value = obj.value; //修改后的值
            var data = obj.data; //當(dāng)前行舊數(shù)據(jù)
            var event = obj.event; //當(dāng)前單元格事件屬性值
            var update = {};
            update[field] = value;
            //把value更新到行中
            obj.update(update);
            /**
             *說白了，此obj與table.on('tool(tableEvent)',function (obj) {})
             *中的obj對象是同一個，所以可以如此操作。
             *
             * */
        });


        /**
         * 級聯(lián)下拉框 => 點擊事件生成下拉框之前的回調(diào)函數(shù)
         * 主要用于 => 動態(tài)獲取單元格下拉數(shù)據(jù)
         * tableEvent => table的lay-filter屬性值
         * 如示例代碼所示
         */
        tableEdit.on('clickBefore(tableEvent)',function (obj) {
            var cascadeSelectData = obj.data; //級聯(lián)數(shù)據(jù)
            var cascadeSelectField = obj.field; //級聯(lián)字段
            if(Array.isArray(cascadeSelectData)){
                cascadeSelectData = cascadeSelectData[0];
            }
            var reslut = null;
            //下拉數(shù)據(jù) 只可ajax同步請求后臺
            if(cascadeSelectField === 'rqjl'){ //日期級聯(lián)下拉框
                if(cascadeSelectData === '2020-05-11'){
                    reslut = {
                        data:[{name:1,value:'語文'},{name:2,value:'數(shù)學(xué)'},{name:3,value:'英語'},{name:4,value:'物理'},{name:5,value:'化學(xué)'}],
                        enabled:false //單選 true為多選
                    };
                }else {
                    reslut = {
                        data:[{name:6,value:'政治'},{name:7,value:'地理'},{name:8,value:'歷史'},{name:9,value:'生物'},{name:10,value:'音樂'}],
                        enabled:false //單選 true為多選
                    };
                }
            }else {
                if(cascadeSelectData.name+'' === '1'){
                    reslut = {
                        data:[{name:11,value:'貴州'},{name:12,value:'云南'},{name:13,value:'四川'},{name:14,value:'湖南'}],
                        enabled:false //單選 true為多選
                    };
                }else {
                    reslut = {
                        data:[{name:15,value:'荊州'},{name:16,value:'揚州'},{name:17,value:'杭州'},{name:18,value:'蘇州'}],
                        enabled:false //單選 true為多選
                    };
                }
            }
            return reslut;
        });
    });
</script>