一:简介

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

二:页面源码

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

datagrid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <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> <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>

内嵌页面datagridtaps.html:

    <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">--> <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>

三:后台源码

这里没有和数据库进行交互、仅在方法中手动构造一个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;
}</string,></string,></userdto></userdto></userdto></userdto>

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

四:补充说明

1、 内嵌html页面、html页面中有class=”easyui-tabs”的div

2、 在内嵌html页面的那个panel中要添加一个style=”overflow:hidden;”属性、针对谷歌浏览器的滚动条。

3、 Datagrid 有分页属性pagination:他的子选项pageSize——每页显示的记录数 pageList——供于选择的每页的数量。

4、 每次请求后台都会向后台传递两个默认的参数、page(当前页号)、rows(每页总记录数)、当我们使用排序时、指定排序的字段和规则时、就会多传两个参数:sort(排序的字段)、order(排序方式:asc、desc)。我们可以根据这些参数来查询记录、

5、 传入的前台的Json格式的字符串要进行特殊处理、否则会错误的显示总记录数。具体处理看后台代码中关于Json的处理。

java_easyui体系之DataGrid(1)[转]的更多相关文章

  1. java_easyui体系之DataGrid(4)[转]

    一:简介 在前面DataGrid(3)的基础上添加后台的实现.本来是想只搭建前台页面的.后台不写.现在觉得还是都实现好点.从真实情况出发.后台用的ssh. 1. 新增冻结列功能. 2. 实现界面的添加 ...

  2. java_easyui体系之DataGrid(3)[转]

    一:简介 在2的基础上实现增删改.增.改都是通过行编辑来实现的.具体业务逻辑: 1. 增加一条记录的时候: a) 在datagrid表格最前端增加一行(当然也可在指定位置增加.)增加的行的字段必须与要 ...

  3. java_easyui体系之DataGrid(2)[转]

    一:简介 在1的基础上添加layout组件.实现通过条件动态的从后台查询数据到前台展示.使用的方式是将查询单独作为一个layout中的一个面板. 二:关键之处 1.效果图: 2.左侧的折叠组件: 折叠 ...

  4. java_easyui体系之目录 [转]

    摘要:简单介绍form的提交方式.与validatebox的结合使用. 一:form简介 Easyui中的form有两种提交方式.结合自己新添加的一种ajax提交方式.本文简单说明form的三种提交方 ...

  5. wpf研究之道-datagrid控件(1)

    "想要说些什么 又不知从何说起",每当想要写一些关于wpf的文章,总是沉思良久,怕自己写不好.今天我想要说的是wpf中datagrid控件.我们先来看看它在整个类的层次结构:   ...

  6. ASP.NET Aries 入门开发教程7:DataGrid的行操作(主键操作区)

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  7. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  8. [systemtap手记]debian体系安装过程

    Debian体系,本人测试用机 Ubuntu 11.10 uname -r 查看原本的内核版本为 3.0.0-12-generic 第一步: 安装systemtap包 $ sudo apt-get i ...

  9. BPM体系文件管理解决方案分享

    一.方案概述 企业管理在很大程度上是通过文件化的形式表现出来,体系文件管理是管理体系存在的基础和证据,是规范企业管理活动和全体人员行为,达到管理目标的管理依据.对与公司质量.环境.职业健康安全等体系有 ...

随机推荐

  1. bzoj1458 士兵占领

    费用流,连下面几类边 1.s->s',流量为n*m,费用为0,表示最多可放置n*m个士兵 2.s'->行 (1)流量为a[i],费用为-n*m,表示必须在这一行放置a[i]个士兵. (2) ...

  2. 创建和导出SVG的技巧(转载)

    本文转载自: 创建和导出SVG的技巧

  3. Excel应该这么玩——0、初衷:用IT方法玩Excel

    在企业中处理业务数据,最好的方案是使用业务系统.业务系统可以基于复杂的业务逻辑处理大量数据,并支持多人协作处理流程性的工作,对支撑企业运营非常重要.但是由于业务系统的复杂性很高,一点小小的改变也需要较 ...

  4. 将java项目转换成Web项目

    http://www.cnblogs.com/kaige123/p/5866446.html 在项目上点击右键,进入Properties配置,点击Project Facets,再点击Convert t ...

  5. Super Ugly Number

    eg 2,3,5 把第一个元素(2,1)放到最小堆,2表示乘积,1表示乘数   乘数     队列                          最小堆                   即将进 ...

  6. 精彩的javascript对象和数组混合相加

    最近遇到一个让人困解的一个问题:一个简单的js加法运算表达式: +[]; //这里加上一个空数组得到什么???答案:'1'; 为什么答案是1,一开始我也很困惑:后来我读了一篇文章才知道:在javasc ...

  7. [课程设计]Scrum 2.0 多鱼点餐系统开发进度(第二阶段项目构思与任务规划)

    [课程设计]Scrum 2.0 多鱼点餐系统开发进度 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统WEB ...

  8. find函数

    Python find() 方法检测字符串中是否包含子字符串 str ,如果指定 beg(开始) 和 end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返回-1. ...

  9. EFS加密解密----重装系统后

    重装系统尤其是格式化重装系统之后,如果没有正确地备份私钥,那么加密的文件将无法打开,加密的文件也暂时没有办法进行快速破解. 并非重装后用相同用户名+密码就可以解密的. Advanced EFS Dat ...

  10. 关于行内元素的margin padding一些说明;background-color的范围

    ①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...