JqGrid實現水平滾動條

這幾天由於業務需求，用到了jqgrid，用起來感覺很強大，提供了豐富的功能。也碰了不少壁。

問題：對於表字段少的，就直接用無影響，但是有的表字段很多，就導致顯示起來很別捏，如圖：

默認情況下是沒有開啓水平滾動條的，也就是說無論有多少字段，都會顯示在這一屏，這豈不是太操蛋？

解決：還好，官方提供了屬性開啓橫向滾動條，通過翻閱官方文檔，發現通過設置這兩個屬性：

shrinkToFit:false,  

autoScroll: true, 

$("#grid-table").jqGrid({  
		url:'${ctx}/excel.do?method=getList',
	    datatype: 'json',     
	    mtype:'post',
	    colNames:['建設名稱','日期','設計單位','開工日期','建設地址','建設單位','發證機關','監理單位','竣工日期','證書編號','工程內容','施工單位'],     
	    colModel:[
	        //{name:'rowindex',index:'rowindex', width:40,align:'center'},     
	        {name:'jsmc',index:'jsmc', width:320,sortype:String},    
	        {name:'rq',index:'rq', width:80},
	        {name:'sjdw',index:'sjdw', width:170},
	        {name:'htkgrq',index:'htkgrq', width:80},
	        {name:'jsdz',index:'jsdz', width:150},     
	        {name:'jsdw',index:'jsdw', width:150},     
	        {name:'fzjg',index:'fzjg', width:100},       
	        {name:'jldw',index:'jldw', width:150},
	        {name:'htjgrq',index:'htjgrq', width:80},
	        {name:'zsbh',index:'zsbh', width:90},
	        {name:'gcnr',index:'gcnr', width:90},
	        {name:'sgdw',index:'sgdw', width:150}
	     ],    
	    imgpath: '',     
	    rowNum:50, 
		rowList:[50,100,150],   
		pager: "#grid-pager",  
	    altRows: true, 
	    rownumbers:true,
		multiselect: false,  
		multiboxonly:true,
		viewrecords: true,
		pagerpos:'left',
		sortorder: "asc",     
		height: gridHeight,
		autowidth:true,
		shrinkToFit:false,  
		autoScroll: true, //開啓水平滾動條
		postData:{type:type},
		loadComplete : function() {
			var table = this;
			setTimeout(function(){
				updatePagerIcons(table);
			}, 0);
		},
		recordtext: " 顯示第 {0} - {1} 項紀錄，  共 {2} 項",
	    emptyrecords: "當前沒有對應記錄信息",
		loadtext: "賣力加載中...",
		pgtext : " {0}頁 ，共 {1} 頁"
	});

接着還要添加css樣式：

 <style> 
 	.ui-jqgrid .ui-jqgrid-bdiv { 
 	    border-top: 1px solid #E1E1E1; 
 	    overflow-x: auto; 
 	} 
 	.frozen-div, .frozen-bdiv {
 	    background-color: #E4E6E9;/*與網頁背景色一致*/ */
 	} 
 </style> 

 

效果如下：