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

注：

Ø pattern是HTML5新特性，它的值是正则表达式

Ø 如果设置了validationMessage和自定义规则的message.当自定义规则不通过时，显示的消息也是validationMessage的值。