本文实现了一个kendo-ui中kendoGrid从servlet中获取数据,从而显示出来的例子。
程序结构如下:
User.java代码如下:
package com.kendoui.bean;
import com.kendoui.uitls.Generator;
public class User {
private int id;
private String firstName;
private String lastName;
private String city;
private String title;
private int age;
public User(){
id = Generator.getId();
firstName = Generator.getFirstName();
lastName = Generator.getLastName();
city = Generator.getCity();
title = Generator.getTitle();
age = Generator.getAge();
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
DataServlet.java代码如下:
package com.kendoui.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.kendoui.bean.User;
import com.kendoui.uitls.JSONBinder;
public class DataServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
JSONBinder jsonBinder = JSONBinder.buildNormalBinder();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<User> userList = new ArrayList<User>();
System.out.println("==========================================");
for(int i=0;i<20;i++){
userList.add(new User());
}
System.out.println("servlet has been invoked!");
response.getWriter().write(jsonBinder.toJson(userList));
}
}
Generator.java的代码如下:
package com.kendoui.uitls;
/**
* 用来随机生成User类的属性
* @author yangjianzhou
*
*/
public class Generator {
private static int id = 0;
private static String[] firstNames = {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"};
private static String[] lastNames = {"Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"};
private static String[] cities = {"Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"};
private static String[] titles = {"Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"};
public Generator(){
}
public static synchronized int getId(){
id ++;
return id;
}
public static String getFirstName(){
return firstNames[(int)Math.floor(Math.random()*firstNames.length)];
}
public static String getLastName(){
return lastNames[(int)Math.floor(Math.random()*lastNames.length)];
}
public static String getCity(){
return cities[(int)Math.floor(Math.random()*cities.length)];
}
public static String getTitle(){
return titles[(int)Math.floor(Math.random()*titles.length)];
}
public static int getAge(){
return 20+(int)(Math.random()*30);
}
}
JSONBinder.java是对JSON数据的一些操作,例如生成JSON数据,将数组、List等装换为JSON
格式数据。该类是引用别人的。
代码如下:
package com.kendoui.uitls;
/**
* Copyright (c) 2005-2010 springside.org.cn
*
* Licensed under the Apache License, Version 2.0 (the "License");
*
* $Id: JsonBinder.java 1216 2010-09-12 13:52:48Z calvinxiu $
*/
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import org.apache.commons.lang.StringUtils;
import org.codehaus.jackson.map.ObjectMapper;
import org.codehaus.jackson.map.SerializationConfig;
import org.codehaus.jackson.map.annotate.JsonSerialize.Inclusion;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* Jackson的简单封装.
*
* @author calvin
*/
public class JSONBinder {
private static Logger logger = LoggerFactory.getLogger(JSONBinder.class);
private ObjectMapper mapper;
public JSONBinder(Inclusion inclusion) {
mapper = new ObjectMapper();
mapper.configure(SerializationConfig.Feature.FAIL_ON_EMPTY_BEANS, false);
//设置输出包含的属性
mapper.getSerializationConfig().setSerializationInclusion(inclusion);
//设置输入时忽略JSON字符串中存在而Java对象实际没有的属性
mapper.getDeserializationConfig().set(
org.codehaus.jackson.map.DeserializationConfig.Feature.FAIL_ON_UNKNOWN_PROPERTIES, false);
}
/**
* 创建输出全部属性到Json字符串的Binder.
*/
public static JSONBinder buildNormalBinder() {
return new JSONBinder(Inclusion.ALWAYS);
}
/**
* 创建只输出非空属性到Json字符串的Binder.
*/
public static JSONBinder buildNonNullBinder() {
return new JSONBinder(Inclusion.NON_NULL);
}
/**
* 创建只输出初始值被改变的属性到Json字符串的Binder.
*/
public static JSONBinder buildNonDefaultBinder() {
return new JSONBinder(Inclusion.NON_DEFAULT);
}
/**
* 如果JSON字符串为Null或"null"字符串,返回Null.
* 如果JSON字符串为"[]",返回空集合.
*
* 如需读取集合如List/Map,且不是List<String>这种简单类型时使用如下语句:
* List<MyBean> beanList = binder.getMapper().readValue(listString, new TypeReference<List<MyBean>>() {});
*/
public <T> T fromJson(String jsonString, Class<T> clazz) {
if (StringUtils.isEmpty(jsonString)) {
return null;
}
try {
return mapper.readValue(jsonString, clazz);
} catch (IOException e) {
logger.warn("parse json string error:" + jsonString, e);
return null;
}
}
/**
* 如果对象为Null,返回"null".
* 如果集合为空集合,返回"[]".
*/
public String toJson(Object object) {
try {
return mapper.writeValueAsString(object);
} catch (IOException e) {
logger.warn("write to json string error:" + object, e);
return null;
}
}
/**
* 设置转换日期类型的format pattern,如果不设置默认打印Timestamp毫秒数.
*/
@SuppressWarnings("deprecation")
public void setDateFormat(String pattern) {
if (StringUtils.isNotBlank(pattern)) {
DateFormat df = new SimpleDateFormat(pattern);
mapper.getSerializationConfig().setDateFormat(df);
mapper.getDeserializationConfig().setDateFormat(df);
}
}
/**
* 取出Mapper做进一步的设置或使用其他序列化API.
*/
public ObjectMapper getMapper() {
return mapper;
}
}
index.jsp代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virtualization of local data</title>
<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<script src="javascript/jquery.min.js"></script>
<script src="javascript/kendo.web.min.js"></script>
<script src="javascript/console.js"></script>
<script src="javascript/people.js"></script>
</head>
<body>
<div id="loading" class="demo-section" style="text-align: center">
Generating test data...</div>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$("#loading").click(function() {
generatePeople(10, function(data) {
$("#loading").hide();
$.ajax({
type:"POST",
dataType:"JSON",
url:"dataServlet",
success:function(result){
var data = result;
$("#grid").kendoGrid({
dataSource:{
data:data
},
height: 530,
scrollable: {
virtual: true
},
columns: [ { field: "id", title: "ID", width: "70px" },
{ field: "firstName", title: "First Name", width: "130px" },
{ field: "lastName", title: "Last Name", width: "130px" },
{ field: "city", title: "City", width: "130px" },
{ field: "title", title: "Title", width: "130px" },
{ field: "age", title: "Age", width: "130px" },
]
});
},
error:function(){
window.alert('error');
}
});
});
});
</script>
</div>
</body>
</html>
web.xml代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>kendoui</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>dataServlet</servlet-name>
<servlet-class>com.kendoui.servlet.DataServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dataServlet</servlet-name>
<url-pattern>/dataServlet</url-pattern>
</servlet-mapping>
</web-app>
运行结果如下:
点击Generating test data之后显示如下:
- 大小: 26.2 KB
- 大小: 26.8 KB
- 大小: 135.6 KB
分享到:
相关推荐
然后,通过JavaScript的`$("#grid").kendoGrid()`方法初始化Grid,并传入相应的配置选项,如列定义、数据源等。 在数据源方面,Kendo UI Grid支持多种类型的数据源,包括Ajax、JSON、XML等。在描述中提到的服务交互...
然后,使用`kendoGrid()`函数来初始化Grid: ```javascript $("#grid").kendoGrid({ dataSource: { /* 数据源配置 */ }, columns: [ /* 列定义 */ ] }); ``` 2. **数据源(DataSource)** Kendo UI Grid的...
剑道网格卷轴 kendo-ui 库的程序网格... kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new KendoGridScroll . Model ( $ ( "#grid" ) , function ( gri
通过“Kendo UI 速查手册”,开发者可以快速查找和学习这些组件的使用方法,从而提升开发效率,创建出功能强大、用户体验优良的 Web 应用程序。无论是初学者还是经验丰富的开发者,这份手册都是 Kendo UI 开发过程中...
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤逻辑。在Kendo UI Grid中,过滤功能允许用户根据预设条件筛选数据。而自定义过滤则允许开发者扩展或替换默认的过滤行为,以适应更...
在本文中,我们将深入探讨如何在Laravel框架中使用Kendo UI Server Filters,这是一个强大的工具,可以帮助开发者构建具有高效数据管理功能的Web应用程序。Laravel是PHP领域内广泛使用的MVC(模型-视图-控制器)框架...
kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , editor : function ( container , options ) { // create custom editors // setup required ...
kendo UI 各个控件的使用说明,着重对grid的使用做了详解,包括增删改查以及查询功能
在本压缩包“Laravel开发-laravel-kendo-server-filters .zip”中,重点内容是关于使用Laravel框架与Kendo UI的服务器过滤功能。Laravel是一款流行的PHP框架,用于构建优雅、高效的Web应用程序,而Kendo UI则是一个...
下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 Kendo UI for Vue? Kendo UI for Vue 是 Telerik Company 推出的一个基于 Vue.js 框架的本机组件库,旨在帮助开发者快速构建...
本文将详细介绍如何在MVC3项目中集成并使用Kendo UI,特别是针对Grid和TreeView的绑定方法。 首先,我们需要了解Kendo UI的核心概念。Kendo UI是一套JavaScript库,它包含多个UI控件,如数据网格(Grid)、下拉列表...
文件名`kendoui.aspnetmvc.2013.1.319.commercial.msi`暗示这是一个2013年1月发布的商业版本的安装包,其中包含了Kendo UI for ASP.NET MVC的特定版本。安装此文件后,开发者可以获得完整的库和服务器端组件,以便在...
这个名为 "KendoUI-demo" 的项目,显然是一个学习和实践 Kendo UI 的实例集合,帮助开发者更好地理解和掌握该框架的功能和用法。在描述中提到的 "资源" 暗示了这里可能包含各种代码示例、教程或者演示应用,这些都是...
kendoui资源包是一个专为JavaScript开发设计的工具集合,它为构建现代Web应用程序提供了丰富的UI组件和功能。Kendo UI是Telerik公司推出的一款强大的前端框架,它旨在提高开发效率,提供美观且响应式的用户界面。 ...
在“ui框架kendoui demo”中,你可以探索并学习Kendo UI的各种组件及其用法。这个压缩包文件“Kendo_Ui_Demo”很可能包含了Kendo UI的示例代码、演示页面和相关的文档资源,帮助开发者快速上手并掌握这个框架。 1. ...
在“yii-kendoui”项目中,你可能需要调整 CSS 主题文件,使其与 Yii 应用的界面设计保持一致。 6. **性能优化**:考虑到 Kendo UI 的组件可能会引入大量的 JavaScript 和 CSS,需要注意优化前端资源的加载,比如...
在"Kendo UI 最新demo 各种小例子"这个压缩包中,你可能找到了一系列离线的示例,这些示例涵盖了Kendo UI的各种功能和用法。这些小例子对于学习和理解Kendo UI的工作原理及其组件的应用非常有帮助。下面将详细解释...
Kendo UI 的API通常包含初始化、方法调用、事件绑定等,例如,你可以学习如何初始化一个Grid,添加数据,处理用户交互等。 3. **样式文件**:`styles` 文件夹很可能包含了Kendo UI 的CSS样式文件。Kendo UI 使用...
Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...