easyui datagrid使用(好)
加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid
- <!-- 加载jquery -->
- <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
- <!-- 加载jquery-easyui -->
- <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
- <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
界面加入
- <table id="cxdm"></table>
加载datagrid的js代码
- //页面加载
- $(document).ready(function(){
- loadGrid();
- });
- //加载表格datagrid
- function loadGrid()
- {
- //加载数据
- $('#cxdm').datagrid({
- width: 'auto',
- height:300,
- striped: true,
- singleSelect : true,
- url:'getPsNewConsultList.action',
- //queryParams:{},
- loadMsg:'数据加载中请稍后……',
- pagination: true,
- rownumbers: true,
- columns:[[
- {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
- {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
- //添加超级链,并将来文号作为参数传入
- formatter:function(val,rec){
- //alert(rec.adviceid);
- return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
- }
- },
- {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
- {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}
- ]]
- });
- }
- //为loadGrid()添加参数
- var queryParams = $('#cxdm').datagrid('options').queryParams;
- queryParams.who = who.value;
- queryParams.type = type.value;
- queryParams.searchtype = searchtype.value;
- queryParams.keyword = keyword.value;
- //重新加载datagrid的数据
- $("#cxdm").datagrid('reload');
datagrid添加参数的方式
- //为loadGrid()添加参数
- var queryParams = $('#cxdm').datagrid('options').queryParams;
- queryParams.who = who.value;
- queryParams.type = type.value;
- queryParams.searchtype = searchtype.value;
- queryParams.keyword = keyword.value;
- //重新加载datagrid的数据
- $("#cxdm").datagrid('reload');
或者直接添加在url中
- $('#repeatpspolal').datagrid({
- title:'重复的未初分提案',
- loadMsg:"数据加载中,请稍后……",
- region:'north',
- url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
- 。。。。。。
Action层
- //当前页码
- private int page;
- .........
- //征询意见结果集
- private List<Object> rows;
- ...........
- @SuppressWarnings("unchecked")
- public String getPsNewConsultList() throws GlobalException {
- //获取每页显示的行数
- int pageRows=10;
- if(null!=request.getParameter("rows")) {
- pageRows=Integer.parseInt(request.getParameter("rows").toString());
- }
- ...........
- //获取结果集
- this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));
- //获取总记录数
- this.setTotal(100);
- ...............
- }
其中的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
- <action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
- <result name="success" type="json">
- <param name="includeProperties">
- ^rows\[\d+\]\.\w+,total
- </param>
- <param name="noCache">true</param>
- <param name="ignoreHierarchy">false</param>
- </result>
- </action>
service层
- @SuppressWarnings("unchecked")
- public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
- return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
- }
dao层只需要将ResultSet中的数据循环加入实体属性,然后将实体实例加入List即可,形式如下:
- List<Person> list=new ArrayList<Person>();
- Person person=null;
- while(rs.next())
- {
- person=new Person();
- person.setId(i);
- person.setName("名字"+i);
- list.add(person);
- }
- .........
- return list;
easyui datagrid使用(好)的更多相关文章
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- 控制EasyUI DataGrid高度
这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下: <table ...
- EasyUI datagrid 日期时间格式化
EasyUI datagrid中显示日期时间时,会显示为以下不太直观的数值: 添加以下JavaScript脚本,然后在field中添加 formatter: DateTimeFormatter 即可. ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- jquery easyui datagrid翻页后再查询始终从第一页开始
在查询之前将datagrid的属性pageNumber重新设置为1 var opts = grid.datagrid('options'); opts.pageNumber = 1; easyui d ...
- 让easyui datagrid支持bootstrap的tooltip
让easyui datagrid支持bootstrap的tooltip 发表于 下午 1:53 by ylpro.net & 分类 Java. Easyui在1.3.3版本之前是不支持tool ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- VS2012 easyui datagrid url访问之坑
VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2," ...
- EasyUI Datagrid Datetime(EasyUI DataGrid 时间格式化)
EasyUI DataGrid 时间格式化 方法一: var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, re ...
随机推荐
- iOS App上架流程(2016详细版
http://www.jianshu.com/p/b1b77d804254 iOS App上传项目遇到的问题 http://www.jianshu.com/p/9195cd991fc7
- php大力力 [021节]mysql表名在mac下不能大写
2015-08-27 php大力力021.mysql表名在mac下不能大写 刚才数据库里面,phpMyAdmin狂出错. Some errors have been detected on the s ...
- Java Sudoku游戏
这几天尝试用Java的swing写图形程序,边学习边摸索写了个简单的数独游戏,在编写的过程中学到了不少关于swing的东西,而且对于图形化程序的编写也有了一点简单的认识: 善其事先利其器,既然写图形化 ...
- linux常用命令:1文件处理命令
文件处理命令 1.命令格式 命令格式:命令 [-选项] [参数] 例:ls -la /etc 说明:1)个别命令使用不遵循此格式 2)档有多个选项时,可以写在一起 3)简化选项与完整选项 2.目录 ...
- Android之Activity与Service通信
一.当Acitivity和Service处于同一个Application和进程时,通过继承Binder类来实现. 当一个Activity绑定到一个Service上时,它负责维护Service实例的引用 ...
- Ferry Loading II_贪心
Description Before bridges were common, ferries were used to transport cars across rivers. River fer ...
- 基于linux运用python开发知识点滴
我是小白,希望我的文章能对小白们有点作用. A.Linux的开源,优势明显,如何使用,基本命令如下: 个人认为最基础的两种操作: 1.文件操作: ls 看文件夹下内容 ls -a 隐藏文件 -l非隐藏 ...
- 【转】为什么我要用 Node.js? 案例逐一介绍
原文转自:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...
- ASP.NET 中DataGrid item 绑定方法
<Columns> <asp:TemplateColumn HeaderImageUrl="../../Images/delete.GIF"> <He ...
- 第二个Sprint冲刺第九天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 工作:接着昨天的任务