2008年8月26日星期二

JQuery Grid插件Flexigrid使用

Flexigrid界面风格类似于ext,是一个比较强大的ajax数据显示grid插件,在此地址下载:http://www.webplicity.net/flexigrid/
下载加入工程,官方的例子说的很明白了,这里就不多说了。
需要注意的是在使用json返回时必须按照下面的格式拼装:
{
"total":200, //数据总数
"page":2, //页码(第几页)等等,相关参数可以在他的源码中找到
"rows":[
{"id":"1","cell":["a","b","c","e"]},
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
{"id":"5","cell":["a","b","c","e"]},
{"id":"6","cell":["a","b","c","e"]},
{"id":"7","cell":["a","b","c","e"]},
{"id":"8","cell":["a","b","c","e"]},
]}

返回json对象中(也就是个字符串)"row" 和其对应的数据必须按照此格式输出,要不然页面会没办法展现数据,使用下面的方法:


public void getData() {
int page = Integer.parseInt(request.getParameter("page"));
int totalUser = DBManager.getTotalUser();

List userList = DBManager.getUsers();

Map map = new HashMap();
map.put("page", page);
map.put("total", totalUser);

List mapList = new ArrayList();

for (int i = 0; i < userList.size(); i++) {
User u = userList.get(i);
Map cellMap = new HashMap();
cellMap.put("id", i);
cellMap.put("cell", new Object[] { u.getId(), u.getUserName(),u.getUserPass() });
mapList.add(cellMap);
}

map.put("rows", mapList);

JSONObject object = new JSONObject(map);
System.out.println(object.toString());


}

mapList用来存放数据,但是里面的每条数据都是一个map,map必须有一个键为“id”和对应的值,和键为“cell”和对应的值,而cell对应就是真正的数据了,这里是user,而且cell的值队必须是object[]数组,可以把user的各个属性值放进去,但是这样
cellMap.put("cell",u)是不行的,不能直接对应user。而页面取值其实是根据这个object数组的索引来取的,这要注意。其他很简单了。

标签:

0 条评论:

发表评论

订阅 博文评论 [Atom]

<< 主页