SpringMVC結合easyUI中datagird實現分頁

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) &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>

 

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