Kendo UI 简单使用
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 简单使用的更多相关文章
- kendo ui简介
Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha ...
- HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据
在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...
- 集成 Kendo UI for Angular 2 控件
伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- Kendo UI for ASP.NET MVC 的一些使用经验(转)
转自 http://blog.csdn.net/dj2008/article/details/45313805 最近的项目里用到了Kendo UI.这货很好很强大,但可惜官方文档组织的并不是很好,有很 ...
- HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
- Kendo UI for Angular 2 控件
Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免 ...
- Kendo UI开发教程(27): 移动应用开发简介
Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI M ...
- Kendo UI开发教程(7): Kendo UI 模板概述
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...
随机推荐
- day17 11.JdbcUtils工具抽取
连接数据库的四个必要条件:driverclass.url.username.password. package cn.itcast.utils; import java.sql.Connection; ...
- Centos7安装mysql缺乏yum源怎么安装
找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget 1 yum install wget 2.下载mysql的 ...
- Blender 工具使用—–准星
Blender 工具使用-–准星 移动准星 直接按鼠标左键 将准星放置在坐标原点 快捷键Shift + C 将准星放置到指定位置 比如下面这个位置: 按Shift + S快捷键组合,弹出一个工具栏,选 ...
- Umbraco Form 中需要为一个Form的某个field设置特别的CSS样式
在项目开发中,我有一个需求,需要建立一个页面,这个页面上有一个form, 这个form上有一个checkbox, 就是普通的接受terms & conditions, 类似下图 这个项目中的U ...
- matlab处理:批处理图像分块
有一个图像分块的代码,可以直接将一幅图像分为5*5的小块,代码如下: %[FileName,PathName] = uigetfile('*.*','Select the image'); Im=im ...
- android 设置颜色的三种方法
1.利于系统自带的颜色类 如TextView1.setTextColor(Android.graphics.Color.RED); 2.数字颜色表示法 TextView1.setTextColor(0 ...
- boost.asio系列(一)——deadline_timer
一.构造函数 一个deadline_timer只维护一个超时时间,一个deadline_timer不同时维护多个定时器.在构造deadline_timer时指定时间: basic_deadline_t ...
- Linux修改MySQL max_allowed_packet 值
修改配置文件 vi /etc/my.cnf change "max_allowed_packet = 1M" to "max_allowed_packet = 32M&q ...
- left join和right join、inner join 区别
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner join(等值连接) ...
- 继承&多态
继承: 概念: 基类,超累,父类 访问权限: Public :无限制,自由访问 Private:不可继承 protected :包内,包外,可访问,继承 default:没有指明任何权限下,默认在同一 ...