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

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

2、easyui的datagrid的使用方法

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

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

<div region="center" border="false">
<table id="datagridTable"></table>
</div>

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

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

<script type="text/javascript"> 

        $(function() { 

            $("#datagridTable").datagrid({ 

                url : 'getUsers', 

                title : '用户列表', 

                pagination : true, 

                pageSize : 10, 

                pageList : [ 10, 20, 30, 40 ], 

                fit : true,//自适应窗口大小变化 

                fitColumns : true, 

                border : false, 

                idField : 'id', 

                columns : [ [ { 

                    title : '用户编号', 

                    field : 'id', 

                    width : 100 

                //宽度必须,数值随便 

                }, { 

                    title : '用户名', 

                    field : 'username', 

                    width : 100 

                }, { 

                    title : '用户密码', 

                    field : 'password', 

                    width : 100 

                },{ 

                    title:'注册时间', 

                    field:'date', 

                    width:100 

                } ] ], 

                toolbar : [ { 

                    text : '增加', 

                    iconCls : 'icon-add', 

                    handler : function() { 

                    } 

                }, '-', { 

                    text : '删除', 

                    iconCls : 'icon-remove', 

                    handler : function() { 

                    } 

                }, '-', { 

                    text : '编辑', 

                    iconCls : 'icon-edit', 

                    handler : function() { 

                    } 

                } ] 

            //两个[],实现多级表头,合并单元格的效果,产生不规则表头   

            }); 

}); 

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

@Controller(value = "GetUserAction") 

@Scope("prototype") 

public class GetUserAction { 

    //使用spring的annotation注入 

    @Resource(name = "userDao") 

    private UserDao ud; 

    //page和rows属性,是easyui分页工具的属性,名字固定,便于struts2的自动封装和类型装换,可以通过Firebug看到。 

    private int page; 

    private int rows; 

    //省略的set/get方法 

    public String getUsers() { 

        //存放数据的list 

        List<User> users = new ArrayList<User>(); 

        //这个User是后来做数据过滤的时候封装的过滤条件。 

        User u =new User(); 

        //使用spring的BeanUtils工具,复制属性到u里面。 

        BeanUtils.copyProperties(this, u); 

        //后台的getUsers方法,这里我省略了service层,采用domain,action,dao,daoImpl架构,功能简单,就没加上service这一层。 

        users = (List<User>) ud.getUsers(page, rows, u); 

        Map<String, Object> m = new HashMap<String, Object>(); 

        //total是easyui分页工具的总页数。名字固定。 

      m.put("total", ud.getTotal(page, rows, u)); 

        m.put("rows", users); 

        //自己写了一个java对象转换成json的工具类,俺用的是jackson,使用json-lib的同学可以自己写一个。不过jaon-lib的转换速度比较慢,没有jackson快。 

        JSONParser.writeJson(m); 

        return "success"; 

    } 

} 

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

@Service("userDao") 

public class UserDaoImpl implements UserDao { 

    //注入hibernate的sessionFactory,不多说。 

    @Resource(name = "sessionFactory") 

    private SessionFactory sessionFactory; 

    //过滤条件,动态拼接HQL语句。 

    public String addWhere(String hql, User u) { 

        if (u.getUsername() != null && !u.getUsername().trim().equals("")) { 

            hql += " where 1=1 and u.username like '%%" + u.getUsername() 

                    + "%%'"; 

        } 

        return hql; 

    }; 

    //设置为只读事务 

    @Override

    @Transactional(readOnly = true) 

    public List<?> getUsers(int page, int rows, User u) { 

        String hql = "from User u "; 

        hql = addWhere(hql, u); 

        Query query = sessionFactory.getCurrentSession().createQuery(hql); 

       //hibernate的分页就依靠这两个set方法,详情请查看API文档。 

        query.setFirstResult((page - 1) * rows); 

        query.setMaxResults(rows); 

        //将结果以list返回。 

        return query.list(); 

    } 

    //getTotal方法第一种写法,使用HQL的count函数 

    @Override

    @Transactional(readOnly = true) 

    public Long getTotal(int page, int rows, User u) { 

        String hql="   select count(*) from  User u"; 

        hql=addWhere(hql, u); 

        Query query = sessionFactory.getCurrentSession().createQuery(hql); 

        //注意类型为Long。 

        return (Long) query.list().get(0); 

    } 

    /** 

    //getTotal方法的第二种写法,不使用HQL的count函数。 

    @Override 

    @Transactional(readOnly = true) 

    public  List<?> getTotal(int page, int rows, User u) { 

        //不适用count,查询所有的,action通过ud.getUsers(page,rows,u).size()获得total。性能较差,毕竟我只要一个 

        //count数值,hibernate却list所有的之后在求size()。 

       String hql=" from  User u"; 

        hql=addWhere(hql, u); 

        Query query = sessionFactory.getCurrentSession().createQuery(hql); 

        return query.list(); 

    } 

    */

} 

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

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. 部署Office Web Apps Server并配置其与SharePoint 2013的集成

    部署Office Web Apps Server并配置其与SharePoint 2013的集成   Office Web Apps Server 是新的 Office 服务器产品,它提供 Word.P ...

  2. Heap:Sunscreen(POJ 3614)

    晒太阳 题目大意:一堆牛,为了避免晒太阳会灼烧自己,然后他们自己有自己的防晒指数(一个区间),防晒霜可以提高防晒因数SPF,大了不行小了不行,现在有一桶防晒霜,他们提供一定的SPF,但是最多可以提供k ...

  3. javascript的onbeforeunload函数在IOS上运行

    今天在做项目的时候,组长让我用iPad测试一下前面写的离线缓存,后退不刷新页面,发现在iPad上onbeforeunload函数在iPad上一带而过,不运行??? 无奈之下,发现原来在IOS上,有自己 ...

  4. ACdream 1195 Sudoku Checker (数独)

    Sudoku Checker Time Limit:1000MS     Memory Limit:64000KB     64bit IO Format:%lld & %llu Submit ...

  5. 20145221 《Java程序设计》实验报告二:Java面向对象程序设计

    20145221 <Java程序设计>实验报告二:Java面向对象程序设计 实验要求 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O. ...

  6. Jam的计数法(codevs 1140)

    题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用 ...

  7. barrier()函数

    转自:http://blog.chinaunix.net/uid-21961753-id-1810628.html 今天看内核发现disable_preempt这个函数,觉得挺有意思就看了下网上资料, ...

  8. 网易前端JavaScript编码规范

    在多年开发邮箱webmail过程中,网易邮箱前端团队积累了不少心得体会,我们开发了很多基础js库,实现了大量前端效果组件,开发了成熟的opoa框架以及api组件,在此向大家做一些分享.今天想先和大家聊 ...

  9. 如何解决adb devices 端口被占用的问题zz

    在win xp ,win 7 上使用adb时, 越来越多的人出现了 adb devices 命令长时间无响应.adb start-server 失败.eclipse adt初始化时卡在dbms-ini ...

  10. UVa 11991:Easy Problem from Rujia Liu?(STL练习,map+vector)

    Easy Problem from Rujia Liu? Though Rujia Liu usually sets hard problems for contests (for example, ...