技術標籤：layuilayui

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>

這樣我們layui就在table中時間實時獲取下拉框資料。

希望可以幫到你。謝謝觀看。