为JqGrid添加dwr支持，终版！JqGrid零入侵。

前面的改进方式，或多或少对JqGrid源代码有入侵。

下面提供一种优化后的最佳实践，不会污染源代码，而且可以完全重新定制逻辑。

话不多说，上代码

ObjectTemplate.js jqgrid参数模板，有了它，会去除大部分页面中的重复代码

var ObjectTemplate = {};
ObjectTemplate.jsonReader = {
		root : "rows",
		page : "page",
		total : "total",
		records : "records", // 总记录数
		repeatitems : false
	// 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
	};
ObjectTemplate.formatePostData = function(postData) {// 在发送数据前进行一次预处理
	var formatedPostData = [];
	// 此部分扫描表定义中的列，自动添加参数
	var propertys = [];
	for (index = 0; index < this.p.colModel.length; index++) {
		if (this.p.colModel[index].index != null) {
			propertys[propertys.length] = this.p.colModel[index].index;
		}
	}
	formatedPostData[0] = propertys;
	for ( var index = 0; index < postData.length; index++) {
		formatedPostData[formatedPostData.length] = postData[index];
	}
	formatedPostData[formatedPostData.length] = postData.sidx;
	formatedPostData[formatedPostData.length] = postData.sord;
	formatedPostData[formatedPostData.length] = postData.page;
	formatedPostData[formatedPostData.length] = postData.rows;
	var searchCodition = "";
	if (postData._search) {
		switch (postData.searchOper) {
		case 'eq':
		case 'bw':
		case 'bn':
		case 'ew':
		case 'en':
		case 'cn':
		case 'nc':
		case 'nu':
		case 'nn':
		case 'in':
		case 'ni':
		default:
			searchCodition = " like '%" + postData.searchString + "%'";
		}
		formatedPostData[1] += " and " + postData.searchField + searchCodition;
	}
	var unSouportArg = {};
	unSouportArg.filters = postData.filters;
	unSouportArg.nd = postData.nd;
	return formatedPostData;
};
ObjectTemplate.gridSetting = {
	altRows : true,//设置为交替行表格
	autoencode : true,//当设置为true时，对来自服务器的数据和提交数据进行encodes编码。如< 将被转换为&lt;
	serializeGridData:ObjectTemplate.formatePostData,
	height : "auto",
	width : "300",//初始时，表格的宽度，如果设置了随窗口改变自动适应宽度，该值实效
	autowidth : true,
	sortname : 'id',
	sortorder : 'asc',
	datatype : "json",
	rowNum : 10,
	rowList : [ 10, 20, 30 ],
	viewrecords : true,
	multiselect : true,
	multiboxonly : false,
	pager : "#gridPager",
	jsonReader : ObjectTemplate.jsonReader,
	caption : "JqGrid模板标题"
};
ObjectTemplate.pagerSetting = {
	edit : true,
	add : true,
	del : true,
	search : true
};
ObjectTemplate.getDwrArgs = function (postData)
{
	var dwrArgs = [];
	if($.isFunction(this.p.serializeGridData)){
		dwrArgs = this.p.serializeGridData.apply(this,[postData]);
	}
	var ts = this;
	var dwrSettings = {
		preHook:function(){
			ts.grid.hDiv.loading = true;
			if(ts.p.hiddengrid) { return;}
			switch(ts.p.loadui)
			{
				case "disable":
					break;
				case "enable":
					$("#load_"+$.jgrid.jqID(ts.p.id)).show();
					break;
				case "block":
					$("#lui_"+$.jgrid.jqID(ts.p.id)).show();
					$("#load_"+$.jgrid.jqID(ts.p.id)).show();
					break;
			}
		},
		postHook:function(){
			ts.grid.hDiv.loading = false;
			switch(ts.p.loadui) {
				case "disable":
					break;
				case "enable":
					$("#load_"+$.jgrid.jqID(ts.p.id)).hide();
					break;
				case "block":
					$("#lui_"+$.jgrid.jqID(ts.p.id)).hide();
					$("#load_"+$.jgrid.jqID(ts.p.id)).hide();
					break;
			}
		},
		async : true,
		httpMethod : "POST",
		timeout : "3000",
		callback : function(data) {
			ts.addJSONData(data);
		}
	};
	dwrArgs[dwrArgs.length] = dwrSettings;
	return dwrArgs;
}

页面调用方式

$(function() {
		$("#gridTable").jqGrid($.extend(ObjectTemplate.gridSetting,{
			postData : ["true"],
			datatype : function(postData) {
				var dwrArgs = ObjectTemplate.getDwrArgs.apply(this,[postData]);
				UserService.dwrFunForJqGrid.apply(this, dwrArgs);
			},
			colNames : [ '编号', '用户名' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 560
			}, {
				name : 'name',
				index : 'name',
				width : 590
			} ]
		}));
		$("#gridTable").jqGrid('navGrid', "#gridPager",ObjectTemplate.pagerSetting);
		$(window).resize(function() {$("#gridTable").setGridWidth($("#container").width());});
	});
</script>

 

html标签

<div id="container">
		<table id="gridTable"></table>
		<div id="gridPager"></div>
	</div>