爲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>