bootstrap table 页面加载动态列Column

需求:

在前台展示表格数据,但是表格的字段列值column不是固定的,每次都会变动,所以想了个办法
设置成动态的列

步骤:

1.先ajax请求后台获取要用的 field 和 title
2.创建一个初始的column 
3.定义一个空的column拼接后台的传回来的field 和 title
4.把后台的数据push进初始化好的column 中
5.加载bootstrapTable

实现代码:

function getColumns() {
    //1.先ajax请求后台获取要用的 field 和 title 
    $.ajax({
        url : sendOutTable.getBrandList,//获取动态的列名数据url 
        type : 'post',
        dataType : "json",
        data : {
            userId: currentUser.userId,
            apply_company_id: $("#applyCompanyId").val(),
            apply_store_id: $("#applyStoreId").val(),
            inStatus: $("#inStatus").val(),
            outStatus: $("#outStatus").val(),
            supplierId: $("#supplierId").val(),
            receiveTime1: $("#receiveTime1").val(),
            receiveTime2: $("#receiveTime2").val()
        },
        async : false,
        success : function(returnValue) {
		//2.创建一个初始的column 
        	mycolumn=[[
				{
                    field: 'storename',
                    title: '门店',
                    align: 'center',
                    valign: 'middle',
                    width: '12%',
                    colspan: 1,
                    rowspan: 2,			
                }, {
                    title: '门店结款',
                    align: 'center',
                    width: '44%',
                    valign: 'middle',
                    colspan: returnValue.length +1,
                    rowspan: 1
                }, {
                    title: '总部结款',
                    width: '44%',
                    align: 'center',
                    valign: 'middle',
                    colspan: returnValue.length+1,
                    rowspan: 1
                }
            ]]
			//3.定义一个空的拼接后台的传回来的field 和 title 
			ouclosdf =[]
            $.each(returnValue, function(i, item) {
            	var fieldsss='store' + item.brandid;
                ouclosdf.push({
                    field: fieldsss,
                    title: item.brandname,
                    align: 'center',
                    valign: 'middle'
                })
             });
            ouclosdf.push({
                field: 'storeAmount',
                title: '合计',
                align: 'center',
                valign: 'middle',

            })
            $.each(returnValue, function(i, item) {
            	var prime='prime' + item.brandid;
                ouclosdf.push({
                    field: 'prime' + item.brandid,
                    title: item.brandname,
                    align: 'center',
                    valign: 'middle',

                })
            });
            ouclosdf.push({
                field: 'bookAmount',
                title: '合计',
                align: 'center',
                valign: 'middle',
            })
			//4.把后台的数据push进初始化好的column 中
            mycolumn.push(ouclosdf)

            //5.加载bootstrapTable
            $('#sendOutTable').bootstrapTable({
                sidePagination: 'server',
                url: sendOutTable.storemonthly,
                method: 'post',
                queryParams: sendOutTable.queryParams,
                dataType: 'json',
                queryParamsType: 'limit',
                pagination: true,
                detailView: false,
                striped: false,
                showHeader: true,
                showFooter: true,
                trimOnSearch: true,
                pageNumber: 1,
                pageSize: 15,
                pageList: [15, 20],
                buttonsAlign: 'left',
                showExport: true,
                exportDataType: "basic",
                export: 'glyphicon-export icon-share',
                columns: mycolumn,
            });
        }
    });
}

实现效果:

  • 6
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
动态加载表头,你可以使用Bootstrap的JavaScript插件DataTable。首先,你需要在页面中引入DataTable的CSS和JavaScript文件。然后,在HTML中创建一个空的table元素,并使用JavaScript代码来动态生成表头和表格内容。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> </head> <body> <table id="myTable" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { var table = $('#myTable').DataTable({ "ajax": "data.json", "destroy": true }); // 动态加载表头 var columns = []; $.getJSON("columns.json", function(data) { $.each(data, function(key, val) { columns.push({"data": key, "title": val}); }); table.destroy(); table = $('#myTable').DataTable({ "ajax": "data.json", "columns": columns }); }); }); </script> </body> </html> ``` 在上面的示例中,我们使用jQuery和DataTable插件来创建一个表格,表头是静态生成的。我们使用"data.json"文件来加载表格数据,并使用"columns"选项来定义表头。在这个示例中,我们定义了三,分别是"Column 1"、"Column 2"和"Column 3"。 我们还使用了另一个JSON文件"columns.json"来动态加载表头。在这个文件中,我们定义了每一的名称。通过使用jQuery的getJSON方法,我们可以异步加载这个文件,并根据返回的数据动态生成表头。注意,我们需要在表格重新初始化之前先销毁表格实例。 希望这个示例能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值