KendoUI —— data management 类组件 Grid 表格

最新推荐文章于 2025-06-24 09:12:47 发布

原创最新推荐文章于 2025-06-24 09:12:47 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#kendoUI #Grid #组件 #请求数据

前端框架专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了 Kendo UI 中 Grid 组件的基础使用方法，包括如何引用必要的 js 和 css 文件，如何设置 dataSource 和 schema 属性来加载本地或远程数据，以及如何配置 columns 显示数据。同时提供了多个示例代码，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

二、基础学习

1、组件基础引用js与css

<script src="resource/kendoui/js/jquery.min.js"></script>
<script src="resource/kendoui/js/kendo.all.min.js"></script>                   <!-- 熟悉时可引用特点组件的js -->
<link href="resource/kendoui/styles/kendo.common.min.css" rel="stylesheet" />  <!-- 基本样式定义，必须 -->
<link href="resource/kendoui/styles/kendo.default.min.css" rel="stylesheet" /> <!-- 默认的所有 kendoUI 组件的样式定义-->

2、语法

$("#id").kendoGrid({ 属性设置列表 });

三、属性

1、dataSource了与 schema 属性

数据源，可以是本地数据（如：json对象数组）或远程数据（如：访问REST 服务返回json数据）

下面是自己测试成功的模板（官网给的不可用！）：

<div id="grid1"></div>
<div id="grid2"></div>
<script>
    var people = [ { firstName: "John",lastName: "Smith",email: "john.smith@telerik.com" } ];
    $(document).ready(function () {
	//加载本地数据
    	$("#grid").kendoGrid({ dataSource:people});  	//设置数据源为本地json对象数组，表头即属性firstName、lastName、Email	
        //重点:加载远程数据
	$("#grid").kendoGrid({ 
            dataSource:{
		transport:{
		    read:{
		        url:"REST_URL"，		//REST_URL 为返回json对象数组的REST 服务
			dataType:"json"			//REST 服务一般返回json
		    }
		},		
		schema:{
		    data:"dataName",			//必须属性，dataName为我们使用的json对象数组
		    model:{
			//字段映射与解析
		        fields:{
			    fieldName1:{type:"string|number|date"}
			    fieldName2:{type:"string|number|date"}
			    ……
			}
    	 	    }	
		}
	    },
	    //字段与表格表头的映射
	    columns：[
		{field:"fileName1",title:"第一列的表头"},
		{field:"fileName2",title:"第二列的表头"}
		……
	    ]
	    //其它设置
        });  
   });
</script>

说明：
1）、本地dataSource，不能为json对象，只能为json对象数组，且json对象不能嵌套！
2）、远程的dataSource，必须指定与transport 对应的schema，表示使用的具体数据；
3）、schema 的 data属性值为 REST 服务返回对象的JSON 对象数组名，因为REST 返回的实际是一个Object 对象，该对象里面包含了counts、fields、_proto_ 三个属性，其中fields 是一个json对象数组（它的名字应该与我们具体定义的Controller映射路径有关），也即我们真正需要的数据。

先测试下：
第一步：
SpringMVC 工程Test 中定义了一个REST Service，其某个方法的绝对访问路径为：http://localhost:8082/Test/service/request/fields，它查找数据库设置model后，返回一个MappingJacksonJsonView 对象。
第二步：
浏览器测试访问该服务，并查看具体返回的数据。

测试代码：

var obj2;
$.get(  
	"service/request/fields",  
	function(data){ obj2=data };
	"json"
);

结果：

可见，返回的是Object，而我们需要的是fields的json对象数组，所以不能直接使用。
第三步：
生成最基础的表格，测试关键js代码：

//#test_grid为一个空div
var grid=$("#test_grid").kendoGrid({
    dataSource:{
        transport : {
	    read : {
		url : "service/request/fields",
		dataType : "json"
	    }
	},
	schema: {
	    data:"fields",
                model: {
                    fields: {
                        id: { type: "string" },
                        name: { type: "string" }
                    }
                }
        }
    },
    height: 300,//没有width属性，因为通常是在div中生成表格，而div为块元素
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {field:"name",title:"Name",width:50},
        {field:"id",title:"ID",width:50}
    ]
});

结果：

所有的记录都在展示在同一个表格中，左下角的按钮样式不对（说明没有引用某个css文件），且数据没有进行分页，右下角显示no items to display。

第四步：

修改data 属性值，代码为：

var grid=$("#test_grid").kendoGrid({
    dataSource: {
        transport: {
            read: "service/request/fields",
            type: "GET",
            dataType:"json"
        },
        schema: {
	    data: function(d){
		return d.fields;
	    },
            model: {
                fields: {
                    id: { type: "string" },
                    name: { type: "string" }
                }
            },
            total: function(data) {
                return data.fields.length; 
            }
        },
        pageSize: 20
    },
    height: 300,
    groupable: true,
    sortable: true,
    filterable:true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {field:"name",title:"Name",width:50},
        {field:"id",title:"ID",width:50}
    ]
});

同时引入kendo.default.min.css，则结果为：

若上面改为引入kendo.bootstrap.min.css，则结果样式为：

四、总结

1、关于引用的js 与css 文件

必须引用：

<script src="resource/kendoui/js/jquery.min.js"></script>
<script src="resource/kendoui/js/kendo.all.min.js"></script>                   <!-- 熟悉时可引用特点组件的js -->
<link href="resource/kendoui/styles/kendo.common.min.css" rel="stylesheet" />  <!-- 基本样式定义，必须 -->
<link href="resource/kendoui/styles/kendo.default.min.css" rel="stylesheet" /> <!-- 默认的所有 kendoUI 组件的样式定义-->

说明：

对组件比较熟悉时，可不引用kendo.all.min.js而只引用用到的组件的js。对kendo.default.min.css同理，可替换为bootstrap风格的kendo.bootstrap.min.css或其它风格的css。

2、数据字段格式
格式有string、number、date等，都可对显示的数据格式进行控制。如：

columns: [
	{field:"stringType",title:"字符串类型",width:100},
	{field:"numberType",title:"数字类型",width:100},
	{field:"dateType", title:"日期类型",width:100}
]

3、数据绑定

作用：

实现：

4、较完整可重用示例

代码：

效果：