FastAdmin动态渲染Table列

效果图

 

初始化表格

var specTable = $('#specTable');

// 重新实例化表格
Table.api.init({
    extend: {
        table: 'specTable',
        table_alias: 'specTable_index',
    }
});

动态渲染表格方法

function reloadTable(columns) {
    // 为渲染的表格绑定上增删改查等事件
    Table.api.bindevent(specTable);
    // 销毁表
    specTable.bootstrapTable('destroy');
    // 加载表数据
    specTable.bootstrapTable({
        data: special,
        cache: false,
        visible: false,
        search: false,
        showColumns: false,
        showToggle: false,
        showExport: false,
        pagination: false,
        columns: [
            columns
        ]
    });
}

使用方法

var FiexedColumn = [
    {field: 'name', title: "特价组合", align: 'left'},
];
var operate = {
    field: 'operate', title: __('Operate'), align: 'left', table: specTable,
    events: Table.api.events.buttons,
    buttons: [
        {
            name: 'del',
            text: '删除',
            title: '删除',
            classname: 'btn btn-xs btn-primary btn-click',
            click: function (t) {
                // 删除行数据
                special.splice(t.rowIndex, 1);
                // 重新加载数据
                specTable.bootstrapTable('load', special);
            }
        },
    ],
    formatter: Table.api.formatter.buttons
};

// 初次加载表格
reloadTable([...FiexedColumn, operate]);

// 操作后表格数据变动增加列 伪代码如下
let column = [];
let unit = '个'
for (let value = 1;value<3;value++){
    column.push({
        field: 'limit_' + value,
        title: "特价" + value + unit,
        formatter: function (t, row, index) {
            let price = 0;
            if (row.hasOwnProperty('have_price')) {
                if (row.have_price.hasOwnProperty(value)) {
                    price = row.have_price[value];
                }
            } else {
                price = row.price_json[pi].price;
            }
            return '<input class="form-control numPrice" data-index="' + index + '" data-pi="' + pi + '" type="number" value="' + price + '">';
        }
    });
}
// 渲染表格
reloadTable([...FiexedColumn, ...column, operate]);