看Kendo UI文档

看完了Kendo UI的文档，感觉kendo UI就是简化了JS的许多内容，书写更加容易，文档里没找到treeview，去百度再找找看。

重点DataSource，Grid；

记：控制远程数据源；

var dataSource = new kendo.data.DataSource({ transport: { read: { // the remote service url url: "http://search.twitter.com/search.json", // JSONP is required for cross-domain AJAX dataType: "jsonp", // additional parameters sent to the remote service data: { q: "html5" } } }, // describe the result format schema: { // the data which the data source will be bound to is in the "results" field data: "results" }});

记：配置一个 Grid 组件：

<div id="grid"></div><script>$("#grid").kendoGrid({ height: 200, columns:[ { field: "FirstName", title: "First Name" }, { field: "LastName", title: "Last Name" } ], dataSource: { data: [ { FirstName: "John", LastName: "Doe" }, { FirstName: "Jane", LastName: "Doe" } ] }});</script>

Kendo UI与java结合不知道是什么样，等找到Kendo UI的包，可以试一试。

我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项： $(“#datepicker”).kendoDatePicker();
初始化一个自动提示输入框组件（autocomplete)
使用 Kendo UI 组件的方法
在获取 Kendo UI 组件对象的引用之后，就可以调用该 UI 组件的方法，例如：
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.value("Cherries");
var value = autocomplete.value();
alert(value); // Displays "Cherries"
</script>
上面的例子中获取 autocompete 对象之后，调用了它的 value()方法来写入和读取该输入框的内容。
监听 Kendo UI 事件
两种方法都把一个函数绑定到autocomplete 的” change ”事件。
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
change: autocomplete_change
});
</script>
使用 bind 方法：
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>

使用 kendo.Class.extend 创建对象：
var Person = kendo.Class.extend({
firstName: 'Not Set',
lastName: 'Not Set',
isAPrettyCoolPerson: false,
sayHello: function() {
alert("Hello! I'm " + this.firstName + " " + this.lastName);
}
});

var person = new Person();
person.sayHello();
创建构造函数，Kendo UI 使用 init 来定义构造函数，这样在创建新对象时，可以通过构造函数来创建新的对象：
var Person = kendo.Class.extend({
firstName: 'Not Set',
lastName: 'Not Set',
isAPrettyCoolPerson: false,
init: function (firstName, lastName) {
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
},

sayHello: function () {
alert("Hello! I'm " + this.firstName + " " + this.lastName);
}

});

var person = new Person("John", "Bristowe");
person.isAPrettyCoolPerson = true;
person.sayHello();

Kendo DataSource 概述：
Kendo 的数据源支持本地数据源（ JavaScript 对象数组），或者远程数据源（XML, JSON, JSONP)，支持 CRUD 操作（创建，读取，更新和删除操作），并支持排序，分页，过滤，分组和集合等。

绑定数据源到 UI 组件
Kendo UI 组件很多都支持数据绑定，UI 组件绑定的数据源可以在配置 UI 组件时设置，或是多个 UI 组件共享同一个数据源。
创建UI组件时设置 DataSource 属性
（一个线型图 X轴employee y轴：sales ）
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: new kendo.data.DataSource({
data: [
{
employee: "Joe Smith",
sales: 2000
},
{
employee: "Jane Smith",
sales: 2250
},
{
employee: "Will Roberts",
sales: 1550
}]
}),
series: [{
type: "line",
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
使用共享的远程数据源：
var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data-service.json",
dataType: "json"
}
}
});

// Bind two UI widgets to same DataSource
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: sharableDataSource,
series: [{
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
}
});
Grid（格子；地图上的坐标方格）
$("#grid").kendoGrid({
dataSource: sharableDataSource,
columns: [
{
field: "employee",
title: "Employee"
},
{
field: "sales",
title: "Sales",
template: '#= kendo.toString(sales, "N0") #'
}]
});

Kendo UI 模板概述：
用三种方式使用 # 语法：
1.显示字面量 #=#
2.显示HTML元素 #：#
3.执行任意的Javascript代码 #if() {# …#}#

外部模板必须定义一个 id,这样你才可以通过 id 来访问这个模板：
//extract the template content from script tag
var templateContent = $("#myTemplate").html();
//compile a template
var template = kendo.template(templateContent);
使用外部模板，你可以使用任意合法的 HTML 元素和 JavaScirpt，只需语法正确
<ul id="users"></ul>

//Create some dummy data
var data = [
{ name: "John", isAdmin: false },
{ name: "Alex", isAdmin: true }
];

var result = kendo.render(template, data); //render the template

$("#users").html(result); //append the result to the page
</script>

输出：
John is User
Alex is Admin

Kendo UI 特效概述：
所有 Kendo UI 特效都是通过 kendo.fx JQuery 选择器封装来创建，每个封装支持显示多种特效。
指定特效显示的方向指定特效显示的方向
大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向，或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的。
大部分特效可以指定多个方向。可以通过特效构造方法的第一个参数来指定方向，或者通过调用构造方法的快捷方法来指明方向。比如下面三种方法的效果是一样的
<div id="foo">
I will be animated
</div>

//Call .play() to run any of the above animations
</script>

Kendo UI Validator 的基本配置：
<div id="myform">
<input type="text" name="firstName" required />
<input type="text" name="lastName" required />
<button id="save" type="button">Save</button>
</div>
然後，在頁面上添加 Kendo UI Validator，添加在 Script 部分，比如：
// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");

// Validate the input when the Save button is clicked
$("#save").on("click", function() {
if (validator.validate()) {
// If the form is valid, the Validator will return true
save();
}
});

使用 MVVM 模式首先创建 ViewModel 对象，ViewModel 对象代表了可以使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象:
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
然后使用 HTML 创建一个 View，这个 View 包含一个按钮和一个文本框。
<div id="view">
<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>
</div>
其中文本框(input) 通过data-bind 属性指明绑定到 ViewModel 对象的 name 域。此时 name 域值发生变化将会反映到 UI 界面的 Input 输入框内容的变化。反之亦然，当 UI 输入框内容发生变化时，ViewModel 的 name 域也发生变化。按钮的 click 事件绑定到 ViewModel 的 displayGreeting 方法。
最后，通过 bind 方法将 View 和 ViewModel 绑定起来。

<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="//img.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
<script src="//img.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/kendo.web.min.js"></script>

</head>
<body>
<div id="view">
<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>
</div>
kendo.bind($("#view"), viewModel); 完整的代码如下：
<script>
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function () {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});

kendo.bind($("#view"), viewModel);
</script>
</body>
</html>

attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性，比如设置 hyperlink 的 herf 和 title 属性， image 元素的 src 或 alt 属性。其基本用法为attr: { attribute1: field1, attribute2: field2 }其中 attribute1 和 attribute2 为 DOM 元素的属性名称，而 field1,field2 为 ViewModel 对象的值域（属性）的名称。比如：
<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
imageSource: "http://www.kendoui.com/image/kendo-logo.png",
imageAlt: "Kendo Logo"
});

kendo.bind($("#logo"), viewModel);
</script>
多选钮(Checkedbox） checked 绑定使用 Kendo checked 绑定到 checkbox 时，当 ViewModel 对应的值为 true, Checkbox 显示选中状态，而当用户点击 checkbox 选择状态时，对应的 ViewModel 的值也随之变化:
<input type="checkbox" data-bind="checked: isChecked" />
<script>
var viewModel = kendo.observable({
isChecked: false
});

kendo.bind($("input"), viewModel);
</script>

绑定一个数组到一组多选框

checked 绑定支持把 ViewModel 对象的一个数组属性绑定到一组多选框，选择一组多选框的某个 Checkbox，它的值被添加到 ViewModel 的数组中，反之，该值从数组中移除。
<input type="checkbox" value="Red" data-bind="checked: colors" />Red
<input type="checkbox" value="Green" data-bind="checked: colors" />Green
<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
<script>
var viewModel = kendo.observable({
colors: ["Red"]
});

kendo.bind($("input"), viewModel);
</script>

中止事件向上传递

如果需要终止事件向上传递(event bubbling)，可以调用 stopPropagation 方法。
中止事件向上传递

如果需要终止事件向上传递(event bubbling)，可以调用 stopPropagation 方法。

这些输入元素 disabled 后，用户无法修改其值。
<div id="view">
<input type="text" data-bind="value: name, disabled: isNameDisabled" />
<button data-bind="click: disableInput">Disable</button>
</div>
<script>
var viewModel = kendo.observable({
isNameDisabled: false,
name: "John Doe",
disableInput: function () {
this.set("isNameDisabled", true);
}
});

kendo.bind($("#view"), viewModel);
</script>

在events中的是函数名，visible中的是变量
Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理（如鼠标事件）。例如：
<div id="view">
<span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
<span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
var viewModel = kendo.observable({
description: "Description",
isDescriptionShown: false,
showDescription: function (e) {
// show the span by setting isDescriptionShown to true
this.set("isDescriptionShown", true);
},
hideDescription: function (e) {
// hide the span by setting isDescriptionShown to false
this.set("isDescriptionShown", false);
}
});

kendo.bind($("#view"), viewModel);
</script>

单页面应用(Single-Page Application,缩写为 SPA）：
Route 通过 Url 的片段功能（#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route 也支持通过代码在应用的不同状态之间切换。View 和 Layout 类用于 UI 的显示。 UI 事件和数据绑定可以通过 MVVM 或 data 初始化属性来完成。
Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。

看Kendo UI文档相关推荐

【react storybook】从零搭建react脚手架，并使用storybook发布组件库到npm，并生成可视化UI文档
storybook 成品展示开发准备开发组件写MDX文档发布文档发布组件成品展示可视化UI文档页面: 可视化UI文档地址: https://guozia007.gitee.io/stor ...
kindle看pdf的文档字体调小了
kindle看pdf的文档字体调小了,怎么改变以下是某个帖子上找到的,不知道是不是真的,有机会再去实验下
jquery ui 文档使用总结
介绍jquery ui文档中的api如何使用 <!doctype html> <html lang="us"> <head> <meta ...
创建Swagger UI文档的步骤
Swagger是一个基于网络的API文档框架.它被用来为API创建交互式文档,这些API是为特定目的而建立的.与其他文档类型相比,Swagger UI文档享有许多优势. 它是开源的使你能够创建和分享 ...
星宿UI文档手册（基于wordpress开源博客架构）
搭建效果演示:在文章末尾可查看以下内容引自官方文件手册: 1.源码及工具下载 HBulider X App开发版:https://www.dcloud.io/hbuilderx.htmlopen i ...
怎么看android sdk 文档
1.我建议大家要养成一个习惯,以后遇到疑问时,首先应该想到去sdk文档上查找,然后再去百度上google:这样做一来可以锻炼自己理解E文的能力,二来也会让自己的印象更深刻些 1号区域:标签栏,各个标签 ...
如何让不懂信息化的甲方客户看懂需求文档，并确认签字？
需求规格书编写完成后如何让客户快速.顺利地确认签字?这是个常见问题,每个软件项目经理和需求工程师都遇到过,要解决这个问题要从甲方客户与软件工程师两个方面进行分析和找答案. 从客户方面看,存在两个问题: ...
小白看cocos creator 文档——_decorator模块
_decorator模块一些JavaScript装饰器,目前可以通过"cc._decorator"来访问.(这些API仍不完全稳定,有可能随着JavaScript装饰器的标准实现 ...
关于我为了看懂技术文档而爬英语技术文档的单词这件事
想法来源之前,应该是看了<大话设计数据结构>作者在书中说过(应该是这本书名,如果不是,抱歉,我没记名字的习惯),为了逼自己学英语,爬取英语网站的单词,把英语网站常用的单词,按出现的次数排 ...

看Kendo UI文档

看Kendo UI文档相关推荐

最新文章

热门文章