1 准备工作

引入JS文件和CSS文件

<link href="js/kendoui/styles/kendo.common.min.css" rel="stylesheet" />

<link href="js/kendoui/styles/kendo.silver.min.css" rel="stylesheet" />

<script src="js/kendoui/js/jquery.min.js"></script>

<script src="js/kendoui/js/kendo.all.min.js"></script>

2 数据源

2.1 创建数据源

· var dataSource = new kendo.data.DataSource({

……

});

2.2 数据源常用配置项

· data:数据,数据类型有json和xml

data: [{"userId":63,"userNo":"test1","userName":"用户"}]

· transport:加载或保存数据

transport : {

read : {

url : "userManager?action=getUserInfosByDeptId",

dataType : "json"

},

update : {

url : "userManager?action=test",

dataType : "jsonp"

},

create : {

//添加数据,参考update方法

},

destroy : {

//删除数据,参考update方法

},

parameterMap : function(data, type) {

switch (type) {

case "read": {

return {

deptId : 0

};

}

default: {

return {

//返回修改的json

userinfo : kendo.stringify(data.models)

};

}

}

}

}

· schema :数据源的结构,可对每个字段进行配置

schema : {

model : {

id : "userId",

fields : {

userNo : {

editable : false,//是否需要编辑

nullable : true,//是否允许为空

validation : {required : true}//验证

}

}

}

2.3 常用方法

· dataSource.read()//重新读取数据源

· dataSource.sync()//保存数据源的修改

· dataSource.data()//获取数据源的数据

· dataSource.data([{ name: "John Doe" }])//设置数据源的数据

3 Grid

3.1 创建Grid

$("#grid").kendoGrid({

……

});

3.2 Grid常用配置项

l dataSource:dataSource,//数据源

l groupable: true,//是否允许分组

l editable : true,//是否允许修改修改模式“inline”行内模式,"popup"弹窗模式

l filterable :true//是否开启筛选

l columnMenu: true//是否开启列菜单

l reorderable: true//是否允许对列进行排序(手动拖拽列)

l sortable: true//是否允许排序

l selectable : true,//是否允许选择 “multiple row”:多行选择, "multiple cell" 多单元格选择,"row"单行,"cell"单元格

l pageable:true/是否分页

pageable: {

refresh: true,//刷新按钮

pageSizes: 10//每页大小

buttonCount: 5//页码按钮数量

}

l columns//列

columns: [{field: "ContactName",//字段名

title: "Contact Name",//列名

Width: 200, //列宽

Format:"yyyy-mm-dd"

editor : stratDateEditor//自定义编辑

}]

function stratDateEditor(container, options) {

$(

'<input  type="text" name="startDate" data-bind="value:startDate">')

.appendTo(container).kendoDateTimePicker({});

}

3.3 Grid 常用事件

change : function(e) {

//获取选中行的数据

this.dataItem(this.select());

}

3.4 模板Template

//行模板

rowTemplate: kendo.template($("#rowTemplate").html())

//间隔行模板

altRowTemplate: kendo.template($("#altRowTemplate").html())

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr data-uid="#: uid #">

<td class="photo">

<img src=" #:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />

</td>

<td class="details"> <span class="title">#: Title #</span>

<span class="description">Name : #: FirstName# #: LastName#</span>

<span class="description">Country : #: Country# </span></td>

<td class="employeeID">#: EmployeeID #</td></tr>

</script>

4 TreeView

4.1 创建Treeview

$("#treeview-sprites").kendoTreeView({

……

});

4.2 Treeview配置项

l dataSource : deptDataSource,//数据源

l dataTextField : "deptName",//显示文本字段

l dragAndDrop: true,//是否允许拖拽节点

l checkboxes : {checkChildren : true},//节点前显示复选框

4.3 TreeView数据源

Json格式[{deptId:1,childrenList:[{deptId:2,childrenList:[{....}]}]}]

schema : {

model : {

id : "deptId",

children : "childrenList",

hasChildren : function(item) {return item.childrenList.length != 0;

}}}

4.4 TreeView常用方法

//获取TreeView对象

var treeview = $("#treeview").data("kendoTreeView");

//根据文本查找节点

treeview.findByText("xxxx")

//展开节点(只能展开下一级)

treeview.expand(".k-item");

4.5 TreeView常见事件

//选择节点事件

select : function(e) {

var treeview=$('#treeviewsprites').data('kendoTreeView');

//获取选中节点的数据

var data = treeview.dataItem(e.node);

}

//绑定事件

dataBound : function(e) {

//展开所有节点

$('#treeview-sprites').data('kendoTreeView').expand(".k-item");

},

5 Window

5.1 创建Window

$("#window").kendoWindow({

…...

});

5.2 Window常用配置项

l width: "505px",

l height: "315px",

l title: "Rams's Ten Principles of Good Design",

l actions: ["Pin", "Refresh","Minimize","Maximize", "Close"]

//顶端按钮:固定钉、刷新、最小化、最大化、关闭

5.3 Window常用方法

//获取窗口对象

Var dialog = $("#dialog").data("kendo Window");

//居中显示

dialog.center();

//打开窗口

dialog.open();

//关闭窗口

dialog.close();

6 DropDownList

6.1 创建DropDownList

$("#ddlSex").kendoDropDownList({

……

})

6.2 DropDownList配置项

l dataSource:datasource//数据源

l dataTextField : "text",//显示文本字段

l dataValueField : "value"//值字段

6.3 DropDownList常用方法

//获取DropDownList对象

var ddl =("#ddlSex").data("kendoDropDownList");

//获取选中项的值

ddl.dataItem().value;

//赋值

ddl.value("……");

//设置选中的值

ddl.select(index)

5 Validator

5.1 创建Validator

$("#formId").kendoValidator({

……

});

注:验证的控件必须在<form>标签内

5.2 Validator配置项

l validateOnBlur: false//失去焦点时验证,默认值为true

l rules //自定义验证规则

rules: {customRule1: function(input) {

if (input.is("[name=username]")) {

return input.val() === "Tom";}

return true;},

customRule2: function(input) {……}

}

l messages //自定义验证消息

messages: {

customRule1: "Your UserName must be Tom",

customRule2: "All fields are required"

}

5.3 常用Validator

l 非空验证

<input type="text" name="fullname" id="fullname" required validationMessage="Please enter {0}" />

{0} 为 name属性的值

l 输入类型验证

<input type="tel" id="tel" pattern="\d{10}" required validationMessage="Please enter number"/>

Kendo UI 简单使用的更多相关文章

  1. kendo ui简介

    Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha ...

  2. HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据

    在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...

  3. 集成 Kendo UI for Angular 2 控件

    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...

  4. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  5. Kendo UI for ASP.NET MVC 的一些使用经验(转)

    转自 http://blog.csdn.net/dj2008/article/details/45313805 最近的项目里用到了Kendo UI.这货很好很强大,但可惜官方文档组织的并不是很好,有很 ...

  6. HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用

    Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...

  7. Kendo UI for Angular 2 控件

    Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免 ...

  8. Kendo UI开发教程(27): 移动应用开发简介

    Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI M ...

  9. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

随机推荐

  1. day17 11.JdbcUtils工具抽取

    连接数据库的四个必要条件:driverclass.url.username.password. package cn.itcast.utils; import java.sql.Connection; ...

  2. Centos7安装mysql缺乏yum源怎么安装

    找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget   1 yum install wget 2.下载mysql的 ...

  3. Blender 工具使用—–准星

    Blender 工具使用-–准星 移动准星 直接按鼠标左键 将准星放置在坐标原点 快捷键Shift + C 将准星放置到指定位置 比如下面这个位置: 按Shift + S快捷键组合,弹出一个工具栏,选 ...

  4. Umbraco Form 中需要为一个Form的某个field设置特别的CSS样式

    在项目开发中,我有一个需求,需要建立一个页面,这个页面上有一个form, 这个form上有一个checkbox, 就是普通的接受terms & conditions, 类似下图 这个项目中的U ...

  5. matlab处理:批处理图像分块

    有一个图像分块的代码,可以直接将一幅图像分为5*5的小块,代码如下: %[FileName,PathName] = uigetfile('*.*','Select the image'); Im=im ...

  6. android 设置颜色的三种方法

    1.利于系统自带的颜色类 如TextView1.setTextColor(Android.graphics.Color.RED); 2.数字颜色表示法 TextView1.setTextColor(0 ...

  7. boost.asio系列(一)——deadline_timer

    一.构造函数 一个deadline_timer只维护一个超时时间,一个deadline_timer不同时维护多个定时器.在构造deadline_timer时指定时间: basic_deadline_t ...

  8. Linux修改MySQL max_allowed_packet 值

    修改配置文件 vi /etc/my.cnf change "max_allowed_packet = 1M" to "max_allowed_packet = 32M&q ...

  9. left join和right join、inner join 区别

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner join(等值连接) ...

  10. 继承&多态

    继承: 概念: 基类,超累,父类 访问权限: Public :无限制,自由访问 Private:不可继承 protected :包内,包外,可访问,继承 default:没有指明任何权限下,默认在同一 ...