SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述


SpringMVC:

1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面,

 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个
     模型对象(也就是一种数据结构)。

2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后台传递一个  page=1&rows=10
这样的数据,分别表示,第1页和10行数据。

此时,只要在Controller对应的方法上添加两个参数(int page , int
rows)就可以拿到这两个数据。

二.具体实现

1.UserController.java,定义了一个DataGrid的工具类,主要将需要回传的数据格式打包,其中total表示一共的数据,后面的为json数据对象。

1 {"total":13,"rows":[{"id":1,"userName":"zhangsan","age":"22"},{"id":2,"userName":"123","age":"321"},{"id":3,"userName":"3123","age":"4444"},{"id":4,"userName":"432","age":"444"},{"id":5,"userName":"1234","age":"123412"},{"id":6,"userName":"1234","age":"4324"},{"id":7,"userName":"1234","age":"4324"},{"id":8,"userName":"1234","age":"4324"},{"id":9,"userName":"1234","age":"4324"},{"id":10,"userName":"1234","age":"4324"}]}

DataGrid数据格式

 1     @RequestMapping("/getUsers")
2 @ResponseBody
3 public DataGrid getUsers(int page,int rows){
4 DataGrid dg = new DataGrid();
5 List list = userManager.find(page, rows);
6 Long total = userManager.getCountUsers();
7 dg.setTotal(total);
8 dg.setRows(list);
9 return dg;
10 }

UserController

2.UserManager主要就是通过UserDao传入的page和rows
的find方法来获取User的List结果集。

1 public List find(int page, int rows) {
2 return userDao.find(page, rows);
3 }

userManager

3.UserDao通过hql语句,对于后面的return的方法。我也是抄过来的,具体什么意思也没看。。。反正返回的结果是对的。。。

1 public List find(int page, int rows) {
2 String hql = "from User";
3 Query query = this.sessionFactory.getCurrentSession().createQuery(hql);
4 return query.setFirstResult((page - 1)*rows).setMaxResults(rows).list();
5 }

UserDao

4.前段js,显示dataGrid数据,这里没有什么好说的,注意pageSize要和PageList相互配置才行。


$(function(){
$(‘#datagrid‘).datagrid({
url:‘user/getUsers‘,
rownumbers:true,
singleSelect:true,
pagination:true,
idField:‘id‘,
fitColumns:true,
fit:true,
nowarp:false,
border:false,
pageSize:5,
pageList:[5,10],
columns:[[
{field:‘id‘,title:‘id‘,width:100,align:‘right‘},
{field:‘userName‘,title:‘姓名‘,width:100,align:‘right‘},
{field:‘age‘,title:‘年龄‘,width:100,align:‘right‘}
]]
});
});

这样,大功告成,成功显示分页数据。

三.总结

对于MVC的三层结构的意义似乎很了解了,但是在实际的运用上,还做不到炉火纯青,主要体现在Controller层次和Service的层次上,而我的Service层上几乎没有什么操作,只是返回一个Dao层的一个结果,而大量的(我也不清楚Controller上的代码是否为业务逻辑)业务逻辑都写在了Controller上面,显得有些头重脚轻,不便于日后程序的更改。

SpringMVC+easyUI中datagrid分页实现_2014.5.1,码迷,mamicode.com

时间: 2024-12-22 19:16:31

SpringMVC+easyUI中datagrid分页实现_2014.5.1的相关文章

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

MVC+EasyUI中datagrid分页(后台)

public JsonResult ModelList_Json() { int pagesize = int.Parse(Request["rows"]);//获取每页显示多少条记录 int pagenum = int.Parse(Request["page"]);//获取当前页码 List<MODEL.Model> list = GetList();//获取所有记录 List<MODEL.Model> listpage=new List&

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

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

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

EasyUI的DataGrid 分页栏英文改中文解决方案

(一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最后也不会有什么影响的. 其实日期控件引入这个文件也可以把英文变为中文. 还有一种比较笨的解决办法 ,如下: 1 //设置分页控件 2 var p = $('#list_data').datagrid('getPager'); 3 $(p).pagination({ 4 pageSize: 10,//

easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

easyui的datagrid分页写法小结

easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var term

easyUI中datagrid的使用

easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,html中主要是确定datagrid在网页中的位置,css来设置datagrid的样式,js填充datagrid数据. 一 html部分 示例代码如下: <div class="columntablebox" > <table id="columnTable&qu