layui表格(Table)下添加可更新拉选择框select

 添加CSS 防止下拉框被遮挡

<style>
/* 防止下拉框下拉值被遮盖*/
.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;
}
</style>

表,

<table class="layui-hide" id="data" lay-filter="data"></table>

自定义模板:
<script type="text/html" id="rule_type_Tpl">
<select name="rule_type" lay-filter="select_rule_type">
<option value="1" {{" {{# if(d.rule_type == 1){}} selected{{# }}}"}}>选择了1</option>
<option value="2" {{" {{# if(d.rule_type == 2){}} selected{{# }}}"}}>选择了2</option>
</select>
</script>

添加监听事件

//规则类型下拉框监听事件
form.on(‘select(select_rule_type)’, function(data){
//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
var elem = data.othis.parents(‘tr’);
var dataindex = elem.attr("data-index");
var tabledata = table.cache["data"];
$.each(tabledata,function(index,value){
if(value.LAY_TABLE_INDEX==dataindex){
tabledata[index]["rule_type"] = data.value;
table.reload("data", {
data: tabledata,
})
layer.msg(‘更新下拉框:’+data.value);
}
});
});