html下拉列表框嵌套,layui学习——数据表格嵌套下拉列表，并实现动态更新

项目中有些字段的数据为固定的几个值，这些字段在数据表格中显示为汉字，但在数据库中以数字形式存储，例如：仓库属性(0:普通仓/1:检验仓/2:报废仓)，要对这些字段进行数据表格行内编辑有些麻烦。

因此，在数据表格中嵌套下拉列表是一个比较好的方案。

步骤1：创建数据表格嵌套下拉列表样式

使用layui的template功能，先创建一个下拉列表：

普通仓

检验仓

报废仓

以仓库属性字段为例。我在项目中使用的是自动渲染的方式渲染表格的，因此需要在仓库属性的th标签中加入lay-data属性：

仓库属性

这样就在数据表格中嵌套一个下拉列表了，但样式好像不对，看起来怪怪的，下拉框与单元格大小不一致，下拉框也被遮挡了。

于是就要修改样式了：

/*使下拉列表框不被遮挡*/.layui-table-cell {

overflow: visible!important;

}/*使列表框与表格单元格重合*/td .layui-form-select {

margin-top: -10px;

margin-left: -15px;

margin-right: -15px;

}

到这一步，表格样式就做好了。

步骤2：实现数据同步

完成步骤1后，表格中已经嵌套下拉列表了，但是默认显示的是下拉列表的第一行，接下来要做的就是修改下拉列表的默认行，让表格能够显示正确的数据。

var divForm = $("#" + tableId).next(); //获取表格

var tableCache = table.cache[tableCacheId]; //获取表格缓存数据

var trJqs = divForm.find(".layui-table-body tr"); //获取表格body下的所有tr标签

trJqs.each(function () { //遍历每个tr标签

var trJq = $(this); //获得当前遍历的tr标签

var dataIndex = trJq.attr("data-index"); //得到当前数据行的data-index，即为第几行数据

trJq.find("td").each(function () { //遍历tr标签下的每一个td标签

var tdJq = $(this); //获得当前遍历的td标签

var fieldName = tdJq.attr("data-field"); //获得当前td标签的字段名

var selectJq = tdJq.find("select"); //获得当前td标签下的select标签

if (selectJq.length == 1) { //判断select标签是否存在

selectJq.eq(0).val(tableCache[dataIndex][fieldName]); //将表格里的缓存数据赋值给select标签

}

});

});

form.render('select'); //重新加载select表单

完成了这一步，数据表格加载完成后，表格中下拉列表中默认显示的行数据就会与数据表格的缓存数据一致了。

步骤3：实现数据动态更新

使用layui form的select下拉选择事件，监听下拉列表的数据更新

form.on('select(table)', function(data) {var tableCache = table.cache['table'], //获得数据表格的缓存数据

value = data.value, //得到下拉列表改变后的value值

field = data.othis.parents('td').attr('data-field'), //获得下拉列表的父级td标签的字段名称

dataIndex = parseInt(data.othis.parents('tr').attr('data-index')), //获得变化的下拉列表所在的行index

lineDate = tableCache[dataIndex]; //获得数据表格中该行的缓存数据

if (tableCache[dataIndex][field] != value) { //判断数据是否发生了变化

//这里可以写ajax实现与后台数据的交互

tableCache[dataIndex][field] = value; //将修改后的数据更新到数据表格的缓存数据中

}

});

全文完！