layui学习——数据表格嵌套下拉列表,并实现动态更新
项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废仓),要对这些字段进行数据表格行内编辑有些麻烦。
因此,在数据表格中嵌套下拉列表是一个比较好的方案。
步骤1:创建数据表格嵌套下拉列表样式
使用layui的template功能,先创建一个下拉列表:
script type="text/html" id="WHAttr"
select lay-filter='table' lay-verify=''
option value="0"普通仓/option
option value="1"检验仓/option
option value="2"报废仓/option
/select
/script
以仓库属性字段为例。我在项目中使用的是自动渲染的方式渲染表格的,因此需要在仓库属性的th标签中加入lay-data属性:
th lay-data="{field:'WHAttr',templet:'#WHAttr'}"仓库属性/th
这样就在数据表格中嵌套一个下拉列表了,但样式好像不对,看起来怪怪的,下拉框与单元格大小不一致,下拉框也被遮挡了。
于是就要修改样式了:
style
/*使下拉列表框不被遮挡*/