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 前后台功能流程介绍