文档章节

为JqGrid添加dwr支持,终版!JqGrid零入侵。

黄正文
 黄正文
发布于 2012/12/25 17:14
字数 542
阅读 1041
收藏 17

前面的改进方式,或多或少对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>

 

© 著作权归作者所有

黄正文
粉丝 14
博文 25
码字总数 14020
作品 0
巴南
程序员
私信 提问
新版为JqGrid添加dwr支持

前面的为JqGrid添加dwr支持涉及到了修改jqgrid代码的问题,不方便进行升级。 现采用另外一种方法。缺点是不能触发一些事件,如开始加载 ,加载完成,还有loading标志,对loadonce及其它一些支...

黄正文
2012/12/16
222
0
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
1K
8
解决jqGrid新增或编辑记录保存成功但提示错误的问题

在上一篇文章《》中,我们详细说明了一下如何创建一个可以使用增删改操作的jqGrid。 但是在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改...

yonge
2009/12/14
5.9K
1
关于dwz使用过程中的3个问题,新手勿拍

@张慧华 你好,想跟你请教个问题: 1.如何查看当前的dwz版本是多少?在哪看? 2.为什么我每次从leftside点击链接的时候,都要点两下?第一次是把链接加载到navTab,但是却没有内容显示,第二...

Snakecn21
2012/11/16
8.1K
13
jQuery表格插件jqgrid加载数据的问题

最近的项目使用jqgrid来显示数据, 遇到个问题, 需求:页面初始化时表格是空的,只要显示列明就好,这个通过不指定url实现了。 加载数据是跟用用户输入到DB查询,返回数据集。尝试手动将数据...

jay_
2012/01/20
3.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

Phpstorm2018 永久激活

1、安装phpstorm,安装包请自行官网下载 http://www.jetbrains.com/phpstorm/download/ 2、下载JetbrainsCrack.jar文件,存放至你的phpstorm执行文件同级目录下 下载JetbrainsCrack.jar 提取...

happyfish319
41分钟前
8
0
谈一谈Android进程间通信的几种方式

###来看一下Android中除了AIDL还有哪些进程间通信的方式: 1、Bundle Bundle实现了Parcelable,所以在Android中我们可以通过Intent在不同进程间传递Bundle数据。 但是在Intent 传输数据的过程...

二营长的意大利炮手
42分钟前
9
0
互联网薪资“高开低走”,你的能力是否真的可以匹配高薪?

对于国内外主流互联网大厂,技术出身似乎已经成为各大掌门人的必备标签。谷歌 CEO 桑达尔·皮查伊、马克·扎克伯格、李彦宏、马化腾、雷军等等皆为技术人出身,都曾参与了公司内部重要产品的...

Java技术剑
43分钟前
12
0
java 多线程

线程声明周期 线程的五个状态:新建,就绪,运行,阻塞,死亡。 其中就绪和运行两个状态客户互相转换,但运行到阻塞,阻塞到就绪,只能单向转换。 刚new出的线程就是【新建】状态,调用start...

雷开你的门
45分钟前
15
0
构造器Constructor是否可被overrid

构造器不能被重写,不能用static修饰构造器,只能用public private protected这三个权限修饰符,且不能有返回语句。

无名氏的程序员
49分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部