Kendo UI 学习

本文详细介绍了Kendo UI的使用,包括Grid、TreeView、Window、DropDownList和Validator等组件的创建、配置项、常用方法及事件。通过实例展示了如何创建数据源、配置Grid的列、模板以及TreeView的拖放功能,还提到了Window的大小和位置控制以及DropDownList的值操作。同时,文章还讲解了Validator的自定义规则和验证消息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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:数据,数据类型有jsonxml

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常用配置项

dataSource:dataSource,//数据源

groupable: true,//是否允许分组

editable : true,//是否允许修改修改模式“inline”行内模式,"popup"弹窗模式

filterable :true//是否开启筛选

columnMenu: true//是否开启列菜单

reorderable: true//是否允许对列进行排序(手动拖拽列)

sortable: true//是否允许排序

selectable : true,//是否允许选择 “multiple row”:多行选择, "multiple cell" 多单元格选择,"row"单行,"cell"单元格

pageabletrue/是否分页

       pageable: {

          refresh: true,//刷新按钮

          pageSizes: 10//每页大小

          buttonCount: 5//页码按钮数量

        }

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配置项

dataSource : deptDataSource,//数据源

dataTextField : "deptName",//显示文本字段

dragAndDrop: true,//是否允许拖拽节点

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常用配置项

width: "505px",

height: "315px",

title: "Rams's Ten Principles of Good Design",

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配置项

dataSourcedatasource//数据源

dataTextField : "text",//显示文本字段

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配置项

validateOnBlur: false//失去焦点时验证,默认值为true

rules //自定义验证规则

 rules: {customRule1: function(input) {

          if (input.is("[name=username]")) {

            return input.val() === "Tom";}

          return true;},

         customRule2: function(input) {……}

}

messages //自定义验证消息

messages: {

customRule1: "Your UserName must be Tom",

        customRule2: "All fields are required"

      }

5.3 常用Validator

非空验证

<input type="text" name="fullname" id="fullname" required validationMessage="Please enter {0}" />

{0} 为 name属性的值

输入类型验证

<input type="tel" id="tel" pattern="\d{10}" required validationMessage="Please enter number"/>

注:

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

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

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值