bootstrapTable实现合并相同列(fastadmin框架同样使用)

时间:2019-04-18
本文章向大家介绍bootstrapTable实现合并相同列(fastadmin框架同样使用),主要包括bootstrapTable实现合并相同列(fastadmin框架同样使用)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

方法:调用mergeCells(data, fieldName, target),可以实现合并相同列


                var table = $("#table");

                // 初始化表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'update_time',
                    search: false,
                    toolbar: '#toolbar',
                    commonSearch: true,
                    pageSize : 12,
                    searchFormVisible: true,
                    queryParams: function (params) {
                        //这里可以追加搜索条件
                        var filter = JSON.parse(params.filter);
                        var op = JSON.parse(params.op);
                        //这里可以动态赋值,比如从URL中获取admin_id的值,filter.admin_id=Fast.api.query('admin_id');
                        // filter.admin_id = 1;
                        if(filter.is_bujiao=='是')
                            filter.is_bujiao=1
                        if(filter.is_bujiao=='否')
                            filter.is_bujiao=0
                        op.username = "like";
                        params.filter = JSON.stringify(filter);
                        params.op = JSON.stringify(op);
                        return params;
                    },
                    columns: [
                        [  
                        {field: 'total_order_id', title: '总订单号',sortable: true,width: "150px",formatter: Table.api.formatter.search}
                        ]
                    ],
                   
                    onLoadSuccess: function (data) {
                        mergeCells(data, "total_order_id", $("#table"));
                    },
                });

                // 为表格绑定事件
                Table.api.bindevent(table);

/**
 * 合并相同列
 * @param data  原始数据(在服务端完成排序)
 * @param fieldName 合并属性数组
 * @param target    目标表格对象
 */
function mergeCells(data, fieldName, target) {
    setTimeout(function () {
        if (data.rows.length == 0) {
            return;
        }
        var numArr = [];
        var number=0;
        var classzhi='dan';
        if( data.rows.length>1){
            for (let i = 0; i < data.rows.length; i++) {
                if(data.rows[i][fieldName]!='' && data.rows[i][fieldName]!='-'){
                    if(data.rows[i-1]){
                        if(data.rows[i-1][fieldName]!='' && data.rows[i-1][fieldName]!='-'){
                            if(data.rows[i-1][fieldName]==data.rows[i][fieldName]){
                                number++
                            }
                            else{
                                number=number+1
                                numArr.push({index:i-number,number:number,pan:'1'})
                                number=0
                            }
                        }
                    }
                    if(!data.rows[i+1]){
                        number=number
                        numArr.push({index:i-number,number:number+1,pan:'2'})
                        number=0
                    }else{
                        if(data.rows[i+1][fieldName]=='' || data.rows[i+1][fieldName]=='-'){
                            number=number
                            numArr.push({index:i-number,number:number+1,pan:'3'})
                            number=0
                        }
                    }
                }else{
                    numArr.push({index:i,number:1,pan:'4'})
                }
            }
        }else{
            numArr.push({index:0,number:1,pan:'5'})
        }
        // console.log(numArr);
        for (let x = 0; x < numArr.length; x++) {
            if(x%2){
                for(let y=0;y<numArr[x]['number'];y++){
                    $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#ccc')
                }
            }else{
                for(let y=0;y<numArr[x]['number'];y++){
                    $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#FFF')
                }
            }
            $(target).bootstrapTable('mergeCells', { index: numArr[x]['index'], field: fieldName, colspan: 1, rowspan: numArr[x]['number']});
        }
    },0)
}