及上一篇的select表单元素加入table中是静态的option列表值,这一篇讲怎么动态给这个select赋值:
一.首先在表格加载(render)前,获取那个select需要的option集合
<script type="text/javascript">
var dictNameOptions = "<option value=''>请选择</option>\n";
$.ajax({
async: false,
url: '/demo/getAllOption',
type: 'get',
success: function (result) {
resultData = JSON.parse(result);
for (var x in resultData) {
dictNameOptions += '<option value = "' + resultData[x].value + '">' + resultData[x].name + '</option>\n';
}
}
});
</script>
二. 在table加载的时候,select赋值前进行拼接option列表(done函数中的操作就可以让select默认选中对应值)
table.render({
elem: '#Demo',
url: '/demo/loadTable',
method: 'GET',
height: 'full-135',
cols: [
[
{field: 'dictName', title: '字典名称', width: '14%',align: 'center', templet: '#selectDictName'}
]
],
done: function (res, curr, count) {
// 渲染dictName列
// 渲染之前组装select的option选项值
$("select[name='dictName']").html(dictNameOptions);
layui.each($("select[name='dictName']"), function (index, item) {
var elem = $(item);
elem.val(elem.data('value'));
});
form.render('select');
},
id: 'DemoTable'
});
三. 补上table 和 select 界面代码
<table class="layui-table" id="Demo" lay-filter="Demo"></table>
<script type="text/html" id="selectDictName">
<select name="dictName" lay-filter="dictName" data-value="{{d.dictName}}">
</select>
</script>
关键之处就是先将select的选项值通过ajax异步获取到,然后在给select赋值之前进行拼接上即可
四. 很多人问这个table中的select是怎么监听,方法如下:
form.on('select(dictName)', function(obj){
var elem = $(obj.elem);
var trElem = elem.parents('tr');
// 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = obj.value;
form.render('select');
});
这个tableData就是一个数组,用来存放我们整个表的数据的