KendoUI学习_01
KendoUI学习_01
- 入门指南
- 1.0 必须的JavaScript和CSS文件
- 2.0 数据绑定
- 3.0 组件初始化
- 4.0 组件的详细配置
- 5.0 模板
- 6.0 全球化
入门指南
以下内容是我根据KendoUI官方-入门指南记录的部分知识，更为详细的内容在官网上有说明。如有错误，请指出。
顺便附上官方源码-试运行入口链接
1.0 必须的JavaScript和CSS文件
在HTML文件的头部添加上相对应的js和css链接
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuerytitle>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"
rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js">script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js">script>
head>
<body>
<p>
Hello，<a href="...">Kendo UI for jQuerya>!
This is version <strong id="kendoVersion">strong>
p>
<script>
$(function() {
$("#kendoVersion").text(kendo.version);
});
script>
body>
html>
2.0 数据绑定
创建一个Kendo UI DataSource，稍后我们将使用它来绑定Grid。关于数据源的属性配置，后面有详细的说明
数据源可以获取远程的数据，也可以采用本地写死的数据方式
--》 在本地写死数据，用于后面的调用
var orderData = [
{ OrderID: 1, OrderDate: "2017-11-06T12:00:00", Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
{ OrderID: 2, OrderDate: "2019-03-02T12:00:00", Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 3, OrderDate: "2019-06-26T12:00:00", Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 4, OrderDate: "2017-09-20T12:00:00", Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
{ OrderID: 5, OrderDate: "2017-12-12T12:00:00", Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
{ OrderID: 6, OrderDate: "2018-02-08T12:00:00", Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 7, OrderDate: "2018-05-05T12:00:00", Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
{ OrderID: 8, OrderDate: "2019-08-03T12:00:00", Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
{ OrderID: 9, OrderDate: "2018-10-29T12:00:00", Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
{ OrderID: 10, OrderDate: "2018-01-23T12:00:00", Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
{ OrderID: 11, OrderDate: "2018-04-17T12:00:00", Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
{ OrderID: 12, OrderDate: "2017-07-11T12:00:00", Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" },
{ OrderID: 13, OrderDate: "2017-10-24T12:00:00", Freight: 43.65, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 14, OrderDate: "2018-03-11T12:00:00", Freight: 54.76, ShipCity: "Busan", ShipCountry: "South Korea" },
{ OrderID: 15, OrderDate: "2018-06-17T12:00:00", Freight: 65.87, ShipCity: "Shenzhen", ShipCountry: "China" },
{ OrderID: 16, OrderDate: "2018-10-13T12:00:00", Freight: 76.98, ShipCity: "Hong Kong", ShipCountry: "China" },
{ OrderID: 17, OrderDate: "2019-04-19T12:00:00", Freight: 87.09, ShipCity: "Dubai", ShipCountry: "UAE" },
{ OrderID: 18, OrderDate: "2019-07-25T12:00:00", Freight: 98.21, ShipCity: "Felixstowe", ShipCountry: "UK" },
{ OrderID: 19, OrderDate: "2017-09-22T12:00:00", Freight: 13.24, ShipCity: "Los Angeles", ShipCountry: "USA" },
{ OrderID: 20, OrderDate: "2018-12-09T12:00:00", Freight: 35.46, ShipCity: "New York", ShipCountry: "USA" },
{ OrderID: 21, OrderDate: "2018-02-04T12:00:00", Freight: 57.68, ShipCity: "Guangzhou", ShipCountry: "China" },
{ OrderID: 22, OrderDate: "2019-05-16T12:00:00", Freight: 9.87, ShipCity: "Long Beach", ShipCountry: "USA" },
{ OrderID: 23, OrderDate: "2019-08-18T12:00:00", Freight: 24.13, ShipCity: "Singapore", ShipCountry: "Singapore" }
];
--》配置DataSource ，取前面写死的数据
var gridDataSource = new kendo.data.DataSource({
data: orderData,
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
OrderDate: { type: "date" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
sort: {
field: "OrderDate",
dir: "desc"
}
});
3.0 组件初始化
首先，在页面添加一个新元素div
通过 JavaScript 将组件实例化并使用定义的数据源。 本步骤要放在DataSource之后
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource
});
4.0 组件的详细配置
在第3步中，只是初始化一个Grid，接下来还能对这个Grid进行详细的配置
- 定义用户友好的列标题和宽度
- 启用数据操作 - 分页，排序和过滤
- 定义高度并启用滚动，以便网格无法无限扩展
pageable 是否分页
sortable 是否可以排序
filterable 是否可以过滤显示
columns是用来描述你的Grid中显示的那些字段
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource,
height: 400,
pageable: true,
sortable: true,
filterable: true,
columns: [{
field:"OrderID", -->订单ID
title: "Order ID",
width: 160
}, {
field: "Freight", -->运费
width: 160,
}, {
field: "OrderDate", -->订购日期
title: "Order Date",
width: 200,
}, {
field: "ShipCountry",-->送货国家
title: "Ship Country"
}, {
field: "ShipCity", -->送货城市
title: "Ship City"
}]
});
5.0 模板
在KendoUI中可以为组件中的属性字段根据不同的需求配置不同的模板
接下来，我们将根据Freight（运费）的不同显示不同的字体颜色
1.0 首先需要在全局范围中定义一个getFreightColor函数。
因为Kendo UI模板在全局范围内进行评估，因此它们调用的所有函数也必须在全局范围内定义。
function getFreightColor(freight) {
if (freight > 60) {
return "#090";
} else if (freight < 30) {
return "#f00";
} else {
return "#00c";
}
}
2.0 在Freight（运费）列模板中调用该函数
{
field: "OrderDate", --》订购日期
title: "Order Date",
width: 200,
template: "#=Freight#"
}
6.0 全球化
全球化是许多软件应用程序的标准要求。
Kendo UI允许开发人员通过添加其他JavaScript文件来覆盖小部件的默认英语消息。
另一方面，某些小部件，例如Calendar，DatePicker和NumericTextBox可以改变它们显示日期和数字的方式。