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

实现效果:

BootstrapTable中,实现动态列功能通常涉及到在数据加载完成后动态添加或修改表格结构。以下是基本步骤: 1. 首先,确保在HTML部分引入BootstrapTable的库和jQuery。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.4/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.4/bootstrap-table.min.js"></script> ``` 2. 创建一个基础的BootstrapTable实例,设置列配置为初始状态: ```javascript var table = $('#example').bootstrapTable({ columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' } ] }); ``` 3. 当你需要动态添加列时,可以在数据加载完毕后,利用`onPostBody`事件。这个事件会在表格渲染后触发,这时可以操作表格的`columns`属性。 ```javascript table.on('post-body.bs.table', function (e, rows) { var newColumns = [{ field: 'newColumn', title: '新列' }]; // 如果你想在特定行之后添加新列,可以传入行索引 table.columns.push.apply(table.columns, newColumns); }); ``` 4. 如果需要移除列,则可以使用`removeColumn`方法: ```javascript table.removeColumn('newColumn'); ``` 请注意,这些示例假设你已经有了一个包含`id`和`name`字段的数据集。如果你需要根据数据动态生成列,那么在`newColumns`中可以使用变量或函数,比如处理来自服务器的数据返回。
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值