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,
            });
        }
    });
}

实现效果:

bootstrap table 页面加载动态列Column_第1张图片

你可能感兴趣的:(前端)