fastadmin 动态column 动态表头 根据搜索条件改变的表格列数动态column表格 动态表头

初学fastadmin，发现一键curd生成的列都是固定的，但是实际开发的过程中，如果我有需求按照用户选择显示3天、5天、15天的数据；就要动态改变列了；当然如果你直接显示最长的(15天)，没有的显示为空也行。这里提供几种方法。

一、直接在前端的js中，按照用户选择的配置columns；【js的路径：public\assets\js\backend\test.js】

//-----方法一--------------------------------------------------------------     
            // 根据搜索条件生成表头  
            //默认返回的数据为：rows:[{'day1':1,'day2':2},{'day1':3,'day2':5}] 
            var columnsArray = [];
            var tablenum = $('#day').val();//获取用户选择的天数，如果3天，生成3列；以此类推          
            for (let i = 1; i < tablenum; i++) {
                columnsArray.push({
                    "title": i+'日',//表头的名称
                    "field": 'day'+i,//数据库返回的键名
                });
            }

             // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url, 
                pk: 'da',
                sortName: 'cd',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: columnsArray//把处理好的列数组放到这里
               
            });
//------方法一---------------------------------------------------------------------------



//----方法二-----没做过验证，只提供思路----------------------------------------------------
            // 根据搜索条件生成表头  
            //默认数据库返回的数据为：rows:[{'day1':1,'day2':2},{'day1':3,'day2':5}] 
            var columnsArray = [];
            //直接按照最长的天数设置好          
            for (let i = 1; i < 15; i++) {
                columnsArray.push({
                    "title": i+'日',//表头的名称
                    "field": 'day'+i,//数据库返回的键名
                });
            }

             // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url, 
                pk: 'da',
                sortName: 'cd',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: columnsArray//把处理好的列数组放到这里
                onLoadSuccess: function () {//加载完成，按照实际需求去隐藏一些列
                            data = table.bootstrapTable('getData', true);//获取数据
                            if (data[0]) {
                                var key = Object.keys(data[0]);
                            }
                            if (diff) {
                                for (let i = 0; i < diff.length; i++) {
                                    table.bootstrapTable("hideColumn", diff[i]);
                                }
                            }
                            if (key) {
                                for (let j = 0; j < key.length; j++) {
                                    table.bootstrapTable("showColumn", key[j]);
                                }
                            }
                        }
               
            });
//----方法二-----------------------------------------------------------------

二、根据后端返回配置columns，大致和第一种类似

            // 根据搜索条件生成表头  
            //默认数据库返回的数据为：rows:[{'day1':1,'day2':2},{'day1':3,'day2':5}] 
            var columnsArray = [];
            //先执行请求生成列再请求数据 也可以通过事件监听，先于请求数据之前生成列
            Fast.api.ajax({
                    url: 'test',//请求后端的路径
                    async:false,  //同步请求
                }, function (data) {
                    $.each(data, function (i, item) {
                        var row;
                        row = {
                            "field": item.field,//返回数据的键名
                            "title": item.title,//在后端配置好名称
                            operate: false
                        };
                   columnsArray.push(row);
              })

             // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url, 
                pk: 'da',
                sortName: 'cd',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: columnsArray//把处理好的列数组放到这里
               
            });

三、fastadmin创始人提供的思路

1.在控制器中并配置需要显示的列字段信息渲染到视图
2.在JS中拼接columns属性值
这样即可达到动态列。
如果你有安装CMS插件，在后台管理的CMS管理中的内容管理中的副表列表中的字段列就是动态配置的，你可以参考下。

地址：fastadmin 动态的列 bootstraptable 这种动态的js 如何弄哦 - FastAdmin问答社区

四、fastadmin问答区提供的思路

$this->assignconfig();
传到js中,通过Config.xxx 你定义的变量名, 然后在循环出来就OK了

PHP控制器

$this->assignconfig('field',$fields);

前端js
 

let columns=[]

$.each(Config.field,function(k,v){ 
    columns.push(
    {
    field:v.xxxxxx
    }
    ); 
})

 参考连接：关于assignconfig实现的原理，抓紧看下手慢就没有了！！ - FastAdmin问答社区

文章参考：javascript 前台赋值问题 - FastAdmin问答社区

五、舍弃官方的初始化表格，自己请求数据后再处理

$("#table").bootstrapTable({
    ajax: function (request) {
        $.ajax({
            type: "GET",
            url: 'test' + location.search,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            json: 'callback',
            success: function (res) {//获取数据进行自定义操作
                var json = res.rows;
                var columnsArray = [
                    {
                        "checkbox": false
                    }
                ];
                if (json.length > 0) {
        //Object.keys(obj)获取第一条数据取标题名称和键名；缺陷：如果第一条数据不全就会有问题
                    for (var i = 0; i < (Object.keys(json[0])).length; i++) {                        
                        var property = (Object.keys(json[0]))[i];//id   username
                        if (Number(property * 1)) {
                            continue;
                        }
                    
                        columnsArray.push({
                            "title":property.title,
                            "field": property.field
                        });
                    }
                }
               
                // 重新渲染数组
                $('#table').bootstrapTable('destroy').bootstrapTable({
                    data: json,
                    sidePagination: 'client',//前端分页
                    pageSize: 10,
                    pageNumber: 1,
                    showToggle: false,
                    showRefresh: false,
                    showColumns: false,
                    search: false,
                    pagination: true,
                    fixedColumns: true,
                    fixedNumber: 12,
                    commonSearch: true,
                    search: false,
                    columns: columnsArray,
                    showExport: false
                });
            },
            error: function (es) {
                // console.log(es);
                // alert("错误");
            }
        });
    }
});

最后这一篇是参考意义比较大一点的文章，大家可以看看

 参考博文：fastadmin 可根据搜索条件改变的动态column表格_weixin_44238629的博客-CSDN博客_fastadmin columns​​​​​​​​​​​​​r

如果觉得有用，高抬贵手点个赞，谢谢了