Layui表格自定义下拉框

开发工具与关键技术：VS+下拉框
作者： 李伙
撰写时间： 2019年7月27日

下拉框数据查询在MVC中用途很广，下拉框数据查询是为了能让我们多种选择。在平时的下拉框查询我们是利用一个方法来查询数据库中的数据的，而如果在layui数据表格中需要定义一个下拉框查询的方法又该怎么办呢，其实也很简单，接下来请看看如何在layui表格中自定义下拉框

如上图所示：在自定义下拉框之前先设置它的一些css样式，这是为了防止下拉框的下拉列表被隐藏，所以是必须要设置的，不然就算自定义好下拉框了它的下拉列表也不会出现的，但是设置的这些css样式会和表格的样式起冲突的，如果表格列数太多会出现错乱的情况，所以我们可以忽略下拉框的美化渲染 ，也可以不忽略的。

如上图所示：我是在配件信息表这个表格里自定义车型这一列为下拉框的，所以要在初始化配件信息表里找到车型这一列加上“templet”属性，templet表示自定义列模板，自定义列模板在layui中是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等。这里自定义的下拉框其实也相当于自己拼接一个下拉框，标签里包裹住标签，把从数据库中查询出来的数据放入到标签中。

上图是控制器代码，查询出数据库中车型信息，id等于车型ID，text等于车型名称。

上图中的代码是为了回填下拉框数据，这样就防止加载出来的数据一开始是空的数据，只需要把上图的代码放到初始化配件信息表中就可以了。接下来看看它的效果图。

上图中是layui表格自定义下拉框的效果图，车型它会回填数据库对应的字段，也可以进行下拉列表选择数据。这样layui表格自定义下拉框就完成了。