layui テーブル リストのドロップダウン選択操作

 

 

ドロップダウン選択をリストに追加

 

var colsChang=[
        [
            {type: 'checkbox'},
            {type: 'numbers',title: '序号'},
            {field: 'id', title: 'id'},
            {field: 'reuseDegree',title: '复用度',width:110, templet:function(d){
                    var opt = '<select name="reuseDegree" id="reuseDegree" class="province-selector" lay-filter="reuseDegreeFileter" >\n'
                    if(d.reuseDegree == "新增"){
                        opt = opt + '      <option value="新增" selected >新增</option>\n' +
                            '      <option value="复用" >复用</option>\n' +
                            '      <option value="利旧" >利旧</option>\n'
                    }else if(d.reuseDegree == "复用"){
                        opt = opt + '      <option value="新增" >新增</option>\n' +
                            '      <option value="复用" selected >复用</option>\n' +
                            '      <option value="利旧" >利旧</option>\n'
                    }else if(d.reuseDegree == "利旧"){
                        opt = opt + '      <option value="新增" >新增</option>\n' +
                            '      <option value="复用" >复用</option>\n' +
                            '      <option value="利旧" selected >利旧</option>\n'
                    }
                    opt = opt + '    </select>'
                    return opt
                }},
            {field: 'remarks', title: '备注',width:100}
        ]
    ]







//==================

function gndpgTable() {

                tableIns2 = febss.table.init({
                    elem: '#pgbglTable',
                    id: 'pgbglTable',
                    url: 'sjyMydaibanExcel/pageList?projectId='+projectId,
                    limits : [100, 200, 500],
                    limit: 100,
                    height:'full-210',
                    cols: colsChang,
                    done: function (res, curr, count) {
                        $(".layui-table-box").find("[data-field='id']").css("display","none");
                    },

                });
            }

 スタイルを調整する必要があるという人もいますが、以下を追加しないと開いたときにドロップダウンの選択が表示されませんが、私はそのようなことはありませんでした。状況に応じて使用できます。

<style>
    /*使下拉列表框不被遮挡*/
    .layui-table-cell {
        overflow: visible !important;
    }
    /*使列表框与表格单元格重合*/
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>

 データの取得と呼び出しのバックグラウンド インターフェイス

useDegreeFileter はリストに追加されるドロップダウンで選択されたレイ フィルターであり、value は現在選択されている値です。

lineDate はこのデータ行であり、ID を取得するために使用できます。

//table列表中的复用新增利旧下拉选点击事件
            form.on('select(reuseDegreeFileter)',data=>{
                console.log(data)
                var tableCache = table.cache['pgbglTable'],  // 获得数据表格的缓存数据
                    value = data.value,  // 得到下拉列表改变后的value值
                    field = data.othis.parents('td').attr('data-field'),  // 获得下拉列表的父级td标签的字段名称
                    dataIndex = parseInt(data.othis.parents('tr').attr('data-index')),  // 获得变化的下拉列表所在的行index
                    lineDate = tableCache[dataIndex];  // 获得数据表格中该行的缓存数据
                console.log(lineDate.id)
                febs.get(ctx + 'sjyMydaibanExcel/updateReuseDegree?id='+lineDate.id+'&reuseDegree='+value
                    , null, function () {
                        //设置成功刷新大table和小table
                        tabresidence.reload({where: { }, page: {curr: 1}});
                        tableIns2.reload({where: { }, page: {curr: 1}});
                        tableIns1.reload();
                        tabresidence.reload();
                    });
            });

 元のアドレス: layui learning - データ テーブルのネストされたドロップダウン リストと動的更新 - 夏の終わりには蝉は鳴かない - Blog Park

私の記事のコードは原文とは異なりますが、必要に応じて記述方法を選択してください。