layui學習——數據表格嵌套下拉列表，並實現動態更新

　　項目中有些字段的數據為固定的幾個值，這些字段在數據表格中顯示為漢字，但在數據庫中以數字形式存儲，例如：倉庫屬性（0:普通倉/1:檢驗倉/2:報廢倉），要對這些字段進行數據表格行內編輯有些麻煩。

　　因此，在數據表格中嵌套下拉列表是一個比較好的方案。

效果展示：

 

步驟1：創建數據表格嵌套下拉列表樣式

　　使用layui的template功能，先創建一個下拉列表：

<script type="text/html" id="WHAttr">
    <select lay-filter='table' lay-verify=''>
        <option value="0">普通倉</option>
        <option value="1">檢驗倉</option>
        <option value="2">報廢倉</option>
    </select>
</script>

　　以倉庫屬性字段為例。我在項目中使用的是自動渲染的方式渲染表格的，因此需要在倉庫屬性的th標簽中加入lay-data屬性：

<th lay-data="{field:'WHAttr',templet:'#WHAttr'}">倉庫屬性</th>

　　這樣就在數據表格中嵌套一個下拉列表了，但樣式好像不對，看起來怪怪的，下拉框與單元格大小不一致，下拉框也被遮擋了。

　　於是就要修改樣式了：

<style>
    /*使下拉列表框不被遮擋*/
    .layui-table-cell {
        overflow: visible !important;
    }
    /*使列表框與表格單元格重合*/
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>

　　到這一步，表格樣式就做好了。

步驟2：實現數據同步

　　完成步驟1后，表格中已經嵌套下拉列表了，但是默認顯示的是下拉列表的第一行，接下來要做的就是修改下拉列表的默認行，讓表格能夠顯示正確的數據。

var divForm = $("#" + tableId).next();  // 獲取表格，tableId是表格的id
var tableCache = table.cache[tableCacheId];  // 獲取表格緩存數據，tableCacheId也是表格的id
var trJqs = divForm.find(".layui-table-body tr");  // 獲取表格body下的所有tr標簽
trJqs.each(function () {  // 遍歷每個tr標簽
    var trJq = $(this);  // 獲得當前遍歷的tr標簽
    var dataIndex = trJq.attr("data-index");  // 得到當前數據行的data-index，即為第幾行數據
    trJq.find("td").each(function () {  // 遍歷tr標簽下的每一個td標簽
        var tdJq = $(this);  // 獲得當前遍歷的td標簽
        var fieldName = tdJq.attr("data-field");  // 獲得當前td標簽的字段名
        var selectJq = tdJq.find("select");  // 獲得當前td標簽下的select標簽
        if (selectJq.length == 1) {  // 判斷select標簽是否存在
            selectJq.eq(0).val(tableCache[dataIndex][fieldName]);  // 將表格里的緩存數據賦值給select標簽
        }
    });
});
form.render('select');  // 重新加載select表單

　　完成了這一步，數據表格加載完成后，表格中下拉列表中默認顯示的行數據就會與數據表格的緩存數據一致了。

步驟3：實現數據動態更新

　　使用layui form的select下拉選擇事件，監聽下拉列表的數據更新

form.on('select(table)', function (data) {
    var tableCache = table.cache['table'],  // 獲得數據表格的緩存數據
        value = data.value,  // 得到下拉列表改變后的value值
        field = data.othis.parents('td').attr('data-field'),  // 獲得下拉列表的父級td標簽的字段名稱
        dataIndex = parseInt(data.othis.parents('tr').attr('data-index')),  // 獲得變化的下拉列表所在的行index
        lineDate = tableCache[dataIndex];  // 獲得數據表格中該行的緩存數據
    if (tableCache[dataIndex][field] != value) {  // 判斷數據是否發生了變化
        // 這里可以寫ajax實現與后台數據的交互
        tableCache[dataIndex][field] = value;  // 將修改后的數據更新到數據表格的緩存數據中
    }
});

　　全文完！