`

kendo-ui中kendoGrid的用法

 
阅读更多
本文实现了一个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
分享到:
评论
2 楼 yangjianzhouctgu 2013-12-15  
Neoman 写道
hi,我看你引入了kendo.web.min.js 这个js,其实他是全部功能大打包,挺大的,如何引入指定功能的模块js呢?我现在不知道他们的依赖


不好意思,我只是拿过来用,没有仔细研究过。
1 楼 Neoman 2013-12-14  
hi,我看你引入了kendo.web.min.js 这个js,其实他是全部功能大打包,挺大的,如何引入指定功能的模块js呢?我现在不知道他们的依赖

相关推荐

    kendo-ui-js-grid.zip_Kendo_grid js

    然后,通过JavaScript的`$("#grid").kendoGrid()`方法初始化Grid,并传入相应的配置选项,如列定义、数据源等。 在数据源方面,Kendo UI Grid支持多种类型的数据源,包括Ajax、JSON、XML等。在描述中提到的服务交互...

    标准kendo ui-grid控件用法

    然后,使用`kendoGrid()`函数来初始化Grid: ```javascript $("#grid").kendoGrid({ dataSource: { /* 数据源配置 */ }, columns: [ /* 列定义 */ ] }); ``` 2. **数据源(DataSource)** Kendo UI Grid的...

    kendo-grid-scroll:程序网格滚动选择 kendo-ui 库。 自动支持网格的虚拟模式

    剑道网格卷轴 kendo-ui 库的程序网格... kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new KendoGridScroll . Model ( $ ( "#grid" ) , function ( gri

    KendoUI速查手册--中文

    通过“Kendo UI 速查手册”,开发者可以快速查找和学习这些组件的使用方法,从而提升开发效率,创建出功能强大、用户体验优良的 Web 应用程序。无论是初学者还是经验丰富的开发者,这份手册都是 Kendo UI 开发过程中...

    Kendo UI框架grid的Excel导出功能改进js代码

    Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...

    动态设置显示kendoui grid控件某一列的格式

    首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤逻辑。在Kendo UI Grid中,过滤功能允许用户根据预设条件筛选数据。而自定义过滤则允许开发者扩展或替换默认的过滤行为,以适应更...

    Laravel开发-laravel-kendo-server-filters

    在本文中,我们将深入探讨如何在Laravel框架中使用Kendo UI Server Filters,这是一个强大的工具,可以帮助开发者构建具有高效数据管理功能的Web应用程序。Laravel是PHP领域内广泛使用的MVC(模型-视图-控制器)框架...

    kendo-grid-editors:kendo-ui 库的附加网格编辑器

    kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , editor : function ( container , options ) { // create custom editors // setup required ...

    Kendo UI控件详细使用说明代码详解

    kendo UI 各个控件的使用说明,着重对grid的使用做了详解,包括增删改查以及查询功能

    Laravel开发-laravel-kendo-server-filters .zip

    在本压缩包“Laravel开发-laravel-kendo-server-filters .zip”中,重点内容是关于使用Laravel框架与Kendo UI的服务器过滤功能。Laravel是一款流行的PHP框架,用于构建优雅、高效的Web应用程序,而Kendo UI则是一个...

    Kendo UI for Vue.docx

    下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 Kendo UI for Vue? Kendo UI for Vue 是 Telerik Company 推出的一个基于 Vue.js 框架的本机组件库,旨在帮助开发者快速构建...

    MVC3中使用kendoui实例

    本文将详细介绍如何在MVC3项目中集成并使用Kendo UI,特别是针对Grid和TreeView的绑定方法。 首先,我们需要了解Kendo UI的核心概念。Kendo UI是一套JavaScript库,它包含多个UI控件,如数据网格(Grid)、下拉列表...

    kendoui asp.net mvc

    文件名`kendoui.aspnetmvc.2013.1.319.commercial.msi`暗示这是一个2013年1月发布的商业版本的安装包,其中包含了Kendo UI for ASP.NET MVC的特定版本。安装此文件后,开发者可以获得完整的库和服务器端组件,以便在...

    KendoUI-demo:学习Kendo UI时编写的一些示例

    这个名为 "KendoUI-demo" 的项目,显然是一个学习和实践 Kendo UI 的实例集合,帮助开发者更好地理解和掌握该框架的功能和用法。在描述中提到的 "资源" 暗示了这里可能包含各种代码示例、教程或者演示应用,这些都是...

    kendoui资源包

    kendoui资源包是一个专为JavaScript开发设计的工具集合,它为构建现代Web应用程序提供了丰富的UI组件和功能。Kendo UI是Telerik公司推出的一款强大的前端框架,它旨在提高开发效率,提供美观且响应式的用户界面。 ...

    ui框架kendoui demo

    在“ui框架kendoui demo”中,你可以探索并学习Kendo UI的各种组件及其用法。这个压缩包文件“Kendo_Ui_Demo”很可能包含了Kendo UI的示例代码、演示页面和相关的文档资源,帮助开发者快速上手并掌握这个框架。 1. ...

    yii-kendoui这个是yii与kendo的整合html5

    在“yii-kendoui”项目中,你可能需要调整 CSS 主题文件,使其与 Yii 应用的界面设计保持一致。 6. **性能优化**:考虑到 Kendo UI 的组件可能会引入大量的 JavaScript 和 CSS,需要注意优化前端资源的加载,比如...

    Kendo UI 最新demo 各种小例子

    在"Kendo UI 最新demo 各种小例子"这个压缩包中,你可能找到了一系列离线的示例,这些示例涵盖了Kendo UI的各种功能和用法。这些小例子对于学习和理解Kendo UI的工作原理及其组件的应用非常有帮助。下面将详细解释...

    kendo ui 示例

    Kendo UI 的API通常包含初始化、方法调用、事件绑定等,例如,你可以学习如何初始化一个Grid,添加数据,处理用户交互等。 3. **样式文件**:`styles` 文件夹很可能包含了Kendo UI 的CSS样式文件。Kendo UI 使用...

    kendo-grid-csv-download:添加从 Kendo UI Web Grid 控件下载数据的功能

    Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...

Global site tag (gtag.js) - Google Analytics