jqury中的jqgrid开发小总结

[size=medium]最近项目用到jqgrid来展现数据,小小总结一下,备忘.

var postData = {};
var jqdefaultGridConfig = {
	mtype : 'POST',//ajax提交方式
	datatype : 'json',//表格可以被接受的数据类型：xml，xmlstring，json，local，function 
//此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
	shrinkToFit : false,
	autoload : false,//是否自动加载
	rowNum : 20,//设置表格中显示的记录数，参数会被自动传到后台。
//一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
	rowList : [ 10, 20, 50 ],
//指定分页栏对象，必须为一个有效的html元素。<div id="mytablepagerbar"></div>
	pager : '#mytablepagerbar',
	viewrecords : true,//是否要显示总记录数
	// sortable : true,//是否可排序
	multiselect : true,//定义是否可以多选
	autowidth : true,
	autoHeight : true,
	postData : postData,//参数
	jsonReader : {
		root : "rows", // json中代表实际模型数据的入口
		page : "page", // json中代表当前页码的数据
		total : "total", // json中代表页码总数的数据
		records : "records", // json中代表数据行总数的数据
//如果为false,则传到页面的数据不需要按照colModel的顺序来传递
		repeatitems : false
	},
	//对显示列属性的设置，是一个数组对象。常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable? 是否可以排序
	colModel : getModel(),
	url : contextPath
			+ "",
	ondblClickRow : function(id) {// 双击编辑
		if (id && id !== lastFlag) {
					editrowandrefresh(id);
					lastFlag = id;
		} else {// 选择行不是之前编辑行,就撤销之前编辑行
			jQuery('#mytable').jqGrid('restoreRow',
					lastFlag);
		}
	},
	caption : '考核表(双击行编辑,点击\"Enter\"键(回车键) 保存)'//标题
};
jQuery('#mytable').jqGrid(jqdefaultGridConfig);

其中,jsonReader 属性中的 repeatitems 参数,如果为true的话,接收的值一定要按照colModel的顺序,用false比较好一点;传到页面的json,开头是{"page":1,"total":1,"records":11, "rows":[{data}]};如果配置sortable,是否可排序为true的话,在colModel中frozen : true,设定固定就不能设置;

$('#postInt').change(function(){
		var url= contextPath
		+ '***.action?postInt='+$('#postInt').val();
		$.getJSON(url,function(exeBeanOfjson) {
	    	 kpiList=exeBeanOfjson;
	    	 $('#mytable').GridUnload();
	    	 jqdefaultGridConfig.colModel=getColModel();
	    	 $('#mytable').jqGrid(jqdefaultGridConfig);
	    	 search();
	    });
	});

如果postInt选择项的值有变化,就重新加载jqgrid页面,组成新的列表头,再加载数据,动态加载整个页面.

http://trirand.com/blog/jqgrid/jqgrid.html
jqgrid Demos
[/size]