bootstrapTable的表头改造

Bootstrap-table是基于Boostrap开发的插件，因此使用的时候，需要引入Bootstrap的脚本和样式。

然后是Bootstrap-table的依赖引用：

上代码

// 表头改造及动态生成表单列数
table.bootstrapTable({
                // 获取远程数据  	
                ajax: function (request) {
                    $.ajax({
                        type: "GET",
                        url: $.fn.bootstrapTable.defaults.extend.index_url,
                        dataType: "json",
                        json: 'callback',
                        success: function (json) {
							
                            var dynamicHeader = [];
                            var header2 = [];
                            // 改造成需要的表头类型和表头数量
							dynamicHeader.push({
                                field: 'id',
                                title: "功能分组",
                                colspan: 1,
                                rowspan: 2
                            },);
        
                            for (var i in json.rows[0]) {
                                dynamicHeader.push({
                                    "title": i,
                                    "field": i,
                                    'colspan': 2,
                                    "rowspan": 1
                                });
                                header2.push({
                                    "title": i,
                                    "field": i,
                                    'colspan': 1,
                                    "rowspan": 1
                                });
                                header2.push({
                                    "title": i,
                                    "field": i,
                                    'colspan': 1,
                                    "rowspan": 1
                                });
                            }
                            var header = [dynamicHeader,header2]
							// 初始化表单（先销毁历史表单）
                            table.bootstrapTable('destroy').bootstrapTable({
								data: json.rows,
								//请求方式（*）
                                method: 'GET',
                                 //是否显示行间隔色                      
                                striped: true, 
                                 //是否使用缓存，默认为true
                                cache: false,  
                                //是否显示分页（*）                    
                                pagination: true,                 
                                //是否启用排序  
                                sortable: true,                     
                                //排序方式
                                sortOrder: "asc",      
                                //分页方式：client客户端分页，server服务端分页（*）             
                                sidePagination: "server",       
                                //初始化加载第一页，默认第一页,并记录    
                                pageNumber: 1,                     
                                //每页的记录行数（*） 
                                pageSize: rows,                     
                                 //可供选择的每页的行数（*）
                                pageList: [10, 25, 50, 100],
                                 //是否显示表格搜索       
                                search: false,                     
                                strictSearch: true,
                                //是否显示所有的列（选择显示的列）
                                showColumns: true,                
                                 //是否显示刷新按钮  
                                showRefresh: true,                 
                                //最少允许的列数
                                minimumCountColumns: 2,   
                                //是否启用点击选中行          
                                clickToSelect: true,            
                                 //行高，不设置height，表格自动根据记录数决定表格高度    
                                //height: 500,                     
                                //每一行的唯一标识，一般为主键列 
                                uniqueId: "ID",                                             
                                //是否显示详细视图和列表视图的切换按钮              
                                showToggle: true,                  
                                 //是否显示详细视图
                                cardView: false,                   
                                columns: header
                            });
                        }
                    });
                }
            });