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() { } } ] });
注意: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; }
返回值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); }

<?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) >= DATE_FORMAT(#{subStartTime},'%Y%m%d') </if> <if test="subEndTime != null and subEndTime !=''"> and LEFT(createtime,8) <= 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>
具體的mybatis用法,可以自己查看其他博文。