JqGrid实现水平滚动条

最新推荐文章于 2020-05-12 09:31:07 发布

原创最新推荐文章于 2020-05-12 09:31:07 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #前端 #html

前端专栏收录该内容

7 篇文章

订阅专栏

这几天由于业务需求，用到了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>

效果如下：