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