Kendo UI开发总结 By Gloomyfish on 2013-04-25
在Grid中支持分页刷新:
scrollable: {virtual : true
},
在Grid的DataSource中添加分页支持:
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 50,
在grid中显示列(显示/隐藏菜单)与过滤支持菜单
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
datasource
formVM.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 dataSourceitem
var 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上绑定change事件函数: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 =
'';
分享到:
相关推荐
ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI
Telerik Collection for .NET 2018 R2 SP1 kendoui.for.jquery.2018.2.620.commercial
Telerik Collection for .NET 2018 R3 kendoui.for.jquery.2018.3.911.commercial
Kendo UI for jQuery Integration You can use the Kendo UI widgets for jQuery along with Kendo UI components for Angular in the same application. To use the Kendo UI widgets for jQuery together with ...
Kendo UI for jQuery R3 2020, 2020年第3季度更新。Kendo UI for jQuery 2020 R3 2020.3.915
UI 开发资源
KendoUI是一套很棒的HTML5开发控件,它的优点是控件齐全,功能强,易于学习,使用代码简练。 Kendo UI Professional目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI...
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
jQuery的第三方插件Kendo(剑道)UI,可以实现web、DataViz(图表)等。
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%
kendoui for jquery 2017.3.1018 开发组件无限制版本,包含web开发的各种html5标准组件。
Kendo UI 是一个基于HTML5和jQuery 的UI框架用来开发时尚Web应用。这个UI框架包括的很多UI 控件,数据显示组件,和自适应的手机框架,并支持数据绑定,使用模板,拖放功能。
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
kendoui.for.jquery.2018.2.515.commercial telerik kendo 开发版,无需破解
最新版 kendoui.for.jquery.2019.2.514.commercial
kendoui.for.jquery.2019.1.115.commercial.msi Telerik
telerik kendoui for jquery 2018.1.117 commercial
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。