LayUi- 動態表格table中下拉框Select的設置和監聽

LayUi中動態表格中可以使用 templet自定義列模板 對單元格添加其他元素 ，添加下拉框相對麻煩些，沒有自帶的。

 

1.添加編輯器 

我們使用綁定模版選擇器的方法：

在table.render()中 指定列（cols）的templet屬性，並添加模板的html代碼，例如：

 

 

 

{ rowspan: 2, title: '新建及改造工作狀態', templet: '#editState' }

    <script type="text/html" id="editState" >
        <select name="editStateS" lay-filter="editStateS" id="editStateS"  data-value = {{d.NewReformStatus}} >  
            <option value="未開工">未開工</option>
            <option value="在建">在建</option>
            <option value="完工">完工</option>
            <option value="已驗收">已驗收</option>
        </select>
    </script>

（使用d.fileName指定字段，用於綁定已有的值； 另外必須設置lay-filter才可以進行監聽）。

添加后樣式不對，需要自己調整一下樣式使得下拉框與單元格cell剛好合適嵌入，並且需要設置超出長寬時也顯示，否則下拉時不會顯示：

        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
        .layui-table-cell {
            overflow: visible !important;
        }

因為設置了全局的.layui-table-cell，會影響到其他table元素，比如表頭的th，我這里表頭原本是自適應寬度、超出隱藏，手動拖動調整寬度的，所以再重設一下表頭超出隱藏：

        .layui-table-view .layui-table th{
            overflow:hidden;
        }

2.監聽下拉框

因為下拉框是屬於form元素，不是屬於table元素，所以監聽方法需要放在layui.use('form'）中，而不是放在layui.use('table'）中

layui.use('form', function () {
            var form = layui.form;
            //監聽下拉框編輯
            form.on('select(editStateS)', function (data) {
                //獲取當前行tr對象
                var elem = data.othis.parents('tr');
                //第一列的值是Guid，取guid來判斷
                var Guid= elem.first().find('td').eq(1).text();
                //選擇的select對象值；
                var selectValue = data.value;
                //這里的JsonDataInti是我自定義的table中數據的緩存數據，下拉數據修改時賦值到這一行緩存數據
                for (i = 0; i < jsonDataInit.length; i++) {
                    if (jsonDataInit[i].Guid== Guid) {
                        jsonDataInit[i].NewReformStatus = selectValue; //更新被修改的行數據
                    }
                }
            })
        });

 

3.已經存在的數據綁定至下拉框：

這里就又需要放在layui.use('table'）中了，在table.render的done函數中來編寫綁定邏輯：

done: function (res, curr, count) {
                                res.data.forEach(function (item, index) {//根據已有的值回填下拉框
                                layui.each($("select[name='editStateS']", ""), function (index, item) {
                                    var elem = $(item);
                                    elem.next().children().children()[0].defaultValue = elem.data('value');
                                    //elem.val(elem.data('value'));
                                });
                                table.render('select');
                            }

網上看了一些做法是使用elem.val(elem.data('value')); 來進行賦值，但是試了發現並不行，於是查看了一下生成的html代碼：

 

 

 不知為何生成了兩個，，一個select標簽、一個input標簽，頁面顯示的是input標簽的內容。所有我這里改成了修改input中的內容，使用elem.next().children().children()[0].defaultValue = elem.data('value');來進行賦值。

完成的效果：