layui表格單元格中插入下拉框
阿新 • • 發佈：2021-02-05
技術標籤：java web
這個實現採用了layui 社群一位大神的程式碼，在此感謝大神的分享，我自己做個記錄，也給使用layui 的小夥伴們做一個分享。
思路是這樣的
可以使用自定義模板返回select節點然後在done回撥中form.render(‘select’);然後還有一個需要注意的是預設td 超出是不顯示的，所以你會發現form渲染之後select出來了，但是點選下拉的選單會看不到，需要處理一下。
程式碼也貼出來
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="js/layui/src/css/layui.css" media="all"> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <style> /*表格單元格里顯示下拉框,新增後樣式不對，需要自己調整一下樣式使得下拉框與單元格cell剛好合適嵌入， 並且需要在js中設定超出長寬時也顯示，否則下拉時不會顯示，在css中直接設定回影響其他單元格*/ td .layui-form-select { margin-top: -10px; margin-left: -15px; margin-right: -15px; } </style> <body> <button class="layui-btn" id="getCheckedData">獲得表格選中行</button> <table id="grid" lay-filter="grid"></table> <script src="js/layui/src/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use(['table', 'layer', 'element', 'jquery', 'form'], function (table, layer, element, $, form) { var jsonData = [{ id: 1, city: 20000, }, { id: 2, city: 20001 }]; // 監聽修改update到表格中 form.on('select(testSelect)', function (data) { debugger; var elem = $(data.elem); var trElem = elem.parents('tr'); var tableData = table.cache['grid']; // grid為table id // 更新到表格的快取資料中，才能在獲得選中行等等其他的方法中得到更新之後的值 tableData[trElem.data('index')][elem.attr('name')] = data.value; // 其他的操作看需求 TODO }); $('#getCheckedData').click(function () { debugger; // 驗證一下下拉選擇之後有沒有作用到表格快取資料 var checkStatus = table.checkStatus('grid'); //test即為基礎引數id對應的值 console.log(checkStatus.data); //獲取選中行的資料 console.log(checkStatus.data.length); //獲取選中行數量，可作為是否有選中行的條件 console.log(checkStatus.isAll); //表格是否全選 }); var tableIns = table.render({ elem: '#grid', width: 600, height: 300, data: jsonData, done: function (res, curr, count) { count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto'); layui.each($('select'), function (index, item) { var elem = $(item); elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible'); }); form.render(); }, size: 'lg', cols: [[ //表頭 {type: 'checkbox', fixed: true}, {field: 'id', title: 'ID', fixed: true}, { field: 'city', title: '城市', align: 'center', width: 200, templet: function (d) { // 模板的實現方式也是多種多樣，這裡簡單返回固定的 return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + d.city + '" >\n' + ' <option value=""></option>\n' + ' <option value="18000">北京</option>\n' + ' <option value="20000">上海</option>\n' + ' <option value="20001">廣州</option>\n' + ' <option value="20002">深圳</option>\n' + ' <option value="20003">杭州</option>\n' + ' </select>'; } } ]] }); }); </script> </body> </html>