最新最全的
KendoUI技术文章

SpringMVC + MyBatis + KendoUI Grid 前后台功能流程介绍

 

KendoUI Grid 的文档很全,但是怎么和Java后台结合,尤其是SpringMVC + MyBatis 结合,官方没有介绍,很多刚开始用KendoUI的开发者一开始就会碰到这个问题。光用Grid渲染数据可能还要,但是Grid牵涉到翻页啊,算页的总数啊,这些细节一深入,估计很难倒不少新手了,在这里我做一个系统的前后台介绍,希望能起到抛砖引玉的作用。

前端HTML代码:

<div id="example" style="margin: 0 auto ;width: 1000px;padding: 10px;">
    <div id="grid"></div>
</div>

简单处理,用一个DIV占位符来渲染 KendoUI Grid

前端Javascript代码:

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url:"/api/grid",
                dataType: "json"
            }
        },
        pageSize: 10,
        serverPaging: true,
        schema: {
            data: function (d) { return d.data; }, // 在这里,也可以用  data: "data" 表示
            total: function (d) { return d.count; } // 在这里,也可以用 total: "count" 表示
        }
    },
    pageable: true,
    columns: [
        {
            field: "companyCode",
            title: "公司代码"
        },
        {
            field: "companyName",
            title: "公司名称"
        }
    ]
});

dataType:数据传输格式为 json 格式

pageSize:为每页展示数量,设置为10

serverPaging::设置服务器端翻页

schema:主要用来描述服务端请求的数据模型,schema 内置有8个属性,在这里根据需要,我们描述2个属性使用

schema.data:告诉datasource,服务端返回的json数据中,用于渲染表格的数据(一般是一个数组)是存放到返回数据的哪个key中,本例中,表格的数据存放到返回值的 data 这个key里。注意 schema 的data属性 和 返回值中 data 这个key的区别。

schema.total:告诉datasource表格渲染的记录总数存放在服务端返回值的哪个key中。本例是存放在返回值的 count 这个key中。

pageable:告诉Grid需要翻页栏

 

以上是前端相关的代码


 

后端Java代码

后端代码起始主要是SpringMVC Rest 接口这块的逻辑。

GridRestController.java ,内容参考如下:

package com.demo.grid.api;

import com.google.common.collect.Maps;
import org.apache.ibatis.session.RowBounds;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api/grid")
public class GridRestController{

    @Autowired
    private GridService gridService;

    public static final String OFFSEET = "skip";
    public static final String LIMIT = "pageSize";
    public static final int DEFAULT_OFFSET = 0;
    public static final int DEFAULT_LIMIT = 10;

    @RequestMapping( value = {""}, method = {RequestMethod.GET}, produces = {"application/json"})
    public Map selectByMapper( @RequestParam Map<String,Object> params ){

        Map resultMap = Maps.newHashMap();

        // 读取记录数起始位,前端Datasource根据当前Grid页数和每页展示数量计算得知
        int offset = getOffset( params );

        // 每页获取个数,和前端 pageSize 对应
        int limit = getLimit(params);
        RowBounds rowBounds = new RowBounds(offset, limit);
        
        List grids = gridService.selectByMap(params, rowBounds);
        int count = gridService.countByMap(params);

        resultMap.put( "data", grids );
        resultMap.put( "count", count );

        return resultMap;
    }

    private int getOffset(Map params) {
        Object offset = params.get(OFFSEET);
        if(!StringUtils.isEmpty(offset)) {
            try {
                return Integer.parseInt(offset.toString());
            } catch (NumberFormatException var3) {
                return DEFAULT_OFFSET;
            }
        } else {
            return DEFAULT_OFFSET;
        }
    }

    private int getLimit(Map params) {
        Object limit = params.get(LIMIT);
        if(!StringUtils.isEmpty(limit)) {
            try {
                return Integer.parseInt(limit.toString());
            } catch (NumberFormatException var3) {
                return DEFAULT_LIMIT;
            }
        } else {
            return DEFAULT_LIMIT;
        }
    }
}

Grid翻页时,Datasource 会带上Grid翻页时所用到的 skip、pageSize 等参数附加到 read 的url参数后面,然后通过 SpringMVC后端,通过参数注解的方式,获取Request中的参数,,然后在程序中取出使用即可。

 

以上流程边完成了一个比较简单的 SpringMVC + MyBatis + KendoUI Grid 前后台调用过程。

转载请注明注明来自: KendoUI中文网 http://www.kendoui.io

分享到:更多 ()

评论 1

评论前必须登录!

 

  1. #1

    非常不错的实例。

    admin2年前 (2016-04-07)