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

转载请注明：KendoUI中文网 » SpringMVC + MyBatis + KendoUI Grid 前后台功能流程介绍

转载于:https://my.oschina.net/u/1991378/blog/601562