在使用kendoUI的grid组件时,远程数据源的获取是必不可少的操作,查阅kendoUI的API官网,也能看到有关远程数据的请求,
今天我就总结一下我个人对grid的远程数据获取:read与update,destroy,create的处理区别,我先贴出一段代码,然后会根据代
码做出说明
//先搞一块块状元素,然后将此元素搞成grid组件 <div id="grid"></div> $("#grid").kendoGrid({ })
目前我们有了grid组件,那么就该远程获取数据了:
var dataSource = new kendo.data.DataSource({
transport: {
read : {
url : "对应后台路径",
contentType : "application/json",
type : "POST",
dataType : "json"
},
parameterMap : function(options, operation) {
if (operation == "read") {
var parameter = {
page : options.page,
pageSize : options.pageSize,
take : options.take,
skip : options.skip
};
return kendo.stringify(parameter);
}
}
},
serverPaging: true,
pageSize: 20,
schema : {
model : {
id : "",
},
data: function (response) {
return response.data;
},
total: function (response) {
return response.total;
}
},
});
$("#grid").kendoGrid({
//这个属性就是放置数据的,在这个里面你就可以获取数据(远程,本地)
//我主要说的就是获取远程数据时,read与其他三种方式的区别
dataSource:{
//kendoUI中这种请求和AJax比较类似
transport: {
read: {
url: "user/selectByOrgId",
dataType: "json",
type: "POST"
},
update: {
url: "user/update",
dataType: "json",
type: "POST",
contentType: "application/json"
},
destroy: {
url: "user/delete",
dataType: "json",
type: "POST",
contentType: "application/json"
},
create: {
url: "user/insert",
dataType: "json",
type: "POST",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation == "read") {
return options;
}
return kendo.stringify(options);
}
}
}
});
对应的grid写法为:
$("#XXXX").kendoGrid({
dataSource : dataSource,
height: ,
toolbar: kendo.template($("#template").html()),
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
page: 1,
pageSize: 20,
pageSizes: [20, 50, 100, 500]
},
columns: [
{field : "XX", title :"XX" },
{field : "XX", title :"XX" },
{field : "XX", title :"XX" },
{field : "XX", title :"XX" },
{field : "XX", title :"XX" },
],
selectable: "row",
sortable:true,
resizable: true
}).data("kendoGrid");
后台解析方法(JAVA后台)当:
@Override
public String XXX(String info) {
JSONObject json = JSONObject.fromObject(info);
PageBounds pageBounds = new PageBounds(Integer.parseInt(json.get("page").toString()), Integer.parseInt(json.get("pageSize").toString()));
Map<String,Object> map = new HashMap<String, Object>();//注意这里定义了一个空的map没有赋值,是为了占位,如果需要可以赋值
PageList<Map<String, Object>> list = (PageList<Map<String, Object>>) XXXDao.XXX(pageBounds,map);
try {
list = (PageList<Map<String, Object>>) XXXDao.XXX(pageBounds,map);
} catch (Exception e) {
logger.error("获取信息列表失败! 具体信息为: " + e);
}
JSONObject jsonObj = new JSONObject();
jsonObj.accumulate("data", JSONArray.fromObject(list));
jsonObj.accumulate("total", list.getPaginator().getTotalCount());
return jsonObj.toString();
}
dao层impl代码 @Override public List<Map<String,Object>> XXX(PageBounds pageBounds,Map<String,Object> map) { return sqlSessionTemplate.selectList("XXDao.XXX",map,pageBounds); }
此处特别需要注意的是selectList()内部传递的是三个参数,第一个大家都知道是dao层的路径,第二个是页面内的其他参数(比如你需要从前台传到后台的用户ID等等),第三个就是你解析的前台grid分页参数,如果当你页面不需要传递其他参数的时候,第二个参数需要用一个变量占位,这个变量可以是NULL,数字,或者一个空变量都可以。如果不传参数的话会报错。无法解析。