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

學點

已于 2024-04-27 21:48:07 修改

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

文章标签： layui 前端 javascript

于 2019-07-28 19:53:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44542088/article/details/97618420

本文介绍如何在Layui数据表格中使用templet自定义模板实现单元格下拉框功能，包括使用ajax请求填充下拉选项，并提供必要的样式代码确保下拉框正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前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;
}

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