layui - table 回填 - 相关

发布时间 2023-08-10 18:09:16作者: 费良
    table.render({
        elem: '#userTable'
        , url: '../sysRole/getUserList'
        , title: '用户列表'
        , page: true //开启分页
        , cols: [[
            { type: 'checkbox' },
            {
                field: 'value', title: '下拉框', templet: function (data) {
                    var html = '<select name="11" lay-filter="11" data-value="' + data.value + '"id="station' + data.id + '">';
                    html += '<option value="" selected="">请选择</option>';
                    $.each(list, function (index, item) {
                        html += '<option value="' + (item.code) + '">' + (item.name) + '</option>';
                    });
                    html += '</select>';
                    return html;
                }
            },
        ]]
        , done: function (res, page, count) {
            //----1----
            //checkbox回填
            //这句才是真正选中,通过设置关键字LAY_CHECKED为true选中,这里只对第一行选中
            res.data[0]["LAY_CHECKED"] = 'true';
            //下面三句是通过更改css来实现选中的效果
            var index = res.data[0]['LAY_TABLE_INDEX'];
            $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
            $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-formchecked');


            //----2----
            //表格加载完成后,默认选中第一行
            $('.layui-table-view[lay-id="tablist"]').children('.layui-table-box').children('.layuitable-body').find('table tbody tr[data-index="0"]').click();


            //----3----
            //让下拉框可下拉
            var tableElem = this.elem.next('.layui-table-view');
            var select = tableElem.find('select');
            layui.each(select, function (index, item) {
                var elem = $(item);
                elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
            });
            //下拉框回填
            layui.each(currData, function (index, item) {
                var codeId = "#station" + item.Id;
                var typeId = "#type" + item.Id;
                $(codeId).val(item.NextStationCode);
                $(typeId).val(item.NextNodeType);
            });
            form.render('select');

        }
    });