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"/>