Fastadmin 表格的使用技巧之启用详情视图功能

实现的效果

配置位置

后台模块的*.js文件

配置方法

 table.bootstrapTable({
        detailView: true,
        detailFormatter: function(index,row){
            console.log("index",index);
            console.log("row",row);

            return `
            <table class="table" width="100%">
                <tr><td width="5%">aaaa</td><td width="5%">aaaa</td><td width="5%">aaaa</td><td></td></tr>
                <tr><td width="5%">aaaa</td><td width="5%">aaaa</td><td width="5%">aaaa</td><td></td></tr>
                <tr><td width="5%">aaaa</td><td width="5%">aaaa</td><td width="5%">aaaa</td><td></td></tr>
            </table>
            `;
        },
     ...
 });

参数解释

1. detailView: true - 启用详情视图功能
2. detailFormatter - 定义详情内容的格式化函数
3. 当用户点击展开按钮时，会调用此函数并传入当前行的索引和数据
4. 函数返回的HTML内容会显示在展开的详情行中