Kendo UI使用方法与教程

KendoUI是一套很棒的HTML5开发控件，它的优点是控件齐全，功能强，易于学习，使用代码简练。
基本使用方法：
1.通过$().kendoXXX将普通的HTML控件转化为Kendo控件；
2.通过设置控件dataSource和服务端进行数据交互；
3.通过控件的Method和Configuration来操作和配置控件。
结合KendoUI的Demo：http://demos.telerik.com/kendo-ui/
KendoUI的帮助：http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter
在Grid中支持分页刷新:

scrollable: {virtual:true},

在Grid的DataSource中添加分页支持：

serverPaging: true,serverSorting: true,serverFiltering: true,pageSize: 50,

在gid中显示列(显示/隐藏菜单)与过滤支持菜单

filterable: true,columnMenu: true,

在Grid中隐藏某个指定的列，需要在columns中指定column下面添加:

hidden:true,

使用模板来格式化显示grid中的列数据，给对应列添加模板的代码如下:

     template : "#=(value==-1) ? '-' :formatValue(value)#"

对齐显示grid中列文本的代码如下：

attributes:{ style:"text-align: right"}

绑定一个Kendo datasource到kendo.observable对象：

var formVM = kendo.observable({sources: formDS,source: null
});

绑定指定的formVM到某个Div元素：

kendo.bind($("#form_div"),formVM);

在页面数据改变时，更新绑定的数据源(DataSource):

formDS.bind("change", function() {//binds the view-model to the first entryin the datasourceformVM.set("source", this.view()[0]);
});

强制更新form_div中的值：

formVM.set("source.userName", 'gloomyfish');对应的HTML为
<input id="uname"name="uname" data-bind="value: source.userName"/>

启动一个新的浏览器新窗口代码如下：

var left = (screen.width/2)-(800/2);
var top = 0;//(screen.height/2)-(800/2);
// force to open new widows in chrome,IE, FF
window.open("personInfo.html","_blank","resizable=yes, scrollbars=yes,titlebar=yes, width=800, height=800, top="+ top +", left="+ left);

下载grid中选中的所有文件：

var grid = $("#file_grid").data("kendoGrid");
var tr = grid.select(); //gets selected <tr> element
if(tr.length >= 1) {       for(var i=0; i<tr.length;i++) {var item =grid.dataItem(tr[i]); //gets the dataSourceitemvar fid = item.id;makeFrame("file/"+ fid +"/fileContent.htm");}
}function makeFrame( url ){var ifrm = document.createElement( "IFRAME");ifrm.setAttribute( "style", "display:none;") ;ifrm.setAttribute( "src", url ) ;ifrm.style.width = 0+"px";ifrm.style.height = 0+"px";document.body.appendChild( ifrm ) ;}

通过window.location或者window.location.href打开指定URL

同步Grid数据更新，使用如下代码：

grid.dataSource.sync()
或者
myGrid.dataSource.read();
myGrid.refresh();

一个Ajax请求跳转页面的例子：

   $.ajax({url : "openMyInfo",type : "POST",data : {userName: name, userId:id },        success : function(jqXHR, textStatus) {if (jqXHR.jsonResponse.success) {              var url = jqXHR.jsonResponse.message;window.location=url;           } else {alert(jqXHR.jsonResponse.message);}},error : function(jqXHR, textStatus, errorThrown) {alert (errorThrown);}
});

Kendo UI dropdown list级联菜单刷新：

在父dropdown list上绑定chang

change : onItemChange

更新子dropdow list的数据源(data source)

var subDDList = $('#subListDiv').data("kendoDropDownList");
subDDList.setDataSource(buildSubList(selectParentId));

上传文件对话框使用

   $("#selectedFiles").kendoUpload({async: {saveUrl: "myDomain/fileUpload.htm",autoUpload: true},multiple:true, // 支持多个文件上传,complete: uploadFileComplete, //上传结束以后处理,error: onError,cancel: onCancel,select: onSelect,success: onSuccess
});

调用代码 $(“# selectedFiles “).click();//模拟鼠标双击事件调用,
页面上selectedFileshtml元素为隐藏对象。
禁用IE缓存，在JQuery1.2以上版本支持：

$.ajax({type:"GET",url:"static/cache.js",dataType:"text",cache:false, // disable cache(禁用IE缓存)ifModified:true
});

在HTML文件中加上：

<meta http-equiv="Expires"content="0"/>
<meta http-equiv="Cache-Control"content="no-cache"/>
<meta http-equiv="Pragma"content="no-cache"/>

提交数据之后打开在新窗口：

<form action="getMyInfo.htm"method="post" target="_blank">

获取Servlet的真是路径：

request.getSession().getServletContext().getRealPath("/");

实现路径重定向：

((HttpServletResponse)response).sendRedirect(redirectURL);

JS中替换反斜线正则表达式：

var myString = content.replace(/\//g, "\\\\");
或者：var value = value.replace(/\\/g, "whatever");

JQuery中报UncaughtSyntaxError: Unexpected identifier

原因多数是你在前一行少加了分号，或者使用了不恰当的关键字标识，比如

setTimeout(new function(){alert(“Helloworld”);}, 200);

其中new是多余关键字，导致错误。
隐藏页面上DIV内容：

$(my_div_id).css("display","none");
显示它：
$(my_div_id).css("display","");

纯JavaScript方式实现，永远有效的隐藏一个DIV内容的方法：

document.getElementById('myDivID').style.display = 'none';
显示它：
document.getElementById('myDivID').style.display = '';

Kendo UI使用方法与教程相关推荐

Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...
Kendo UI Web教程分享
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件 ...
Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
Kendo UI开发教程：Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaS ...
Kendo UI开发教程 2 准备Kendo UI开发环境
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 首先你需 ...
Kendo UI Web教程大全
HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用 HTML5 Web app开发工具Kendo UI Web教程:AutoComplete功能解析 HTML5 Web ...
Kendo UI Web 教程大全
http://blog.csdn.net/BTfan123/article/details/22928019 HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用 HTML ...
Kendo UI Web教程系列
Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 下面盘点了Kendo U ...
Kendo UI使用教程：入门指南
[Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...

Kendo UI使用方法与教程

Kendo UI使用方法与教程相关推荐

最新文章

热门文章