向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 = ''$.ajax({url: '/BreakdownManagement/Appointment/selectMaintenanceItem',type: 'post',async: false,success: function (data) {for (k in data) {selMaintenanceItem += '' + data[k].text + '';}selMaintenanceItem
+= '';}});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;}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！