layui表格单元格添加下拉选择功能

1、修改表头
在这里插入图片描述
2、更新数据
在这里插入图片描述
3、修改样式
在这里插入图片描述

在这里插入图片描述
代码如下：

<style>
    /*表格单元格里显示下拉框,添加后样式不对，需要自己调整一下样式使得下拉框与单元格cell刚好合适嵌入，
    并且需要在js中设置超出长宽时也显示，否则下拉时不会显示，在css中直接设置回影响其他单元格*/
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>


<body>

<table id="grid" lay-filter="grid"></table>


<script src="js/jquery-1.11.3.js" charset="UTF-8"></script>
<script src="layui/layui.js"  charset="UTF-8"></script>

<script>
    //数据
    var jsonData = [{
        id: 1,
        city: 20000,
        pspid:"001",
        dateStart:"2020-11-12",
        dateEnd:"2021-07-15",
    }, {
        id: 2,
        city: 20001,
        pspid:"002",
        dateStart:"2021-07-15",
        dateEnd:"2021-07-15",
    }];
    var zdata=[
        {
            "pspid" : "001",
            "post1" : "aaa",
        },
        {
            "pspid" : "002",
            "post1" : "bbb",
        },
        {
            "pspid" : "003",
            "post1" : "ccc",
        },
        {
            "pspid" : "004",
            "post1" : "ddd",
        },
        {
            "pspid" : "005",
            "post1" : "eee",
        }
    ]
    function selectWz() {
        var selMaintenanceItem = '<option >请选择</option>';
        for(var i=0;i<zdata.length;i++){
            selMaintenanceItem+='<option value="'+zdata[i].pspid+'">'+zdata[i].pspid+'|'+zdata[i].post1+'</option>';
        }
        return selMaintenanceItem
    }

    //表头
    var col =[
        {type: 'checkbox'},
        {field: 'id', title: 'ID',width: 200}
        ,{
            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">18000|北京</option>\n' +
                    '        <option value="20000">20000|上海</option>\n' +
                    '        <option value="20001">20001|广州</option>\n' +
                    '        <option value="20002">20002|深圳</option>\n' +
                    '        <option value="20003">20003|杭州</option>\n' +
                    '      </select>';
            }
        }
        ,{
            field: 'pspid',
            title: '项目',
            align: 'center',
            width: 200,
            templet: function (d) {  //templet - 自定义列模板
                // 模板的实现方式也是多种多样，这里简单返回固定的
                var zvalueHelp=  selectWz();
                var zval = '<select name="pspid" lay-filter="testSelect1" lay-verify="required" data-value="' + d.pspid + '" >';
                zval += zvalueHelp;
                zval += '</select>'
                return zval;
            }
        }
        ,{field:'dateStart', align:'center', title:'开始时间',event:'date1',data_field:'velappr',style:'background-color:#fbeef0'}
        ,{field:'dateEnd'  , align:'center', title:'结束时间',event:'date2',data_field:'runappr',style:'background-color:#fbeef0'}
    ]
    //layui加载模块
    layui.use(['table', 'layer', 'element', 'jquery', 'form','laydate'], function (table, layer, element, $, form,laydate) {
        var table = layui.table,$ = layui.$;
        var form = layui.form;
        // 监听修改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;
        });
        // 监听修改update到表格中
        form.on('select(testSelect1)', 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;
        });

        //执行方法渲染
        var tableIns = table.render({
            elem: '#grid', //table的id
            //width: 900,
            height: 300,
            data: jsonData //数据
            ,size: 'lg'    //用于设定表格尺寸，若使用默认尺寸不设置该属性即可  sm（小尺寸） lg（大尺寸）
            ,cols: [col] //表头
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 指向自定义工具栏模板选择器
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可  filter: 显示筛选图标; exports: 显示导出图标 ; print: 显示打印图标
            ,defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示' //标题
                ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                ,icon: 'layui-icon-tips'   //图标类名
            }]
            ,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();
            }
        });

        //事件: 语法：table.on('event(filter)', callback);(event 为内置事件名，filter 为容器 lay-filter 设定的值)
        //工具条事件:注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(grid)', function (obj) {//给工具按钮加事件
            var data = obj.data;
            switch (obj.event) {
                case 'date1':
                    debugger;
                    var field = $(this).data('field');  //获取当前对象的字段名称，（如：field:'velappr'）
                    laydate.render({
                        elem: this.firstChild,
                        show: true ,//直接显示
                        closeStop: this , //这里代表的意思是：点击 this 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件<br>　　
                        done: function (value, res,count) {
                            data[field] = value; //修改后的值
                            obj.update(data); //res的值：{"year":2020,"month":1,"date":7,"hours":0,"minutes":0,"seconds":0}
                        }

                    });
                    break;


            }
        })
        //事件: 语法：table.on('event(filter)', callback);(event 为内置事件名，filter 为容器 lay-filter 设定的值)
        //触发头部工具栏事件
        table.on('toolbar(grid)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    var data = checkStatus.data;
                    console.log(data);
                    break;
            };
        });
    });



</script>

效果图如下：
在这里插入图片描述
在这里插入图片描述

# layui # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

实践探讨Python如何进行异常处理与日志记录

avatar 华为云开发者联盟
cover

HCDG天津站精彩回顾 | AI高效开发， ModelArts技术动手工作坊

avatar 华为云开发者联盟
cover

一次故障演练，十分钟自动搞定?

avatar 华为云开发者联盟