SpringMVC结合easyUI中datagird实现分页

  DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。轻量级,单元格合并、多列标题、冻结列和页脚只是其中一小部分功能。

一、提前

  1、SpringMVC注解@RequestMapping(value = "/listUser.htm"),返回值ModelView,解析返回一页面。 注解@ResponseBody用于返回一个模型对象(数据结构),如JSONObject,自定义DataGrid…… 等等。

  2、需要引入相应的js和css,这是利用

<link rel="stylesheet" type="text/css"href="js/themes/default/easyui.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.1.2.2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>

引入文件

datagrid中以及其他easyui元素文字默认都是英文,如果换成中文引入easyui-lang-zh_CN.js

  3、加载DataGrid时,回台接收page=1$rows=10的参数数据,可以通过request.getParamter()函数获取参数,也可以定义到函数参数中,如下图:

@RequestMapping(value = "/queryListUser.json")
@ResponseBody
public DataGrid quyerListUser(HttpServletRequest request,
HttpServletResponse response, int page, int rows) {
}

二、DataGrid简述及实现

下面为一种方法定义datagrid,在js中声名,也可以在table节点中定义。

$('#userGrid').datagrid({
loadMsg : '数据加载中....',
title : "管理员信息一览表",
url : '/queryListUser.json',
method : 'POST',
queryParams : {
'params' : JSON.stringify(params)
},
striped : true, //设置为true将交替显示行背景。相邻行不同颜色
//fit:false,//自适应大小
//fitColumns:true,//列宽适应浏览器,无左右滚动条
rownumbers : true,//行number
pagination : true,//显示页码
pageSize : 10,//初始化每页显示的条数
pageList : [ 10, 20, 50, 100 ],//可以调节的每页显示条数
columns : [ [ {
field : 'ck',
width : fixWidth(0.05),
checkbox : true
}, {
field : 'username',
title : '用户名',
width : 300,
sortable : true,
align : 'center'
}, {
field : 'password',
title : '密码',
width : 100,
sortable : true,
align : 'center'
}, {
field : 'usertype',
title : '类型',
width : 300,
sortable : true,
align : 'center',
formatter : typeColumnsFormatter
}, {
field : 'createtime',
title : '创建时间',
width : 100,
sortable : true,
align : 'center',
formatter : timeColumnsFormatter
} ] ],
sortOrder : "desc",
sortName : "createtime", //初始化时按Id升序排序
toolbar : [ {
iconCls : 'icon-add',
text : '添加',
handler : function() {
alert('Add')
}
}, '-', { //分隔符
iconCls : 'icon-edit',
text : '编辑',
handler : function() {
alert('edit')
}
}, '-', {
iconCls : 'icon-remove',
text : '删除',
handler : function() {
alert('delete')
}
}, '-', {
iconCls : 'icon-search',
text : '查询',
handler : function() { }
} ]
});

DataGrid

注意:pageSize : 10,//初始化每页显示的条数,不起作用, jquey easyui 版本问题, 统一修改为1.5的版本。

针对其属性可以找api文档进行了解。

三、后台实现

1、通过传递前台page,rows,sort,order,后台拼接sql语句进行数据的分页、排序。每次下一页、上一页等操作都会传递后台这些参数;

/**
* shopUser分页查询
*
* @param request
* @param response
* @param page
* 页码 参数传递或者getParameter()
* @param rows
* 每页的大小(条数)
* @return
*/
@RequestMapping(value = "/queryListUser.json")
@ResponseBody
public DataGrid quyerListUser(HttpServletRequest request,
HttpServletResponse response, int page, int rows) {
String paramsObj = request.getParameter("params");
String sort = request.getParameter("sort");//默认排序列名称
String order = request.getParameter("order");//排序方式
JSONObject paramsJson = JSONObject.fromObject(paramsObj);
int start = (page - 1) * rows; // limit 开始位置
int nums = rows; // limit 查询数量
paramsJson.put("start", start);
paramsJson.put("nums", nums);
if(StringUtils.isNotBlank(sort)){
paramsJson.put("sortName", sort);
}else{
paramsJson.put("sortName", "userid");
}
if(StringUtils.isNotBlank(order)){
paramsJson.put("sortOrder", order);
}else{
paramsJson.put("sortOrder", "asc");
} List<ShopUser> shopUsers = new ArrayList<ShopUser>();
int total = rows;
try {
shopUsers = shopUserService.quyeryShopUserWithPage(paramsJson);
total = shopUserService.quyerForCount(paramsJson);
} catch (Exception e) {
e.printStackTrace();
return null;
} if (shopUsers != null && shopUsers.size() > 0) { }
DataGrid dataGrid = new DataGrid();
dataGrid.setRows(shopUsers);
dataGrid.setTotal(total);
return dataGrid;
}

queryList

返回值shopUsers为数据对象,和total查询数量;返回到前台展示页码和条数。

2、这里我使用的MyBatis+Mysql,通过limit实现查询分页

@Repository(value="shopUserMapper")
public interface ShopUserMapper {
int deleteByPrimaryKey(Integer userid); int insert(ShopUser record); //选择性新增
int insertSelective(ShopUser record); ShopUser selectByPrimaryKey(Integer userid); List<ShopUser> selectByName(String name); int updateByPrimaryKeySelective(ShopUser record); int updateByPrimaryKey(ShopUser record); List<ShopUser> queryWithPage(JSONObject jsonObject); int queryForCount(JSONObject paramsJson);
}

ShopUserMapper.java

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.shop.web.dao.ShopUserMapper">
<resultMap id="BaseResultMap" type="com.shop.web.entity.ShopUser">
<id column="userid" property="userid" jdbcType="INTEGER" />
<result column="username" property="username" jdbcType="VARCHAR" />
<result column="password" property="password" jdbcType="VARCHAR" />
<result column="usertype" property="usertype" jdbcType="INTEGER" />
<result column="createtime" property="createtime" jdbcType="BIGINT" />
</resultMap>
<!-- 定义查询结果列 -->
<sql id="Base_Column_List">
userid, username, password, usertype, createtime
</sql> <!-- 分页查询 -->
<select id="queryWithPage" resultMap="BaseResultMap">
select
<include refid="Base_Column_List"></include>
from shop_user
<trim prefix="where 1=1">
<if test="userid != null and userid !=''">
and userid = #{userid,jdbcType=INTEGER}
</if>
<if test="username != null and username != ''">
and username = #{username,jdbcType=VARCHAR}
</if>
<if test="subStartTime != null and subStartTime !=''">
and LEFT(createtime,8) &gt;= DATE_FORMAT(#{subStartTime},'%Y%m%d')
</if>
<if test="subEndTime != null and subEndTime !=''">
and LEFT(createtime,8) &lt;= DATE_FORMAT(#{subEndTime},'%Y%m%d')
</if>
order by ${sortName} ${sortOrder}
</trim>
<trim>
<if test="start != null and nums != null">
limit #{start,jdbcType=INTEGER},#{nums,jdbcType=INTEGER}
</if>
</trim>
</select> <!-- 查询所有count -->
<select id="queryForCount" resultType="Integer">
select count(1) as counts from shop_user
<trim prefix="where 1=1">
<if test="userid != null">
and userid = #{userid,jdbcType=INTEGER}
</if>
<if test="username != null">
and username = #{username,jdbcType=VARCHAR}
</if>
</trim>
</select> <!-- 通过id查询数据 -->
<select id="selectByPrimaryKey" resultMap="BaseResultMap"
parameterType="java.lang.Integer">
select
<include refid="Base_Column_List" />
from shop_user
where userid = #{userid,jdbcType=INTEGER}
</select> <!-- 通过name查询数据 -->
<select id="selectByName" resultMap="BaseResultMap"
parameterType="java.lang.String">
select
<include refid="Base_Column_List" />
from shop_user
where username = #{username,jdbcType=VARCHAR}
</select> <!-- 删除数据 -->
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
delete from shop_user
where userid = #{userid,jdbcType=INTEGER}
</delete> <!-- 新增 -->
<insert id="insert" parameterType="com.shop.web.entity.ShopUser">
insert into shop_user (userid, username, password,
usertype, createtime)
values (#{userid,jdbcType=INTEGER}, #{username,jdbcType=VARCHAR},
#{password,jdbcType=VARCHAR},
#{usertype,jdbcType=INTEGER}, #{createtime,jdbcType=BIGINT})
</insert> <!-- 选择性的新增 -->
<insert id="insertSelective" parameterType="com.shop.web.entity.ShopUser">
<selectKey keyProperty="userid" resultType="Integer">
select LAST_INSERT_ID()
</selectKey>
insert into shop_user
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="username != null">
username,
</if>
<if test="password != null">
password,
</if>
<if test="usertype != null">
usertype,
</if>
<if test="createtime != null">
createtime,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="username != null">
#{username,jdbcType=VARCHAR},
</if>
<if test="password != null">
#{password,jdbcType=VARCHAR},
</if>
<if test="usertype != null">
#{usertype,jdbcType=INTEGER},
</if>
<if test="createtime != null">
#{createtime,jdbcType=BIGINT},
</if>
</trim>
</insert> <update id="updateByPrimaryKeySelective" parameterType="com.shop.web.entity.ShopUser">
update shop_user
<set>
<if test="username != null">
username = #{username,jdbcType=VARCHAR},
</if>
<if test="password != null">
password = #{password,jdbcType=VARCHAR},
</if>
<if test="usertype != null">
usertype = #{usertype,jdbcType=INTEGER},
</if>
<if test="createtime != null">
createtime = #{createtime,jdbcType=BIGINT},
</if>
</set>
where userid = #{userid,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.shop.web.entity.ShopUser">
update shop_user
set username = #{username,jdbcType=VARCHAR},
password = #{password,jdbcType=VARCHAR},
usertype = #{usertype,jdbcType=INTEGER},
createtime = #{createtime,jdbcType=BIGINT}
where userid = #{userid,jdbcType=INTEGER}
</update>
</mapper>

ShopUserMapper.xml

具体的mybatis用法,可以自己查看其他博文。

SpringMVC结合easyUI中datagird实现分页的更多相关文章

  1. jQuery EasyUI中DataGird动态生成列的方法

    EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍Eas ...

  2. 将Jquery EasyUI中DataGird的数据导入Excel中

    1.第一步获取前台DataGrid中的数据 var rows = $('#tb).datagrid("getRows");            if (rows.length = ...

  3. Asp.net EasyUI中的combogrid实现分页功能

    在jquery.easyUI.js 要实现分页,必须在后台接收参数时声明两个变量:page(当前第几页),rows(每页显示多少条信息),否者easyUI前台传递不了分页参数. 这两个属性的名称在ea ...

  4. EasyUi之datagird解读

    1.其json格式需要为:  JSON Code  1234567891011121314151617181920212223   {     ,     "rows": [    ...

  5. Spring+SpringMVC+MyBatis+easyUI整合基础篇(八)mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

  6. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(八)线上Mysql数据库崩溃事故的原因和处理

    前文提要 承接前文<一次线上Mysql数据库崩溃事故的记录>,在文章中讲到了一次线上数据库崩溃的事件记录,建议两篇文章结合在一起看,不至于摸不着头脑. 由于时间原因,其中只讲了当时的一些经 ...

  7. EasyUI中datagrid控件的使用 设置多行表头(两行或多行)

    EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: $('#divData'). ...

  8. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

  9. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

随机推荐

  1. 详解rsync算法--如何减少同步文件时的网络传输量

    先看下图中的场景,客户端A和B,以及服务器server都保存了同一个文件,最初,A.B和server上的文件内容都是相同的(记为File.1).某一时刻,B修改了文件内容,上传到SERVER上(记为F ...

  2. pip UnicodeDecodeError: 'ascii' codec can't decode byte

    http://blog.csdn.net/computerms/article/details/48056103

  3. oracle重装系统后恢复

    前提:各种文件都存在 1.将原oracle文件夹app更名为app_old 2.重新安装oracle(路径,实例等最好都一样),配置监听,服务能正常启动,连接进入数据库 3.关掉oracle服务,将新 ...

  4. <读书笔记>软件调试之道 :问题的核心-重现问题

    声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记. 重现第一,提问第二 问题重现是实证过程的最强大武器,如果不能重现问题,你也无法证明修复了它 ...

  5. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

  6. C#小写数字金额转换成大写人民币金额的算法

    C#小写数字金额转换成大写人民币金额的算法 第一种方法: using System.Text.RegularExpressions;//首先引入命名空间 private string DaXie(st ...

  7. ssh访问控制,多次失败登录即封掉IP,防止暴力破解

    ssh访问控制,多次失败登录即封掉IP,防止暴力破解 一.系统:Centos6.3 64位 二.方法:读取/var/log/secure,查找关键字 Failed,例如(注:文中的IP地址特意做了删减 ...

  8. modelsim(3) - summary ,issue,tips

    1) the OEM of modelsim is 10 times slower than offical questa 2)how to the file full path in the mod ...

  9. JS splice() 定义和用法

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法 arrayObject.splice(index,howmany,item1, ...

  10. WAP端 穿透问题和解决方法

    1. 穿透问题可这么理解, 共有2种问题: 问题1: 有A 和 B 两个弹层,B 弹层盖在A 弹层上面,B 弹层绑定 touchend 事件,当用户点击B 的时候 B隐藏,由于touchend 事件触 ...