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. RxAndroid基本使用1

    1,基本使用 public class MainActivity extends ActionBarActivity implements View.OnClickListener, View.OnT ...

  2. JavaScript语言精髓(1)之语法概要拾遗(转)

    JavaScript语言精髓(1)之语法概要拾遗   逻辑运算 JavaScript中支持两种逻辑运算,“逻辑或(||)”和“逻辑与(&&)”,他们的使用方法与基本的布尔运算一致: v ...

  3. Codeforces #505(div1+div2) D Recovering BST

    题意:给你一个升序的数组,元素之间如果gcd不为1可以建边,让你判断是否可以建成一颗二叉搜索树. 解法:dp,首先建图,然后进行状态转移.因为如果点k左端与i相连,右端与k相连,则i和k可以相连,同时 ...

  4. Mind Map - FreeMind

    FreeMind[1]是一款基于java的免费的脑图(mind mapping)制作与管理软件.FreeMind开发项目组正致力于使其成为一款高效率的工具.FreeMind具有一键“展开/折叠”功能以 ...

  5. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...

  6. noi.ac day1t1 candy

    传送门 分析 我们知道如果设A,B分别为将两家店从大到小排序之后各自的前缀和,则 Ans=Max{Min{A[i],B[j]}-W*(i+j)}. 为了得到这个Ans我们可以枚举两个数的Min,然后剩 ...

  7. 使用java以及jdbc不使用第三方库执行sql文件脚本

    使用java以及jdbc不使用第三方库执行sql文件脚本 2017年02月15日 15:51:45 阅读数:660 使用java执行sql脚本的方法 解析sql脚本,删除不必要的注释和空行 将语句按分 ...

  8. Mysql--连接查询

    内连接查询 意义:找到表和表之间的关系或者是桥梁.连接查询是查询两个或者两个以上的表时使用的. JOIN|CROSS JOIN| INNER JOIN    通过ON  连接条件(这三个方式都行)一般 ...

  9. [raspberry pi3] opensuse使用splash中问题处理

    问题一: QXcbConnection: Could not connect to display :1594410864 解决方案: export QT_QPA_PLATFORM=offscreen

  10. C# GDI

    绘制实心矩形 using (Graphics gp = Graphics.FromImage(bmBlank)) { //... ; Rectangle rec = , y, , );//画一个白块, ...