jqGrid多行表頭

這個功能在統計報表時候還是非常實用的可以學習使用一下

單行表頭效果圖

js代碼

    $("#list2").jqGrid("setGroupHeaders",{
        useColSpanStyle: true,
        groupHeaders:[

            { startColumnName:"id",numberOfColumns : 2, titleText:"學號和姓名"},
            { startColumnName:"age",numberOfColumns : 2, titleText:"年齡和愛好"},


        ]
    });

多行表頭效果圖

js代碼

	$("#list2").jqGrid("setGroupHeaders",{
		useColSpanStyle: true,
		groupHeaders:[
			{ startColumnName:"id",numberOfColumns:5,titleText:"學生信息"}

		]
	});
	$("#list2").jqGrid("setGroupHeaders",{
		useColSpanStyle: true,
		groupHeaders:[

			{ startColumnName:"id",numberOfColumns : 2, titleText:"學號和姓名"},
			{ startColumnName:"age",numberOfColumns : 2, titleText:"年齡和愛好"},


		]

　　這里要注意上面一行的表頭要先寫，依次往下

完整的jqGrid代碼

function pageInit(){
	//創建jqGrid組件
	jQuery("#list2").jqGrid(
			{
				url : 'selectAll',//組件創建完成之后請求數據的url
				datatype : "json",//請求數據返回的類型。可選json,xml,txt
				colModel : [ //jqGrid每一列的配置信息。包括名字，索引，寬度,對齊方式.....
				             {label : '學號',name : 'id',width : 255,align:'center'},
				             {label : '姓名',name : 'name',width : 300,align:'center'},
					{label : '年齡',name : 'age',width : 290,align:'center'},
					{label : '愛好',name : 'hobby',width : 290,align:'center'},
					{label : '班級',name : 'classes',width : 290,align:'center'}
				],
				rowNum : 10,//一頁顯示多少條
				rowList : [ 10, 20, 30 ],//可供用戶選擇一頁顯示多少條
				pager : '#pager2',//表格頁腳的占位符(一般是div)的id
				mtype : "post",//向后台請求數據的ajax的類型。可選post,get
				viewrecords : true,
				caption : "JSON Example"//表格的標題名字
			});
	$("#list2").jqGrid('navGrid','#pager2',{add:false,edit:false,del:false,search:false,refresh:false});
	$("#list2").jqGrid('navButtonAdd','#pager2',{
		caption: "Columns",
		title: "Reorder Columns",
		onClickButton : function (){
			$("#list2").jqGrid('columnChooser');
		}
	});

	$("#list2").jqGrid("setGroupHeaders",{
		useColSpanStyle: true,
		groupHeaders:[
			{ startColumnName:"id",numberOfColumns:5,titleText:"學生信息"}

		]
	});
	$("#list2").jqGrid("setGroupHeaders",{
		useColSpanStyle: true,
		groupHeaders:[

			{ startColumnName:"id",numberOfColumns : 2, titleText:"學號和姓名"},
			{ startColumnName:"age",numberOfColumns : 2, titleText:"年齡和愛好"},


		]
	});
	

}

　　這里有個小問題，如果有引入bootsrap的css可能會出現表頭不居中的問題

問題是出在這里

頁面上加個樣式搞定

    th {
        text-align: center;
    }