CSDN第一篇：layui table表格加入select表单元素option动态赋值并回显

最新推荐文章于 2023-06-21 16:40:42 发布

置顶 DaySurprise

最新推荐文章于 2023-06-21 16:40:42 发布

阅读量1.2w

点赞数 7

分类专栏： layui 文章标签： layui table select option js

本文链接：https://blog.csdn.net/DaySurprise/article/details/89133885

版权

layui 专栏收录该内容

4 篇文章

订阅专栏

及上一篇的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');
        });