附:api 地址：http://docs.telerik.com/kendo-ui/api/introduction
组件示例代码地址：http://demos.telerik.com/kendo-ui/
1，首先定义好后台数据，返回一组json数据
@RequestMapping("/showUsers.do")@ResponseBodypublic Map<String, Object> userList(@RequestParam(value = "page", required = false, defaultValue = "0") Integer page,@RequestParam(value = "pageSize", required = false, defaultValue = "20") Integer pageSize) {List<UserDto> users=userService.list(page,pageSize);int count=userService.getTotalCount();Map<String, Object> _result = new HashMap<String, Object>();_result.put("results", users);_result.put("__count", count);Map<String, Object> result = new HashMap<String, Object>();result.put("d", _result);return result;}@RequestMapping("/users.do")public String userListPage() {return "user/user.jsp";}如上：后台json格式为固定，__count 对应数据总条数，前台会根据配置自动分页，
当然返回json格式也可以自定义，如返回格式为
String json = new Gson().toJson(list);return "{/"users/" :" + json + ", /"totalSize/" :" + totalSize + "}";如此前台定义schema 时，需加入如下配置：（具体配置下面会看到） data : "hosts", total: "totalSize",
2，下面来看一下前台部分
a,首先要有一个jsp页面，并定义一个有id的div
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib PRefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix='spring' uri="http://www.springframework.org/tags" %><%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %><head><link rel="stylesheet" type="text/CSS" href="<spring:url value='/resources/css/common.css'/>" /><link rel="stylesheet" type="text/css" href="<spring:url value='/resources/js/plugins/easyUI/themes/default/easyui.css' />"><link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/main.css' />"><link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/icon.css' />"><link rel="stylesheet" type="text/css" href="<spring:url value='/resources/css/themes/default/bootstrap.css' />"><link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.common.min.css"/>'/><link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.uniform.min.css"/>'/><link rel="stylesheet" type="text/css" href='<spring:url value="/resources/js/plugins/kendoui/styles/kendo.silver.min.css"/>'/><link rel="stylesheet" type="text/css" href='<spring:url value="/resources/css/kendo_ui_gray.css"/>'/><script src="<spring:url value='/resources/js/plugins/kendoui/js/jquery.min.js' />"></script><script src='<spring:url value="/resources/js/plugins/kendoui/js/kendo.all.min.js"/>'></script><script src="<spring:url value='/resources/js/plugins/jquery.easyui.min.js' />"></script><script src="<spring:url value='/resources/js/modules/user/userList.js' />"></script></head><body><div id="example" class="k-content"> <div id="clientsDb"> <div id="grid" style="height: 380px"></div> </div></div><div id="dialog"></div></body>
b,来看一下js部分， 首先需要定义一个datasource
$(function() { var dateFormate = "yyyy-MM-dd HH:mm:ss"; var prefix = "user"; var dataSource = new kendo.data.DataSource({ type: "odata", pageSize : 20, serverPaging: true,//服务器端是否进行分页查询 serverFiltering: true, transport : { read : { url : prefix + '/showUsers.do', dataType : "json", }, update: { url: prefix + '/save.do', dataType: "json", contentType:"application/x-www-form-urlencoded", type : "post", data: function() { var roleid=$("#roleId").val(); return { roleId:roleid } } }, destroy: { url: prefix + '/delete.do', contentType:"application/x-www-form-urlencoded", type : "post", dataType: "json", }, create: { url: prefix + '/save.do', dataType: "json", contentType:"application/x-www-form-urlencoded", type : "post", data: function() { var roleid=$("#roleId").val(); return { roleId:roleid } } }, parameterMap: function(data, type) { if (type == "create"||type == "update") { delete data.role; var roleid=$("#roleId").val(); data.roleId=roleid; } return data; } }, requestEnd: function(e) { var response = e.response; if(response){ var type = e.type; if(type !='read'){ var status = response.status; if(status == 200){ //lert(response.message); this.read(); } else { alert(response.message); } } }else{ alert("服务器异常，请重试！"); } }, schema : { model : { id : "id", fields : { id : {type : "string"}, passWord :{type : "string"}, realName : {type : "string"}, phone : {type : "string"}, status : { type : "string", defaultValue : "激活" }, userName : {type : "string"}, email : {type : "string"}, role : {}, createdTime : { type : "string", //this field will not be editable (default value is true) editable: false, defaultValue: kendo.toString(new Date(), dateFormate) } } } }, sort : { field : "createdTime", dir : "desc" }, }); });下面说一下重要的配置点，
dataSource：定义grid加载的数据源，以及配置增删改 表单提交的url和需要的表单参数
首先需要配置一个dataSource来获取后台数据，以及增删改的操作那个type:odata 官网是这么说的If set the data source will use a predefined transport and/or schema. The supported values are "odata" which supports the OData v.2 protocol and "signalr".没看懂，反正就默认的odata就对了
transport ，就是配置增删改查的连接，配置好，后都会自动操作的注意的是sava 与update contentType:"application/x-www-form-urlencoded", 后台可以直接通过对应的bean接收参数，（字段类型最好一致，如时间的格式，不然可能会报400的错，其实就是格式没对应，如果出现，可通过firebug查看一下请求的参数书否对应）
create 中的data可在请求之前进行追加参数，注意是追加，格式也是json格式
parameterMaptype 就是“read” “create”等data 就是 model 中定义的属性，是json的格式，可通过判断在提交表单时追加参数，或者去除无关的参数
requestEnd 是在操作完之后进行的回调时间，可获取到response 进行判断操作是否成功对应的有requestStart 可以在请求发送之前进行js操作
schema 用于在转换后台发送来的数据 对应javabeanC,下面通过jquery选取 html中定义的对应id的div元素来加载通过kendo实例的grid
$("#grid").kendoGrid({ dataSource : dataSource, sortable : false, selectable : "multiple",// 多选 height : 500, navigatable: true, //toolbar: ["create", "save", "cancel"], editable: true, toolbar : [ { name : "create", text : "新增用户" } ], pageable : { pageSize : 20,// 一页显示多少行数据 previousNext : true,// 是否允许有上一页、下一页、首页、尾页摁扭 numeric : true,// 是否显示翻页处的页数按钮 buttonCount : 5,// 限制页数按钮的显示个数 input : false,// 是否显示输入页数的文本框 refresh : true,// 是否允许刷新页面 pageSizes : true,// 是否允许调整一页显示的行数，可设置[5, 10, 15] messages : { display : "显示 {0}-{1} 条数据 总共 {2} 条数据", empty : "没有数据", itemsPerPage : "选择显示行数", refresh : "刷新", previous : "上一页", next : "下一页", last : "尾页", first : "首页" } }, columns : [ // 显示列定义 { field : "realName", width : 100, title : "姓名" }, { field : "userName", width : 120, title : "用户名", attributes : { "class" : "table-cell", style : "text-align: left; font-size: 14px" }
新闻热点
疑难解答
