layui 数据表格下拉框_LayUi- 动态表格table中下拉框Select的设置和监听

LayUi中动态表格中可以使用 templet自定义列模板 对单元格添加其他元素 ，添加下拉框相对麻烦些，没有自带的。

1.添加编辑器

我们使用绑定模版选择器的方法：

在table.render()中 指定列(cols)的templet属性，并添加模板的html代码，例如：

{ rowspan: 2, title: '新建及改造工作状态', templet: '#editState' }

未开工

在建

完工

已验收

(使用d.fileName指定字段，用于绑定已有的值； 另外必须设置lay-filter才可以进行监听)。

添加后样式不对，需要自己调整一下样式使得下拉框与单元格cell刚好合适嵌入，并且需要设置超出长宽时也显示，否则下拉时不会显示：

td .layui-form-select{

margin-top: -10px;

margin-left: -15px;

margin-right: -15px;

}

.layui-table-cell {

overflow: visible!important;

}

因为设置了全局的.layui-table-cell，会影响到其他table元素，比如表头的th，我这里表头原本是自适应宽度、超出隐藏，手动拖动调整宽度的，所以再重设一下表头超出隐藏：

.layui-table-view .layui-table th{

overflow:hidden;

}

2.监听下拉框

因为下拉框是属于form元素，不是属于table元素，所以监听方法需要放在layui.use('form')中，而不是放在layui.use('table')中

layui.use('form', function () {var form =layui.form;//监听下拉框编辑

form.on('select(editStateS)', function (data) {//获取当前行tr对象

var elem = data.othis.parents('tr');//第一列的值是Guid，取guid来判断

var Guid= elem.first().find('td').eq(1).text();//选择的select对象值；

var selectValue =data.value;//这里的JsonDataInti是我自定义的table中数据的缓存数据，下拉数据修改时赋值到这一行缓存数据

for (i = 0; i < jsonDataInit.length; i++) {if (jsonDataInit[i].Guid==Guid) {

jsonDataInit[i].NewReformStatus=selectValue; //更新被修改的行数据

}

}

})

});

3.已经存在的数据绑定至下拉框：

这里就又需要放在layui.use('table')中了，在table.render的done函数中来编写绑定逻辑：

done: function (res, curr, count) {res.data.forEach(function (item, index) {//根据已有的值回填下拉框

layui.each($("select[name='editStateS']", ""), function (index, item) {var elem =$(item);

elem.next().children().children()[0].defaultValue = elem.data('value');//elem.val(elem.data('value'));

});

table.render('select');

}

网上看了一些做法是使用elem.val(elem.data('value')); 来进行赋值，但是试了发现并不行，于是查看了一下生成的html代码：

不知为何生成了两个，，一个select标签、一个input标签，页面显示的是input标签的内容。所有我这里改成了修改input中的内容，使用elem.next().children().children()[0].defaultValue = elem.data('value');来进行赋值。

完成的效果：