08-EasyUI_datagrid

╰半夏微凉° 2022-09-18 09:55 170阅读 0赞

# 0. 下载 #

1) JsonViewer  
  
json字符串格式化查看及校验工具 [Json-Viewer.zip][]  
  
2) 此示例的项目源码源码(MyEclipse2013项目)

[EasyUI\_05-datagrid-src.zip][EasyUI_05-datagrid-src.zip]

![SouthEast][]

# 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颜色更深)  #

# 3. 在 chrome中出现滚动条的处理 #

# 4. 将 <table>渲染成datagrid #

推荐使用 jQuery的方式

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 #

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

[Json-Viewer.zip]: http://download.csdn.net/detail/wuqinfei_cs/6553107
[EasyUI_05-datagrid-src.zip]: http://download.csdn.net/detail/wuqinfei_cs/6553401
[SouthEast]: /images/20220828/a9e2bba2af8d48e38588573c40235e80.png