向layui数据表格单元格设置下拉框

开发工具与关键技术：Visual Studio 与layui、ajax请求

作者：黄灿

撰写时间：2019.7.26

目前layui数据表格，只支持单元格edit编辑类型，尚未支持单元格下拉款类型，但是我们可以使用单元格templet自定义模板，layui-cols-表头参数一览表解释说明：自定义列模板遵循laytpl语法，这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其他格式。这个templet自定义模板就可以借助我实现单元格下拉框

首先在方法渲染表格的时候加上templet参数加上templet参数后，field参数就可以不加上了

在这里插入图片描述

然后就把templet参数写成一个function，在function中申明变量，拼接select标签、option标签，option标签里的数据使用ajax请求控制器，把异步请求接收到的数据for循环拼接到option标签里，然后return拼接好的html代码。



function
selectMaintenanceItem() {

                    var selMaintenanceItem = '<select>'

                    $.ajax({

                        url: '/BreakdownManagement/Appointment/selectMaintenanceItem',

                        type: 'post',

                        async: false,

                        success: function (data) {

                            for (k in data) {

                               
selMaintenanceItem += '<option value=' + data[k].id + '>' + data[k].text + '</option>';

                            }

                            selMaintenanceItem
+= '</select>';

                        }

                    });

                    return selMaintenanceItem

                }

这样templet参数接收到的就是一个自定义的下拉款，数据表格单元格就会显示下拉款

在这里插入图片描述

Layui表格单元格自定义列下拉框，还要加上一些样式



/* 防止下拉框的下拉列表被隐藏---必须设置--- */

        .layui-table-cell {

            overflow: visible;

        }

        .layui-table-box {

            overflow: visible;

        }

        .layui-table-body {

            overflow: visible;

        }

        /* 设置下拉框的高度与表格单元相同 */

        td .layui-form-select {

            margin-top: -10px;

            margin-left: -15px;

            margin-right: -15px;

        }

如果没有这些样式，会出现下拉框被隐藏和下拉框宽度高度与单元格不一致，这样会显得难看一些

在这里插入图片描述

向layui数据表格单元格设置下拉框

猜你喜欢