记录一下以作参考
SpringMVC的安装可以参考
SpringMVC3.0+rest小例子
jsp页面
<div id="_grid" style="width: 100%; * width: 99%; zoom: 1;">
<table id="list" width="100%"></table>
<div id="pager"></div>
</div>
<script>
$(function(){
$("#list").jqGrid({
url : "${pageContext.request.contextPath}/user/list",
contentType : 'application/json',
mtype : "post",
datatype : 'json',
prmNames : {search : "search"},
jsonReader : {id : "0", repeatitems : false, userdata : "userdata"},
height : "auto",
colNames : ["ID", "用户名", "全名", "状态", "是否管理员"],
colModel : [{name:"id", index:"id", hidden:true},
{name:"username", index:"username"},
{name:"fullname", index:"fullname"},
{name:"enabled", index:"enabled"},
{name:"is_admin", index:"is_admin"}],
pager : "#pager",
autoWidth : true,
rowNum : 10,
rownumbers : true,
viewrecords: true,
caption : "用户列表"
});
$(window).bind('resize', function() {
$("#list").setGridWidth($("#_grid").width() - 10);
}).trigger('resize');
jQuery("#list").jqGrid('navGrid', '#pager', {});
});
</script>
其中几个关键的属性
url :查询请求地址
datatype :返回值类型,这里使用JSON进行传递
prmNames :传递给后台的属性定义,本例中定义search:"search",如果不这么定义的话,后台接收到的将会是_search。
jsonReader :页面接收后台数据属性定义,具体参考API解释
Controller类
@RequestMapping(value="/list")
@ResponseBody
public DataResponse<User> list(@RequestParam(defaultValue="1",value="page") String page,
@RequestParam(defaultValue="20",value="rows") String rows,
@RequestParam("sidx") String sidx,
@RequestParam("sord") String sord,
@RequestParam("_search") boolean search,
@RequestParam(required=false,value="searchField") String searchField,
@RequestParam(required=false,value="searchOper") String searchOper,
@RequestParam(required=false,value="searchString") String searchString,
@RequestParam(required=false,value="filters") String filters
){
try {
DataRequest request = new DataRequest();
request.setPage(StringUtils.isEmpty(page) ? 1 : Integer.valueOf(page));
request.setRows(StringUtils.isEmpty(rows) ? 20 : Integer.valueOf(rows));
request.setSidx(sidx);
request.setSord(sord);
request.setSearch(search);
request.setSearchField(searchField);
request.setSearchOper(searchOper);
request.setSearchString(searchString);
return customSearchUtil.search(request, User.class);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
为接收前台数据,特定义了DataRequest类,其中的属性跟页面传递过来的属性一一对应
public class DataRequest implements java.io.Serializable {
private static final long serialVersionUID = 1L;
//当前页码
private int page;
//页面可显示行数
private int rows;
//用于排序的列名
private String sidx;
//排序的方式desc/asc
private String sord;
//是否是搜索请求
private boolean search;
//已经发送的请求的次数
private String nd;
}
给前台发送数据也定义了相应的DataResponse类
public class DataResponse <T> {
//需要显示的数据集
private List<T> rows;
//每页显示数量
private int page;
//数据总数
private int records;
//可显示的页数
private int total;
//自定义数据
private Map<String, Object> userdata;
}
Controller类接收数据后即传给后台service类处理并返回DataResponse对象给页面
处理方法如下
public DataResponse<T> search(DataRequest request, Class<T> cls) {
DataResponse<T> response = new DataResponse<T>();
int count;//总记录数
int limit = request.getRows() <= 0 ? 20 : request.getRows();//每页显示数量
int totalPages;//总页数
int page = request.getPage() <= 0 ? 1 : request.getPage();//当前显示页码
List<T> list;
Set<Criterion> set = initSearchCondition(request.isSearch(), request.getSearchField(), request.getSearchOper(), request.getSearchString());
count = customDao.count(cls, set);
totalPages = count / limit;
if (count % limit != 0) {
totalPages++;
}
int currPage = Math.min(totalPages, page);
int start = currPage * limit - limit;
start = start < 0 ? 0 : start;
list = customDao.list(cls, set, start, limit);
response.setRecords(count);
response.setTotal(totalPages);
response.setPage(currPage);
response.setRows(list);
return response;
}
分享到:
相关推荐
2. **数据网格功能**:jqGrid支持多种数据源,如JSON、XML、CSV等,能够轻松地从服务器获取和展示数据。它还具备分页、排序、搜索、过滤和编辑等功能,使得数据操作变得简单直观。 3. **列管理**:开发者可以通过...
《jQuery.jqGrid-3.5-beta:一个强大的数据管理框架》 在Web开发领域,高效的数据管理和展示是至关重要的。jQuery.jqGrid是这样一个工具,它为开发者提供了强大而灵活的数据网格解决方案。这个名为"jquery.jqGrid-...
在本文中,我们将深入探讨如何在ASP.NET MVC4框架中集成jqGrid表格插件,并通过一个实际的示例源代码来展示具体实现过程。jqGrid是一个功能强大的jQuery插件,用于创建交互式、数据丰富的网格视图,适用于各种Web...
在本文中,我们将深入探讨如何在MVC4(Model-View-Controller)应用程序中集成jqGrid,这是一个功能强大的JavaScript表格插件,用于实现数据的动态显示和管理。jqGrid允许开发人员创建高度交互式和可定制的数据网格...
2. **数据源**:jqGrid支持多种数据源,包括本地数组、JSON、XML、AJAX等。通过设置`url`属性,可以实现远程数据加载,利用Ajax进行异步通信,提高用户体验。 3. **列配置**:每个列可以通过`colModel`选项进行定义...
**JqGrid控件MVC版详解** JqGrid是一款强大的JavaScript表格插件,它在MVC(模型-视图-控制器)框架下有专门的版本,为Web应用提供了丰富的数据展示和操作功能。JqGrid以其高度可配置性和灵活性,广泛应用于数据...
jqgrid-jquery-rails 由Doc Walker认可提供为Rails 3.1+资产管道打包的jqGrid jQuery插件。安装将这些行添加到应用程序的Gemfile : # jqgrid jquery plugin packaged for the rails asset pipelinegem 'jqgrid-...
2. **分页**:jQGrid 提供了内置的分页功能,用户可以轻松地浏览大量数据,而无需一次性加载所有记录。这显著提高了页面响应速度和用户体验。 3. **排序**:用户可以通过点击列头对数据进行升序或降序排序,jQGrid ...
在本文中,我们将深入探讨Spring MVC分页组件和JqGrid如何协同工作,实现高效的数据展示和导出功能。Spring MVC作为Java企业级应用的主流框架,提供了强大的MVC架构支持,而JqGrid则是一个功能丰富的jQuery插件,专...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
**MVC 模式与 JqGrid 结合详解** MVC(Model-View-Controller)是一种软件设计模式,常用于创建可维护、...通过理解并实践MVC的控制器、视图和JqGrid的配置与使用,开发者能够提升Web应用程序的用户体验和功能丰富度。
这个"jqGrid-3.5.alfa-2"版本是截至2009年4月2日的最新版本,对于那些无法访问官方网站获取更新的用户来说,这是一个宝贵的资源。 jqGrid 的核心功能包括数据展示、编辑、搜索、排序、分页以及自定义操作。它支持...
jqGrid是一款功能强大的JavaScript数据网格插件,常用于在网页上展示、操作和管理大量结构化数据。这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。...
在这个`MVC demo`中,我们看到的是将`jqGrid`集成到ASP.NET MVC框架的应用实例,同时还有`jqChart`的使用,这是一个用于创建图表的jQuery插件。 **ASP.NET MVC框架** ASP.NET MVC是一种模型-视图-控制器(Model-...
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
Lib.AspNetCore.Mvc.JqGrid 一组库,它们支持和ASP.NET Core中的使用。 这是从jqGrid的相关功能ASP.NET核心演进 。 Lib.AspNetCore.Mvc.JqGrid.Infrastructure-表示jqGrid选项的类,枚举和常量。 由所有库共享。 Lib...
《jQuery.jqGrid-4.4.3:Web页面列表分页显示的高效解决方案》 在Web开发领域,数据展示是不可或缺的一部分,特别是在处理大量数据时,如何有效地进行分页显示,提高用户体验,成为了开发者关注的重点。jQuery....