jqgrid加载数据

项目中加载数据采用jqgrid来加载表格数据。

之前没有接触过jqgrid，jqGrid 是一个用来显示网格数据的jQuery插件以ajax的方式和服务器端通信，想要了解这个插件就要有一定的jquery知识。jqgrid有很多方法，功能也是比较强大的。网上也有很多文章来讲解jqgrid，我这里就简单的讲一下我在项目中用到的jqgrid的一些知识。

jQuery("#phaseTypeList").jqGrid({
		url:'<c:url value="/bid/findSectionDetail.action"/>',
		datatype: "json",
		height: 250,
		   colNames:['行号', '物料编码', '物料名称','规格型号','图号','材质','数量','单位','需求日期','需求单位','单价（万元）','承诺交货日期','小计（万元）','报价表'],
		   colModel:[
		   {name:'id',index:'id',width:"45",align:"center"},
		   {name:'materialCode',index:'materialCode',width:"100",align:"center"},
		   {name:'materialName',index:'materialName',width:"260"},
		   {name:'materialModel',index:'materialModel',width:"120",align:"center"},
		   {name:'pictureNum',index:'pictureNum',width:"140",align:"center"},
		   {name:'qualityName',index:'qualityName',width:"100",align:"center"},
		   {name:'needNum',index:'needNum',width:"50",align:"center"},
		   {name:'measureUnit',index:'measureUnit',width:"90",align:"center"},
		   {name:'needDate',index:'needDate',width:"150",align:"center",formatter: 'date', formatoptions: {srcformat:'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'}},
		   {name:'needUnit',index:'needUnit',width:"140"},
		   {name:'unitPrice',index:'unitPrice',width:"160",align:"center",editrules:{number:true}},
		   {name:'submitTime',index:'submitTime',width:"150",align:"center"},
		   {name:'sum',index:'sum',width:"120",align:"right"},
		   {name:'priceSheet',index:'priceSheet',width:"90",align:"center"}
		   ],
			   	rowNum:10,
			   	rowList:[10,20,30],
			   	pager: '#userPager',
			   	sortname: 'id',
			   	width:'960',	   		   	
			   	height: 'auto',
			   	cellEdit: true,
			   	resize:false, 
			   	multiselect: false, // 多选
			   	hidegrid: false, // 隐藏
			       viewrecords: true,
			      forceFit: true,
			       jsonReader: {
		      		root: "rows",
		      		page: "page",
		     		total: "total",
		     		records: "records", 
		        	repeatitems : false
		     	},
		     	loadError : function(xhr,st,err) {
		     		alert('err:' + err+"|"+xhr+"|"+st);
		        	$("#tblMasterMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
		    	},
			gridComplete:function(){
			},
			loadComplete : function(xhr){
		       	if (window.parent && window.parent.TuneHeight && typeof window.parent.TuneHeight=='function') {
		           	  window.parent.TuneHeight('frame' , 'frame');
		      	       }
		      },
			    caption:"行"
		});

这里面需要讲解的属性不过在modelName中 editrules是来校验这一列的值是否合理，也有很多的校验属性这个可以通过jqgrid的api文档来获得。

还有,formatter: 'date', formatoptions: {srcformat:'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'} 这是把时间格式化为yyyy-m-d h:m:s的格式

使用jqgrid的时候在IE8以上版本如果拖动某列后，鼠标向下滑动如果出现grid下面出现大片的空白，就添加forceFit: true这个属性，设置以后就不会出现拖动列gird下面出现空白了，这个属性的意思就是调整列宽度不会改变表格的宽度。

jqgrid的分页也需要后台注册一些参数比如page页数等分页参数，在执行分页的时候调用jqgrid的onPaging事件，我在博客中讲的都是一些jqgrid的基本内容，没有特殊要求的表格，这些内容就可以搞定。

http://blog.csdn.net/hurryjiang/article/details/7551477这篇博客的讲了非常详细的jqgrid参数。