http://www.cnblogs.com/zgqys1980/archive/2011/01/04/1925775.html

加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid

  1. <!-- 加载jquery -->
  2. <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
  3. <!-- 加载jquery-easyui -->
  4. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
  5. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
  6. <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>

界面加入

  1. <table id="cxdm"></table>

加载datagrid的js代码

  1. //页面加载
  2. $(document).ready(function(){
  3. loadGrid();
  4. });
  5. //加载表格datagrid
  6. function loadGrid()
  7. {
  8. //加载数据
  9. $('#cxdm').datagrid({
  10. width: 'auto',
  11. height:300,
  12. striped: true,
  13. singleSelect : true,
  14. url:'getPsNewConsultList.action',
  15. //queryParams:{},
  16. loadMsg:'数据加载中请稍后……',
  17. pagination: true,
  18. rownumbers: true,
  19. columns:[[
  20. {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
  21. {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
  22. //添加超级链,并将来文号作为参数传入
  23. formatter:function(val,rec){
  24. //alert(rec.adviceid);
  25. return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
  26. }
  27. },
  28. {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
  29. {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}
  30. ]]
  31. });
  32. }
  33. //为loadGrid()添加参数
  34. var queryParams = $('#cxdm').datagrid('options').queryParams;
  35. queryParams.who = who.value;
  36. queryParams.type = type.value;
  37. queryParams.searchtype = searchtype.value;
  38. queryParams.keyword = keyword.value;
  39. //重新加载datagrid的数据
  40. $("#cxdm").datagrid('reload');

datagrid添加参数的方式

  1. //为loadGrid()添加参数
  2. var queryParams = $('#cxdm').datagrid('options').queryParams;
  3. queryParams.who = who.value;
  4. queryParams.type = type.value;
  5. queryParams.searchtype = searchtype.value;
  6. queryParams.keyword = keyword.value;
  7. //重新加载datagrid的数据
  8. $("#cxdm").datagrid('reload');

或者直接添加在url中

  1. $('#repeatpspolal').datagrid({
  2. title:'重复的未初分提案',
  3. loadMsg:"数据加载中,请稍后……",
  4. region:'north',
  5. url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
  6. 。。。。。。

Action层

  1. //当前页码
  2. private int page;
  3. .........
  4. //征询意见结果集
  5. private List<Object> rows;
  6. ...........
  7. @SuppressWarnings("unchecked")
  8. public String getPsNewConsultList() throws GlobalException {
  9. //获取每页显示的行数
  10. int pageRows=10;
  11. if(null!=request.getParameter("rows")) {
  12. pageRows=Integer.parseInt(request.getParameter("rows").toString());
  13. }
  14. ...........
  15. //获取结果集
  16. this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));
  17. //获取总记录数
  18. this.setTotal(100);
  19. ...............
  20. }

其中的page由datagrid传入,当用户在datagrid左下角选择每页显示的行数时,datagrid会将该值已参数形式附加到url后面传入action中,名字就叫page,还要将结果总行数total传给datagrid,用于分页

不知道是datagrid配置有误还是datagrid的bug,datagrid的结果集和每页显示的行数都叫rows,重名了

解决办法如上,结果集还是叫rows,但是List的类型改为Object而不能用实体的类型,每页显示的行数通过request获取

action配置时,要继承json-default,json-default继承自struts-default,还要配置输出结果类型为json

  1. <action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
  2. <result name="success" type="json">
  3. <param name="includeProperties">
  4. ^rows\[\d+\]\.\w+,total
  5. </param>
  6. <param name="noCache">true</param>
  7. <param name="ignoreHierarchy">false</param>
  8. </result>
  9. </action>

service层

  1. @SuppressWarnings("unchecked")
  2. public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
  3. return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
  4. }

dao层只需要将ResultSet中的数据循环加入实体属性,然后将实体实例加入List即可,形式如下:

  1. List<Person> list=new ArrayList<Person>();
  2. Person person=null;
  3. while(rs.next())
  4. {
  5. person=new Person();
  6. person.setId(i);
  7. person.setName("名字"+i);
  8. list.add(person);
  9. }
  10. .........
  11. return list;

easyui datagrid使用的更多相关文章

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

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

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  3. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  4. EasyUI datagrid 日期时间格式化

    EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...

  5. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  6. jquery easyui datagrid翻页后再查询始终从第一页开始

    在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...

  7. 让easyui datagrid支持bootstrap的tooltip

    让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...

  8. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  9. VS2012 easyui datagrid url访问之坑

    VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2," ...

  10. EasyUI Datagrid Datetime(EasyUI DataGrid 时间格式化)

    EasyUI DataGrid 时间格式化 方法一: var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, re ...

随机推荐

  1. python案例-用户登录

    要求: •输入用户名密码 •认证成功后显示欢迎信息 •输错三次后锁定 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 "" ...

  2. 如何将list转为json?

  3. Android view中的requestLayout和invalidate方法

    Android view中的requestLayout和invalidate方法 requestLayout:当view确定自身已经不再适合现有的区域时,该view本身调用这个方法要求parent v ...

  4. oracle文字与格式字符串不匹配的解决

    oracle文字与格式字符串不匹配的解决 oracle的日期时间类型 在往oracle的date类型插入数据的时候,记得要用to_date()方法. 如insert into CUSLOGS(STAR ...

  5. [CareerCup] 8.5 Online Book Reader System 在线读书系统

    8.5 Design the data structures for an online book reader system. 这道题OOB的题让我们设计一个在线读书系统,还是没有任何提示,所以发挥 ...

  6. GDB代码调试与使用

    GDB代码调试与使用 Linux下GDB调试代码 源代码 编译生成执行文件 gcc -g test.c -o test 使用GDB调试 启动GDB:gdb test 从第一行列出源代码:list 直接 ...

  7. 关于php析构函数的一个有趣问题

    随着面向对象编程的普遍展开,面向对象展现了其中很多有趣的问题.相信很多初学者学习php面向对象时会接触两个函数,构造函数与析构函数.构造函数似乎用的更多,析构函数用的较少(相对初学者有限编程经验而言, ...

  8. Java并发编程-ReentrantLock

    代码示例: Lock lock = new ReentrantLock(); lock.lock(); try { // update object state } finally { lock.un ...

  9. Android之POST方法的使用

    java代码 package xidian.dy.com.chujia; import android.os.Bundle; import android.os.Handler; import and ...

  10. EntityFramework_MVC4中EF5 新手入门教程之二 ---2.执行基本的 CRUD 功能

    在前面的教程中,您创建 MVC 应用程序中,存储和显示数据使用实体框架和 SQL 服务器 LocalDB.在本教程中,您会审查和自定义的 CRUD (创建. 读取. 更新. 删除) MVC 脚手架会自 ...