layui表格单元格中插入下拉框

雨点打透心脏的1/2处 2022-10-27 13:54 714阅读 0赞

这个实现采用了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">
        
    </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>
    
     
    <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>