layui表格中实时获取下拉框数据

最新推荐文章于 2023-09-30 21:52:26 发布

汤姆是猫？

最新推荐文章于 2023-09-30 21:52:26 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui

本文链接：https://blog.youkuaiyun.com/painprogrammer/article/details/112008477

layui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在layui表格中实现实时获取并显示下拉框数据。首先定义table，然后渲染数据，编写cols以展示数据。接着通过templet自定义模板创建下拉框，并使用done回调函数进行数据回显。最后，通过AJAX获取下拉框的选项数据，并使用form.render更新select选择项。整个过程涵盖了layui表格、模板语法、数据回显和动态加载等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui表格中实时获取下拉框数据

1.首先需要定义一个table。

   <div id="id_table">
        <table id="xxx" lay-filter=""></table>
   </div>

2.渲染数据

    layui.use(['form', 'laydate', 'table', 'layer'], function () {
        var table = layui.table,  form = layui.form, layer = layui.layer, laydate=layui.laydate;
        var cols_ = get_cols();
        
        var tb_opts = {
            id: "xxx"
            , elem: "#xxx"
            , toolbar: "#xxx"
            , defaultToolbar: []
            , canSelectRow: 'false'
            //LAY_CHECKED: true,
            , autowidth: 'true'
            , height: '265'
            , even: true
            , cols: [cols_]
            , url: ""
            , data: data
            , text: {
                none: gettext("none_data")
            }
            , loading: true
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next']
                , groups: 3
                , limit: 50
                , limits: [50, 100,]
            }
            , done: function (obj) {
                get_code(obj);
            }
        };
gettext:为i18n。
cols:为表格显示数据。
下边代码就不再演示，主要说明下，加载下拉框数据。

3.编写cols，table显示数据，get_cols方法为我定义的获取方法。

    function get_cols() {
        var cols;
        var cols_2 = [];
        cols_2.push(
            {field: 'select_code', title: "xxxx", type: 'select', width: 160, align: 'center',templet:"#selectDictName"},
        );
        cols = cols.concat(cols_2);
        return cols;
    }
selectDictName为templet自定义模板方法。

4.编写selectDictName方法。

写一段单独的js
<script type="text/html" id="selectDictName">
    <select name="dictName" lay-filter="dictName" data-value="{{d.dictName}}">
    </select>
</script>
作用，table生成下拉框。

5.获取下拉框数据，这是一个方法，需要将方法写在done下，当前我的获取数据的方法为get_code()

        function get_code(obj) {
             // 渲染dictName列
               // 渲染之前组装select的option选项值
            $("select[name='dictName']").html(dictNameOptions);
            $('#id_table tr').each(function (e) {
                   var $cr = $(this);
                   var data_index = $cr.attr("data-index");
                   $.each(obj.data, function (index,value) {
                   if (value.LAY_TABLE_INDEX == data_index){
                       $cr.find('select').val(value.select_code);
                       }
                   });
               });
               form.render('select');
        }
此处已做回显操作。

6.根据上述代码，我们可以知道select监禁一个dictNameOptions的方法，这个就是我们获取数据的方法。

需要另写一点js
<script type="text/javascript">
    var dictNameOptions = "<option value=''>--------</option>\n";
    $.ajax({
        async: false,
        url:  'xxxx/xxx/xx',
        type: 'get',
        success: function (res) {
            for (i in res.data) {
                dictNameOptions += '<option value= "' +res.data[i].id + '">' + res.data[i].alias + '</option>';
            }
        }
    })
</script>