GT-Grid 1.0 基础教程(四)

GT-Grid 1.0 基础教程(四)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里


第四章: 服务端数据的加载(上)

关于"服务端数据的加载" 我将分上下两次为大家讲解.
"上" 中 将只关注 如何从服务端加载数据. 而不关注向服务端提交了什么数据.
我这么说大家可能有点迷惑, 换个说法:
"上"中将只介绍如何创建一个"数据从服务端取得,但是分页是在客户端进行"的列表---"远程加载数据,客户端分页的只读列表".
(注: 本文中 "远程" 和 "服务端"往往是指一个东西.)

还是那句话:
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo3.html"另存为"mydemo4.html".
OK,开始.


=========================================


首先,修改代码, 因为我们是从服务端取数据,那么客户端就没必要定义数据了(数据集还是要保留的),
所以 删掉关于 "var data1" 的一切. 将数据集定义dsConfig中的 data 属性删除.

然后 为 grid添加两个属性 :
1 是  loadURL : '.....'  值为一个合法的 可访问到的url,本例中是我写的一个servlet的url
2 是  remotePaging : true/false 时候使用远程分页. 如果是客户端分页 要设置成 false, 如果是服务的分页 要写成false.

var gridConfig={
	/* ... 略去其他属性设置 ...*/
	loadURL : 'studentsList.servlet',
	remotePaging : false 

};

也许有人会问, 上一章将的也是客户端分页, 但是并没有写 "remotePaging : false "啊.
这是因为, 当loadURL==null(默认为null)时 GT-Grid 会强制把分页模式设置成"客户端分页",即remotePaging=false.

关于页面的改动 就到此为止了, 下一步该是服务端的写发了.


=========================================


GT-Grid本身是对服务端使用的技术没有任何限制的, 可以使用java php .net ror ....
在这里我只举java的例子.
虽然对服务端技术没有限制, 但是GT-Grid对数据的传输格式是有要求的.
1 首先 服务端返回的必须是一个合法的 json对象序列化字符串.(以后简称json串)
2 这个字符串的格式如下:

	{
		data : [
			/* 以下为具体传输的数据 */
		   { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 },
		   { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89   , math :87 },
		   { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53   , math :62 }
		]
	}

这个应该还是很好理解的, 有一个data节点, data下就是数据.
与我们在客户端时写的数据差不多.
当然 返回的数据中还可以有其他的可选信息. 例如 pageInfo , exception 还有其他你自定义的节点.
更多知识以后再说.
现在只要记住 ,返回的json串中, 必须要有data节点,节点存放的就是列表要显示的数据.

明确以上信息之后, 我们还是来"造假" ,在服务端用手动拼装一个这个字符串.
在这个示例中, 我写了一个 叫StudentsList的servlet, 它对应的url为"studentsList.servlet".
它的doPost方法(GT-Grid默认的提交方法是post) 参考代码如下:

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		StringBuffer outData = new StringBuffer();
		outData.append("{");
		outData.append("data : [");
		outData.append("	{ no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 },");
		outData.append("	{ no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89   , math :87 },");
		outData.append("	{ no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53   , math :62 } ");
		outData.append("]");
		outData.append("}");
		PrintWriter out = response.getWriter();
		out.print(outData.toString());
		out.flush();
		out.close();
	}  

现在 把这个servlet和之前的mydemo.html 放到包含GT-Grid必要资源的 j2ee web应用中, 你就可以看到结果了.
(这个就不详细介绍了, 我相信大家还是知道的)

如果使用的是PHP ,那么可以将loadURL指向某个php文件,而那个文件只要可以 echo 出这个json串就可以了.


在实际系统中, 开发人员要做的就是把数据库里(当然你可以从其他地方取)的查询结果 (一个 map-list 或者 pojo-list )
转换成一个类似上例的 json串. 然后发送到客户端.

转换成json串的工作可以通过 各种第三方的json库来实现.
你可以到http://www.json.org 上去寻找更多的帮助.



注意,为了减低入门门槛, 我在这个示例中没有引入任何其他的问题.
在正常系统中, 文件编码, 文件路径等问题总是会困扰一些新手.
如果你是新手, 那么这些问题你可以参考我提供的"与后台结合的示例"中的完整代码 或者是找google帮忙.
我在这里就不多说了.



=========================================


这章就先讲到这里 , 最后成果的截图就不奉上了 因为看起来和 第三章的一样.
下一章,将讲解 "远程加载数据,远程分页的只读列表" 的实现.

评论

16 楼 FengShen_Xia 2008-09-10  

就是你web.xml里配置的url必须和你页面上loadURL : 'studentsList.servlet'要一致

15 楼 FengShen_Xia 2008-09-10  

报上面的错误，好像是servlet的url设置错了

14 楼 fins 2008-09-04  

grid.ajaxMethod = "POST" / "GET"

13 楼 fcw528 2008-09-03  

运行错误：
LOAD ERR ,
  XMLHttpRequest Status : 422

“GT-Grid默认的提交方法是post)”如何修改默认方法为“get”

12 楼 fins 2008-07-31  

XMLHttpRequest Status == 2 ??

我也不知道什么意思
好怪异的状态码啊

你在 servlet里设置断点 跟踪一下 看看请求是否已经成功发送

11 楼 49271743 2008-07-31  

第四章，  我建了servlet后，

loadURL  : 'StudentsList.servlet',

可是老弹出错误

XMLHttpRequest Status ：2

不知道是什么意思？

10 楼 fins 2008-07-22  

能不能具体说说出现什么错误了?

第4 第5章主要是讲解 原理 这里面的代码直接copy出去 确实不能成功

如果是 前三章的有问题 麻烦你能不能详细说一下 有什么错
我也好及时修正

谢谢了

9 楼 zhouzhichu 2008-07-22  

可见老兄的DOC远没有extremetable的易懂啊，至少按照你的操作不成功

8 楼 fins 2008-07-15  

具体的值是什么
你是在什么时机调用的??

是在 GT.Msg.Validator['default'] = GT.Msg.Validator.cn;之后吗?

另外 你为什么要直接调用读default???

7 楼 icool 2008-07-15  

msgKey传的是Validator键值对中的key

6 楼 fins 2008-07-15  

msgKey 传的是什么??

5 楼 icool 2008-07-15  

to nicksean
从远程取数据不一定就要使用远程分页：）

另外请教fins，对于GTMsg.Validator.default[msgKey]这条语句，IE报800A03F2错误是怎么回事？

4 楼 fins 2008-07-15  

没太看明白 我觉得我没写错啊


客户端分页 使用:
remotePaging : false   


服务端分页 使用:
remotePaging : true

3 楼 andybrier3 2008-07-15  

的确，小错误

2 楼 godson_2003 2008-07-15  

速度好快啊

注意休息 ^_^

1 楼 nicksean 2008-07-15  

var gridConfig={   
var gridConfig={   
    /* ... 略去其他属性设置 ...*/  
    loadURL : 'studentsList.servlet',   
    remotePaging : true    
  
}; 
 

服务端分页
remotePaging : true不是false 吧？