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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!