jquery1.7.2 + easyui1.2.6 + struts2 实现datagrid 显示数据及分页

第一步:准备阶段。

1.JQuery EasyUI 1.2.6

2.Jquery 1.7.2

官网下

easyui - datagrid 官网文档http://www.jeasyui.com/documentation/datagrid.php

jar包

jquery1.7.2 + easyui1.2.6 + struts2 实现datagrid 显示数据及分页

EZMorph是一个简单的java类库用于将一种对象转换成另外一种对象。EZMorph原先是Json-lib项目中的转换器。EZMorph支持原始数据类型(Primitive),对象(Object),多维护数组转换与DynaBeans的转换。兼容JDK1.3.1,整个类库大小只有76K左右。

  在Java EE开发常用的struts2中,json的处理便使用了EZMorph库。

struts配置

jquery1.7.2 + easyui1.2.6 + struts2 实现datagrid 显示数据及分页

html页面


js


这样,在action中返回一个JSONObject,输出格式为:


所以在处理中需要这样来写


FunctionVo这样写


total 为 总条数,rows 为用户数据

在action中


红色为主要代码, BaseFLAG.LIST 为静态变量 返回 "list" 指向 struts.xml 中的 "list"

userService.queryUser(getFirstResult(),getMaxResults()); 为获取用户列表数据的 接口

getFirstResult() 为 返回 (显示数量 * 当前页数 - 显示条数) 封装在 baseAction

getMaxResults() 为 返回 显示数量 封装在 baseAction

resultObj 为封装的列表返回对象

baseAction


rows 为 easyui 默认 自动填充 每页显示条数的 变量

page 为 easyui 默认 自动填充 页数的 变量

人家写的html


注意:

1.extends 是json-default,表示返回json对象格式。

2.result 中name 总是等于root,

3.result包含的那个是设置的那个,action中设置了resultObj,因此这里写resultObj

这样简单的数据表格就出来了。

仅此为学习,有问题请留言。

你可能感兴趣的:(datagrid)