如何始终隐藏jqgrid的横向滚动条

最新推荐文章于 2021-08-15 11:41:01 发布

最新推荐文章于 2021-08-15 11:41:01 发布 · 906 阅读

文章标签：

#javascript #ui #c# #ViewUI

jqgrid 专栏收录该内容

1 篇文章

订阅专栏

本人最近项目中需要实现这样一个场景，在jqgrid渲染一个表格时，在最后一行通过footerrow添加一个汇总行：代码和效果图如下:

<html>
  <head>
	<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />

	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
	<script src="js/jquery.layout.js" type="text/javascript"></script>
	<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
	</script>
	<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="js/jquery.tablednd.js" type="text/javascript"></script>
	<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
	<script src="js/ui.multiselect.js" type="text/javascript"></script>
	<script>
	jQuery(function(){
	
		var mydata = [
			{id:"1",invdate:"2010-05-24",name:"test11111111111111111111111111111111111111111111111",note:"note",tax:"10.00",total:"2111.00"} ,
			{id:"2",invdate:"2010-05-25",name:"test11111111111111111111111111111111111111111111111",note:"note2",tax:"20.00",total:"320.00"},
			{id:"3",invdate:"2007-09-01",name:"test11111111111111111111111111111111111111111111111",note:"note3",tax:"30.00",total:"430.00"},
			{id:"4",invdate:"2007-10-04",name:"test11111111111111111111111111111111111111111111111",note:"note",tax:"10.00",total:"210.00"},
			{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
			{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
			{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
			{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
			{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
			{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
			{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
			{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
		];
		jQuery("#list47").jqGrid({
			data: mydata,
			datatype: "local",
			height: 150,
			rowNum: 10,
			autowidth:true,
			//forceFit:true,
			rowList: [10,20,30],
		   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
		   	colModel:[
		   		{name:'id',index:'id', width:60, sorttype:"int"},
		   		{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
		   		{name:'name',index:'name', width:100},
		   		{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
		   		{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},		
		   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
		   		{name:'note',index:'note', width:150, sortable:false}		
		   	],
		   	pager: "#plist47",
		   	rownumbers:true,
		   	rownumWidth:40,
		   	viewrecords: true,
		   	caption: "Manipulating Array Data",
		   	footerrow:true,
		}).jqGrid("setLabel","rn","SN");
	})
	</script>
  </head>
  <body>
	<table id="list47"></table>
	<div id='plist47'></div>
  </body>
</html>

这个时候，如果表格的内容超过其宽度，会出现一个问题，在表格普通行和正常行之间会出现一个滚动条，表现的非常难看，如附件，要解决这个办法，我们可以用到jqgrid的一个配置项：

forceFit boolean 当为ture时，调整列宽度不会改变表格的宽度。当shrinkToFit 为false时，此属性会被忽略默认为false

将forceFit值设置为true,会解决该问题。