EXTJS 中的 Grid 分页问题

最新推荐文章于 2021-02-19 10:52:33 发布

kaihua_86

最新推荐文章于 2021-02-19 10:52:33 发布

阅读量989

点赞数

文章标签： extjs json stylesheet string header jsp

本文链接：https://blog.csdn.net/kaihua_86/article/details/4491587

版权

今天学习了 EXT 中的 Grid。主要是想要实现分页功能。先说一下分页功能实现的条件吧，数据必须要从后台动态获取（数据库，文件等等），不能使用静态数据（比如说：定义一个数组或 JSON 什么的，然后通过 MemoryProxy 取得，这样不行）。我是通过 HttpProxy 从一个 JSP 页面获取数据，显示在 Grid 中，然后实现分页功能。不过碰到一个问题：数据能得到，但 Grid 中没显示。仔细找了Ｎ遍，没觉得有什么错，就在快要放弃的时候，发现 FireBug 里的响应消息为：

{total:10, rows:[{id:0, no:'000', name:'000', age:'000'},{id:1, no:'001', name:'001', age:'001'},{id:2, no:'002', name:'002', age:'002'}]}
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不是 JSON 。多了一句，把 JSP 里的多余的语句删了，果然能正确显示了。爽啊！

虽然能显示出数据了，但是不怎么精确。总共10个数据，每页面显示3个，应该在第四页显示一个数据，但是第四页还是3个，这样就多了两个。最后决定在 JSP 中加入几个控制语句。完整代码如下：

aabbcc.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{font-size:12px; }
</style>
<link rel="stylesheet" type="text/css" href="resource/resources/css/ext-all.css" />
<script type="text/javascript" src="resource/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="resource/ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function() {
//var data={total:5,rows:[{id:1, no:"001", name:"001", age:"001"},
//      {id:2, no:"002", name:"002", age:"002"},
//      {id:3, no:"003", name:"003", age:"003"},
//      {id:4, no:"004", name:"004", age:"004"},
//      {id:5, no:"005", name:"005", age:"005"}
//  ]};
   //Ext.Msg.alert("message",data);
var sm = new Ext.grid.CheckboxSelectionModel();
var jsr=new Ext.data.JsonReader({
  //totalProperty:"total",
  root:"rows",
  id:"id", type:"int"
},[
  {name:"no", type:"string", mapping:"no"},
  {name:"name", type:"string", mapping:"name"},
  {name:"age", type:"string", mapping:"age"}
]);

var store=new Ext.data.Store({
  proxy:new Ext.data.HttpProxy({url:"test.jsp"}),
  reader:new Ext.data.JsonReader({
   root:"rows",
   totalProperty:"total"
  },[
   {name:"no"},
   {name:"name"},
   {name:"age"}
  ])
});
//store.load();

</script>

</head>
<body>
<div id="grid"></div>
</body>
</html>

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

test.jsp

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

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<%
int start=Integer.valueOf(request.getParameter("start"));
int limit=Integer.valueOf(request.getParameter("limit"));

System.out.print(start); System.out.print(limit);
System.out.println();

//int total=3;
  int total;

if (start+limit>10) {
  total=10-start;
} else {
  total=limit;
}

String json="{total:10, rows:[";

for (int i=start; i<start+total; i++) {
  json+="{id:"+i+", no:'00"+i+"', name:'00"+i+"', age:'00"+i+"'}";
  if (i!=start+limit-1)
   json+=",";
}
json+="]}";

System.out.println(json);
response.getWriter().write(json);

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

kaihua_86

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXTJS 中的 Grid 分页问题

今天学习了 EXT 中的 Grid。主要是想要实现分页功能。先说一下分页功能实现的条件吧，数据必须要从后台动态获取（数据库，文件等等），不能使用静态数据（比如说：定义一个数组或 JSON 什么的，然后通过 MemoryProxy 取得，这样不行）。我是通过 HttpProxy 从一个 JSP 页面获取数据，显示在 Grid 中，然后实现分页功能。不过碰到一个问题：数据能得到，但 Grid
复制链接

扫一扫