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帮忙.
我在这里就不多说了.



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


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

评论

36 楼 xiuying 2009-05-26  

请问：var colsConfig = [
{ id : 'no'      , header : "学号" , width : 50, isCheckColumn : true},
{ id : 'name'    , header : "姓名" , width : 100},
{ id : 'age'     , header : "年龄" , width : 50},
{ id : 'gender'  , header : "性别" , width : 50 ,
renderer : GT.Grid.mappingRenderer(  {'U': '未知' , 'M':'男', 'F':'女'} , '未知' )
},
{ id : 'english' , header : "英语" , width : 60 , align :'right' },
{ id : 'math'    , header : "数学" , width : 60 , align :'right' }
];

这个列头能否动态的写入？

35 楼 xiuying 2009-05-25  

fields :[
{name : 'no'     ,  type: 'int'    },
{name : 'name'      },
{name : 'age'    ,  type: 'int'    },
{name : 'gender'    },
{name : 'english',  type: 'float'  },
{name : 'math'   ,  type: 'float'  }
],

还有请教一下能否把类型省略？？？？

34 楼 xiuying 2009-05-25  

转换成json串的工作可以通过 各种第三方的json库来实现.
你可以到http://www.json.org 上去寻找更多的帮助.
===================================
我获得json没有用第三方，也没用你提供的那个类。
报错的时候就是把页面alert出来。
我的前台调用是：
loadURL : 'getJson.htm',
remotePaging : false,

后台：

@RequestMapping("/getJson.htm")
public String getJson(HttpServletRequest request, ModelMap model){
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("}");  
    model.addAttribute("json", outData.toString());
return "index";
}

总是得不到数据是怎么回事呢?
请问你这个loadURL后的数据是从request中去吗？

33 楼 zhao_j_long 2009-03-25  

返回错误：
LOAD Failed!
Exception :
XMLHttpRequest Status : 422

在.html中设置为
loadURL : 'http://localhost:3000/students/list'

从浏览器中访问http://localhost:3000/students/list ，返回值为：
{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 } ]}
和教程中的一样。不知错误在哪里。注：我用rails2.2做的后台。

32 楼 zcs_84 2009-02-13  

问题搞定 谢谢了

31 楼 zcs_84 2009-02-12  

fins 写道

是否是 返回的json串格式有错呢?
能否贴一下前台得到的json串 ?
(请从http response中查看)

我前台json是

fins 写道

是否是 返回的json串格式有错呢?
能否贴一下前台得到的json串 ?
(请从http response中查看)

我json在后台打印的是这样的一个字符串。
{"data":
  [{"age":11,"english":33.0,"gender":"f","math":44.0,"name":"jone","no":1},   {"age":11,"english":33.0,"gender":"f","math":44.0,"name":"jone","no":1}]}

我前台的 结果和你上面的例子一样的

var dsConfig= {
//data : data1 ,
fields :[
{name : 'no'     ,  type: 'int'    },
{name : 'name'      },
{name : 'age'    ,  type: 'int'    },
{name : 'gender'    },
{name : 'english',  type: 'float'  },
{name : 'math'   ,  type: 'float'  }
]
};

var colsConfig = [
{ id : 'no'      , header : "学号" },
{ id : 'name'    , header : "姓名" },
{ id : 'age'     , header : "年龄" },
{ id : 'gender'  , header : "性别" },
{ id : 'english' , header : "英语" },
{ id : 'math'    , header : "数学" }
];

var gridConfig={
id : "grid1",
loadURL : '${ctx}/device/reader!getList.action',
remotePaging :false,
width: "700",  //"100%", // 700,
height: "330",  //"100%", // 330,
dataset : dsConfig ,
columns : colsConfig ,
container : 'grid1_container',
toolbarPosition : 'bottom',
toolbarContent : 'state'
};

var mygrid=new GT.Grid( gridConfig );

GT.Utils.onLoad( function(){
mygrid.render();
} );

30 楼 fins 2009-02-12  

是否是 返回的json串格式有错呢?
能否贴一下前台得到的json串 ?
(请从http response中查看)

29 楼 zcs_84 2009-02-11  

zcs_84 写道

我是按你文档来做的 1.去掉了数据集定义dsConfig中的 data 属性 ，也删掉了"var data1"的定义2 也添加了loadURL和remotePaging属性3.action中也传到jsp也没一个json字符串但是 在也没实现的时候 总是报parentNode为空 当数据为静态的时候是正常的这是为什么呀

我后台json是可以得到数据的 loadURL的路径也是对的 可以到action中去。但是返回jsp页面的时候 就是抛异常

28 楼 zcs_84 2009-02-11  

我是按你文档来做的
1.去掉了数据集定义dsConfig中的 data 属性 ，也删掉了"var data1"的定义
2 也添加了loadURL和remotePaging属性
3.action中也传到jsp也没一个json字符串
但是 在也没实现的时候 总是报parentNode为空 当数据为静态的时候是正常的
这是为什么呀

27 楼 ztj820807 2008-12-27  

我的怎么出现这样的错误：
弹出窗口是 Stack Overflow at line:1
哪位帮忙给看一下，非常感激。

26 楼 ShingU 2008-12-15  

不是的。

我后台处理是专门有一个类的。没你那个写的好。

我现在也大致知道我的问题出在哪里了。不过，要解决这个问题，估计要将我的那个类重写一边了。:(

25 楼 fins 2008-12-15  

你后台使用 我提供的 GridServerHandler 类了吗

能不能说说你的具体做法

24 楼 ShingU 2008-12-15  

刚才试了一下，在后台处理中，将异常内容写入exception。不过，当出现异常时，跳出的警告框的内容只有：XMLHttpRequest Status : 500

没有我想要的那样的异常。

23 楼 ShingU 2008-12-15  

嗯，谢谢，明白其中的区别了。

22 楼 fins 2008-12-14  

ShingU 写道

fins指的是JSON结构中的
{
data:{...},
exception:...
}

吧？

我在另一个地方看到过exception，就是：
    loadFailure : function(respD){  
        alert(' LOAD Failed! '+'\n Exception : \n'+(respD[this.CONST.exception]||''));  
    }

不知道两者有什么区别？

另外，在真正查询之前，我们无法预料会遇到什么错误，怎么写是个问题啊。

   你的意思是 希望GT能够自动识别出 你所不知道的问题???? 这个肯定是做不到了
你可以捕捉各种异常 然后来决定显示什么错误信息啊 .

loadFailure  是用来显示  {
data:{...},
exception:...
}

中的exception信息的.

也就是说 你后台返回什么异常 前台就会alert什么异常.
如果你不希望alert 而是希望采用自己喜欢的方式来做 那么可以重写这个 loadFailure  函数.

21 楼 ShingU 2008-12-14  

fins指的是JSON结构中的
{
data:{...},
exception:...
}

吧？

我在另一个地方看到过exception，就是：
    loadFailure : function(respD){  
        alert(' LOAD Failed! '+'\n Exception : \n'+(respD[this.CONST.exception]||''));  
    }

不知道两者有什么区别？

另外，在真正查询之前，我们无法预料会遇到什么错误，怎么写是个问题啊。

20 楼 fins 2008-12-14  

你只要在返回的 数据结构中 加入 exception信息就可以了

具体的 文档里有说明 你看一下吧

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

管理员  重复提交的问题 快解决吧 呵呵

19 楼 fins 2008-12-14  

你只要在返回的 数据结构中 加入 exception信息就可以了

具体的 文档里有说明 你看一下吧

18 楼 ShingU 2008-12-14  

加载数据时，由于某些原因，比如数据库连接断开，查询不到任何数据，表不存在等，能否作出相应的提示？

17 楼 ShingU 2008-12-12  

昨天从服务器获取数据一直不成功。今天终于弄成功了。

问题出在，我查询出来的字段名都是大写的，而我在代码中写的是小写，以致于程序找不到数据了。