08-EasyUI_datagrid

0. 下载

1) JsonViewer

json字符串格式化查看及校验工具 Json-Viewer.zip

2) 此示例的项目源码源码(MyEclipse2013项目)

EasyUI_05-datagrid-src.zip

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();
	}

}