java_easyui体系之DataGrid（1）

最新推荐文章于 2024-03-23 22:55:35 发布

huaying.chen

最新推荐文章于 2024-03-23 22:55:35 发布

阅读量4k

点赞数 3

分类专栏： Oscar_front 文章标签： easyui datagrid jquery layout Json

本文链接：https://blog.csdn.net/crave_shy/article/details/17797677

版权

Oscar_front 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

java_easyui体系之DataGrid（1）

一：简介

以表格的形式展示数据、项目中式很常见的一个使用、table展示数据、牵扯到分页、上一页下一页、首页、尾页、翻页、选中展示的记录用于操作、总记录数等等、使用DataGrid很容易实现这一点。

二：页面源码

各个字段在页面中都有详细的说明

datagrid.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'original.jsp' starting page</title>
    
    <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  
	<body id="blayout" class="easyui-layout">
	    <div data-options="region:'north',title:'North Title',split:false" style="height:100px;"> </div>
	    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"> </div>
	    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
	    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
	    <div data-options="region:'center'" href='datagridtaps.html' style="overflow: hidden;"></div>
	</body>
</html>

内嵌页面datagridtaps.html：

<!DOCTYPE html>
<html>
  <head>
    <title>dategridtaps.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>	
  		<script type="text/javascript">
  			$(function(){
  				$('#datagrid').datagrid({
  					url:'login_getJson.action',
//   					title: 'ssss',
  					iconCls:'icon-save',
  					pagination:true,
  					pageSize:10,
  					pageList:[10,20,30,40,50,60,70,80,90,100],
  					fit:true,//使表格自适应
  					fitColumns:true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
  					nowrap:false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
  					border:false,
  					idFeild:'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
  					sortName:'id',//设置默认排序时的 字段（必须是field中的一个字段）
  					sortOrder:'asc',//是按照升序还是降序排序	但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
  					columns:[ [{
  							title:'编号',
  							field:'id',
  							width:100,//必须要给
//   							sortable:true,//指定按照这个排序
  						},{
  							title:'姓名',
  							field:'userName',
  							width:100,//必须要给
  							
  						},{
  							title:'密码',
  							field:'passWord',
  							width:100,//必须要给
  						}] ]
  					
  				});	
  			});
  		</script>
  
  		<div class="easyui-tabs" data-options="fit:true,border:false">
  			<div title="用户管理">
  				<table id="datagrid"></table>
  			</div>
  		</div>
  
  </body>
</html>

三：后台源码

这里没有和数据库进行交互、仅在方法中手动构造一个UserDTO的List

	public String getJson() throws IOException{
		List<UserDTO> userList = new ArrayList<UserDTO>();
		userList.add(new UserDTO("1","chy","123"));
		userList.add(new UserDTO("2","mxx","123"));
		userList.add(new UserDTO("3","chk","123"));
		//当与后台交互时、可以根据前台回传的页号与每页记录数查询数据
		//List<UserDTO> userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。
		//但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台
		//int count = userService.getUersCount();
		
		/*
		 * 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order
		 * List<UserDTO> userList = userService.getUsers(page, rows, sort, order) 
		 */
		System.out.println("sort" + sort + " order" + order);
		
		Map<String, Object> m = new HashMap<String, Object>();
		m.put("total", 12);
		m.put("rows", userList);
		
		
		System.out.println(getJson(m));
		
		PrintWriter pw  = ServletActionContext.getResponse().getWriter();
		pw.write(getJson(m));
		pw.flush();
		pw.close();
		return null;
	}

注意对Json的处理：前台需要的是一个含有total、rows对象的Json、所以使用Map包装了一下、同时这里使用的是JackJson、速度比较块。

	private String getJson(Object o) throws IOException,
			JsonGenerationException, JsonMappingException {
		ObjectMapper om = new ObjectMapper();
		StringWriter sw = new StringWriter();
		JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
		om.writeValue(jg, o);
		jg.close();
		return sw.toString();
	}