最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教!

1、先来看看效果,二话不说,上图直观!

2、easyui的datagrid的使用方法

在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧。所以就简单带一下。

①、在easyui的layout中的center中定义一个table,id为"datagridTable"。

  1. <div region="center" border="false">
  2. <table id="datagridTable"></table>
  3. </div>

②、使用javascript的方式让这个table变为一个easyui的datagrid。当然也可以给这个table指定class属性为“easyui-datagrid”,两种方式都可以,萝卜白菜,各有所爱。由于datagrid和后台的数据交互打交道的比较多,所以俺使用的功能比较好控制的javascript方式定义。

代码如下,其中具体的属性和方法请查看easyui文档,官网地址:http://www.jeasyui.com/documentation/datagrid.php,标红的部分为后台struts处理的Url和显示分页工具栏的设置。

  1. <script type="text/javascript">
  2.  
  3. $(function() {
  4.  
  5. $("#datagridTable").datagrid({
  6.  
  7. url : 'getUsers',
  8.  
  9. title : '用户列表',
  10.  
  11. pagination : true,
  12.  
  13. pageSize : 10,
  14.  
  15. pageList : [ 10, 20, 30, 40 ],
  16.  
  17. fit : true,//自适应窗口大小变化
  18.  
  19. fitColumns : true,
  20.  
  21. border : false,
  22.  
  23. idField : 'id',
  24.  
  25. columns : [ [ {
  26.  
  27. title : '用户编号',
  28.  
  29. field : 'id',
  30.  
  31. width : 100
  32.  
  33. //宽度必须,数值随便
  34.  
  35. }, {
  36.  
  37. title : '用户名',
  38.  
  39. field : 'username',
  40.  
  41. width : 100
  42.  
  43. }, {
  44.  
  45. title : '用户密码',
  46.  
  47. field : 'password',
  48.  
  49. width : 100
  50.  
  51. },{
  52.  
  53. title:'注册时间',
  54.  
  55. field:'date',
  56.  
  57. width:100
  58.  
  59. } ] ],
  60.  
  61. toolbar : [ {
  62.  
  63. text : '增加',
  64.  
  65. iconCls : 'icon-add',
  66.  
  67. handler : function() {
  68.  
  69. }
  70.  
  71. }, '-', {
  72.  
  73. text : '删除',
  74.  
  75. iconCls : 'icon-remove',
  76.  
  77. handler : function() {
  78.  
  79. }
  80.  
  81. }, '-', {
  82.  
  83. text : '编辑',
  84.  
  85. iconCls : 'icon-edit',
  86.  
  87. handler : function() {
  88.  
  89. }
  90.  
  91. } ]
  92.  
  93. //两个[],实现多级表头,合并单元格的效果,产生不规则表头
  94.  
  95. });
  96.  
  97. });

③、后台使用的是SSH(struts2+hibernate4+spring3.2),后台Action简单写了一下。

  1. @Controller(value = "GetUserAction")
  2.  
  3. @Scope("prototype")
  4.  
  5. public class GetUserAction {
  6.  
  7. //使用spring的annotation注入
  8.  
  9. @Resource(name = "userDao")
  10.  
  11. private UserDao ud;
  12.  
  13. //page和rows属性,是easyui分页工具的属性,名字固定,便于struts2的自动封装和类型装换,可以通过Firebug看到。
  14.  
  15. private int page;
  16.  
  17. private int rows;
  18.  
  19. //省略的set/get方法
  20.  
  21. public String getUsers() {
  22.  
  23. //存放数据的list
  24.  
  25. List<User> users = new ArrayList<User>();
  26.  
  27. //这个User是后来做数据过滤的时候封装的过滤条件。
  28.  
  29. User u =new User();
  30.  
  31. //使用spring的BeanUtils工具,复制属性到u里面。
  32.  
  33. BeanUtils.copyProperties(this, u);
  34.  
  35. //后台的getUsers方法,这里我省略了service层,采用domain,action,dao,daoImpl架构,功能简单,就没加上service这一层。
  36.  
  37. users = (List<User>) ud.getUsers(page, rows, u);
  38.  
  39. Map<String, Object> m = new HashMap<String, Object>();
  40.  
  41. //total是easyui分页工具的总页数。名字固定。
  42.  
  43. m.put("total", ud.getTotal(page, rows, u));
  44.  
  45. m.put("rows", users);
  46.  
  47. //自己写了一个java对象转换成json的工具类,俺用的是jackson,使用json-lib的同学可以自己写一个。不过jaon-lib的转换速度比较慢,没有jackson快。
  48.  
  49. JSONParser.writeJson(m);
  50.  
  51. return "success";
  52.  
  53. }
  54.  
  55. }

④、看一眼getUsers(int page,int rows,User u)和getTotal(int page,int rows,User u)方法

  1. @Service("userDao")
  2.  
  3. public class UserDaoImpl implements UserDao {
  4.  
  5. //注入hibernate的sessionFactory,不多说。
  6.  
  7. @Resource(name = "sessionFactory")
  8.  
  9. private SessionFactory sessionFactory;
  10.  
  11. //过滤条件,动态拼接HQL语句。
  12.  
  13. public String addWhere(String hql, User u) {
  14.  
  15. if (u.getUsername() != null && !u.getUsername().trim().equals("")) {
  16.  
  17. hql += " where 1=1 and u.username like '%%" + u.getUsername()
  18.  
  19. + "%%'";
  20.  
  21. }
  22.  
  23. return hql;
  24.  
  25. };
  26.  
  27. //设置为只读事务
  28.  
  29. @Override
  30.  
  31. @Transactional(readOnly = true)
  32.  
  33. public List<?> getUsers(int page, int rows, User u) {
  34.  
  35. String hql = "from User u ";
  36.  
  37. hql = addWhere(hql, u);
  38.  
  39. Query query = sessionFactory.getCurrentSession().createQuery(hql);
  40.  
  41. //hibernate的分页就依靠这两个set方法,详情请查看API文档。
  42.  
  43. query.setFirstResult((page - 1) * rows);
  44.  
  45. query.setMaxResults(rows);
  46.  
  47. //将结果以list返回。
  48.  
  49. return query.list();
  50.  
  51. }
  52.  
  53. //getTotal方法第一种写法,使用HQL的count函数
  54.  
  55. @Override
  56.  
  57. @Transactional(readOnly = true)
  58.  
  59. public Long getTotal(int page, int rows, User u) {
  60.  
  61. String hql=" select count(*) from User u";
  62.  
  63. hql=addWhere(hql, u);
  64.  
  65. Query query = sessionFactory.getCurrentSession().createQuery(hql);
  66.  
  67. //注意类型为Long。
  68.  
  69. return (Long) query.list().get(0);
  70.  
  71. }
  72.  
  73. /**
  74.  
  75. //getTotal方法的第二种写法,不使用HQL的count函数。
  76.  
  77. @Override
  78.  
  79. @Transactional(readOnly = true)
  80.  
  81. public List<?> getTotal(int page, int rows, User u) {
  82.  
  83. //不适用count,查询所有的,action通过ud.getUsers(page,rows,u).size()获得total。性能较差,毕竟我只要一个
  84.  
  85. //count数值,hibernate却list所有的之后在求size()。
  86.  
  87. String hql=" from User u";
  88.  
  89. hql=addWhere(hql, u);
  90.  
  91. Query query = sessionFactory.getCurrentSession().createQuery(hql);
  92.  
  93. return query.list();
  94.  
  95. }
  96.  
  97. */
  98.  
  99. }

⑤、到此,后台功能开发完成,部署,运行即可。

page,rows,total参数解释

如图:

写下这篇文章,一是为了本着分享精神能与大家共同学习,探讨和进步。二是为了记录一下学习笔记,以备日后只需,查阅方便。不正确指出,望大家多多批评指正。(我的CSDN博客也有这篇文。。(⊙o⊙))

后续我将把JSONParser的代码分享一下,用于将list转换成标准的json格式。

本文转自:http://my.oschina.net/sgl/blog/123403

源码下载地址:https://code.csdn.net/Sgl731524380/easyui-pagination

Easyui的datagrid结合hibernate实现数据分页的更多相关文章

  1. easyui+struts2:datagrid无法不能得到数据

    转自:https://bbs.csdn.net/topics/390980437 easyui+struts2:datagrid无法访问到指定action: userlist.jsp部分代码: XML ...

  2. easyui的datagrid用js插入数据等编辑功能的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. C#的WebApi 与 EasyUi的DataGrid结合生成的可分页界面

    1.从数据库每次取出的数据为当前分页的数据. 2.分页用的是EasyUI 的 Pagination控件,与DataGrid是相对独立的. 3.后台数据获取是通过WebApi去获取. 4.传入参数是:p ...

  4. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

  5. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  6. 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

    问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...

  7. easyUI的datagrid每行数据添加操作按钮的方法

    今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一 ...

  8. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  9. EasyUI queryParams属性 在请求远程数据同时给action方法传参

    http://www.cnblogs.com/iack/p/3530500.html?utm_source=tuicool EasyUI queryParams属性 在请求远程数据同时给action方 ...

随机推荐

  1. 【OpenStack】OpenStack系列2之KeyStone详解

    源码下载.依赖安装 参考:http://www.oschina.net/question/565065_66271 https://github.com/yongluo2013/osf-opensta ...

  2. WriteFile实现下载

    TransmitFile实现下载     protected void Button1_Click(object sender, EventArgs e)      {         /*      ...

  3. 如何用adb logcat保存日志

    //将log 保存到当前目录下 adb logcat -v time >a.log //log过滤 adb logcat | grep MyAppName //清除log adb logcat ...

  4. (原创)Python文件与文件系统系列(5)——stat模块

    stat模块中定义了许多的常量和函数,可以帮助解释 os.stat().os.fstat().os.lstat()等函数返回的 st_result 类型的对象. 通常使用 os.path.is*() ...

  5. hdu 1160 FatMouse's Speed 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 题目意思:给出一堆老鼠,假设有 n 只(输入n条信息后Ctrl+Z).每只老鼠有对应的weigh ...

  6. hdu 3032 Nim or not Nim? (SG函数博弈+打表找规律)

    Nim or not Nim? Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  7. Action返回类型

    1.返回ascx页面return PartialView(); 2.Content(),返回文本ContentResultreturn Content("这是一段文本"); 3.J ...

  8. ffmpeg 中添加264支持

    转自:http://blog.sina.com.cn/s/blog_513f4e8401011yuq.html ffmpeg 中带有264的解码,没有编码,需要添加x264: 参考百度上的“windo ...

  9. Codeforces Round #360 (Div. 1) D. Dividing Kingdom II 并查集求奇偶元环

    D. Dividing Kingdom II   Long time ago, there was a great kingdom and it was being ruled by The Grea ...

  10. 2016"百度之星" - 初赛(Astar Round2A) 1004 D Game 区间DP

    D Game Problem Description   众所周知,度度熊喜欢的字符只有两个:B 和D. 今天,它发明了一个游戏:D游戏. 度度熊的英文并不是很高明,所以这里的D,没什么高深的含义,只 ...