0. 下载
1) JsonViewer
json字符串格式化查看及校验工具 Json-Viewer.zip
2) 此示例的项目源码源码(MyEclipse2013项目)
1. 将div渲染成tabs
1) tabs
The tabs display a collection of panel.
It shows only one tab panel at a time.
Each tab panel has the header title and some mini button tools,
including close button and other customized buttons.
即 浏览器标签, 同一个浏览器上开多个网页.
2) 渲染
<div class="easyui-tabs" fit="true">
<div title="用户管理">xxxxxxx</div>
</div>
注: fit="true" 填满parent, 随父窗口的改变而改变
2. 去掉border(重叠的border颜色更深)
<div class="easyui-tabs" fit="true" border="0">
3. 在 chrome中出现滚动条的处理
<div region='center' style="overflow:hidden;">
4. 将 <table>渲染成datagrid
推荐使用 jQuery的方式
<div class="easyui-tabs" fit="true" border="0"> <div title="用户管理"> <table id="datagrid"></table> </div> </div>
var datagrid;
$(function() {
$("#datagrid").datagrid({
......
});
});
5. datagrid参数说明
$("#datagrid").datagrid({
// ------- requied
url : "userListServlet", // 从指定URL获取数据
// ------- optional
title : "datagrid title",
iconCls : "icon-save",
pagination : true, // 分页工具条
pageSize : 10, // 每页显示多少条数据
pageList : [ 10, 20, 30 ], // 下拉框,可选的pageSize大小
fit : true, // true: datagrid填满parent,不论数据有多少;
fitColumns : true, // true: 不出现滚动条,自适应parent,列不多时使用
nowarp : false, //单元格内容过多时, true:不换行,一行显示;false:换行显示
border : false,
sortName : "name", // 按哪个字段排序
sortOrder : "desc", // desc / asc
// ------- required
idField : "id", // 每条数据的标识, 相当于主键.可实现跨页删除(如,第一页选中2条,第二页选中1条,批量删除)
columns : [ [ {
title : "编号",
field : "id", // 与 idField 对应, 与json字符中一致
width : 100
}, {
title : "姓名",
field : "name",// 与json字符串中name属性一致
width : 100,
sortable : true // 字段头上点击会 排序,反向当前排序
}, {
title : "密码",
field : "password",
width : 100
} ] ],
});
6. 服务器端处理程序 UserListServlet (见下)
注: 用Firebug 查看请求参数
1) 请求参数
page 页数
rows 页大小
2) 响应中包含的参数
注: 如果 响应中没有 total 则 实现不了翻页功能
total 记录总数
rows json数组,要显示的记录
7. 查看返回的 json字符串 -- json viewer
1) 数组 []
[ {第一条数据} ,
{第二条数据}, ....] 直接在grid中显示
无法分页
2) 对象 {}
{ "total": 最大记录数, "rows": [......] }
可以分页
8. 排序
1) datagrid 参数
sortName
Defines which column can be sorted.
按哪个字段排序
sortOrder
Defines the column sort order, can only be 'asc' or 'desc'.
按升序还是降序排序
2) 请求参数
order desc
sort name
3) 在列头上添加 点击排序
参看文档 datagrid中 colum的说明
sortable : true
9. 网页源码-- center.html
<!--
datagrid
1. 将div渲染成tabs
1) tabs
The tabs display a collection of panel.
It shows only one tab panel at a time.
Each tab panel has the header title and some mini button tools,
including close button and other customized buttons.
即 浏览器标签, 同一个浏览器上开多个网页.
2) 渲染
<div class="easyui-tabs" fit="true">
<div title="用户管理">xxxxxxx</div>
</div>
注: fit="true" 填满parent, 随父窗口的改变而改变
2. 去掉border(重叠的border颜色更深)
<div class="easyui-tabs" fit="true" border="0">
3. 在 chrome中出现滚动条的处理
<div region='center' style="overflow:hidden;">
4. 将 <table>渲染成datagrid
推荐使用 jQuery的方式
5. 参数说明
6. 服务器端处理程序 UserListServlet
注: 用Firebug 查看请求参数
1) 请求参数
page 页数
rows 页大小
2) 响应中包含的参数
注: 如果 响应中没有 total 则 实现不了翻页功能
total 记录总数
rows json数组,要显示的记录
7. 查看返回的 json字符串 -- json viewer
8. 排序
1) datagrid 参数
sortName
Defines which column can be sorted.
按哪个字段排序
sortOrder
Defines the column sort order, can only be 'asc' or 'desc'.
按升序还是降序排序
2) 请求参数
order desc
sort name
3) 在列头上添加 点击排序
参看文档 datagrid中 colum的说明
sortable : true
-->
<script type="text/javascript">
var datagrid;
$(function() {
$("#datagrid").datagrid({
// ------- requied
url : "userListServlet", // 从指定URL获取数据
// ------- optional
title : "datagrid title",
iconCls : "icon-save",
pagination : true, // 分页工具条
pageSize : 10, // 每页显示多少条数据
pageList : [ 10, 20, 30 ], // 下拉框,可选的pageSize大小
fit : true, // true: datagrid填满parent,不论数据有多少;
fitColumns : true, // true: 不出现滚动条,自适应parent,列不多时使用
nowarp : false, //单元格内容过多时, true:不换行,一行显示;false:换行显示
border : false,
sortName : "name", // 按哪个字段排序
sortOrder : "desc", // desc / asc
// ------- required
idField : "id", // 每条数据的标识, 相当于主键.可实现跨页删除(如,第一页选中2条,第二页选中1条,批量删除)
columns : [ [ {
title : "编号",
field : "id", // 与 idField 对应, 与json字符中一致
width : 100
}, {
title : "姓名",
field : "name",// 与json字符串中name属性一致
width : 100,
sortable : true // 字段头上点击会 排序,反向当前排序
}, {
title : "密码",
field : "password",
width : 100
} ] ],
});
});
</script>
<div class="easyui-tabs" fit="true" border="0">
<div title="用户管理">
<table id="datagrid"></table>
</div>
</div>
10. 服务区端servlet-- UserListServlet
package foo.ui.servlet;
import java.io.IOException;
import java.io.StringWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.codehaus.jackson.JsonFactory;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.JsonGenerator;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import foo.domain.User;
public class UserListServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 请求参数 page rows , 可通过 Firebug 查看请求参数
int pageNumber = Integer.parseInt(request.getParameter("page"));
int pageSize = Integer.parseInt(request.getParameter("rows"));
System.out.println("pageNumber (page) = " + pageNumber);
System.out.println("pageSize (rows) = " + pageSize);
// 根据请求参数 抓取数据
List<User> userList = new ArrayList<User>();
String jsonString = null;
int total = 100;
int startIndex = (pageNumber - 1) * pageSize;
int stopIndex = pageNumber * pageSize;
for (int i = startIndex; i < stopIndex; i++) {
if (i == total) {
break;
}
userList.add(new User(i, "admin" + i, "kk" + i));
}
// Java对象 转 json字符串
Map<String, Object> map = new HashMap<String, Object>();
map.put("total", total); // total 告诉 datagrid 总共有多少条数据
map.put("rows", userList); // rows 为要显示的数据
jsonString = object2JsonString(map);
// 将数据返回给 datagrid
response.setHeader("Content-Type", "application/json");
response.getWriter().print(jsonString);
}
// jackson 用法参考
// http://www.cnblogs.com/hoojo/archive/2011/04/22/2024628.html
private String object2JsonString(Object obj) throws IOException, JsonGenerationException, JsonMappingException {
ObjectMapper objectMapper = new ObjectMapper();
StringWriter stringWriter = new StringWriter();
JsonGenerator jsonGenerator = new JsonFactory().createJsonGenerator(stringWriter);
objectMapper.writeValue(jsonGenerator, obj);
return stringWriter.toString();
}
}