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. 

Javascript代码  

1. var gridConfig={  
2.     /* ... 略去其他属性设置 ...*/  
3.     loadURL : 'studentsList.servlet',  
4.     remotePaging : false   
5.   
6. };  

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

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


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


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

Javascript代码  

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

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

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

Java代码  

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

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

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


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

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



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



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


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