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 = '';

JQuery Kendo UI使用技巧总结的更多相关文章

  1. jQuery Mobile 和 Kendo UI 的比较(转)

    jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...

  2. jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile

    jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...

  3. Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  5. 数据管理必看!Kendo UI for jQuery过滤器的全球化

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. 数据管理必看!Kendo UI for jQuery过滤器状态保持

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  7. jQuery数据管理:Kendo UI过滤器设置运算符

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. 数据管理必看!Kendo UI for jQuery过滤器概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  9. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. java MYSQL做分页

    MySql中查询语句实现分页功能 语句: select * from 表名 where 条件 limit 要找第几页,每页多少行; import java.util.*; import java.sq ...

  2. 排名第一、第二的OCR软件

    排名第一.第二的OCR软件 第一:ABBYY FineReader      OCR世界排名第一,在俄罗斯获国际科技大奖奖超过卡巴斯基! 不仅仅只是文字识别,还能表格识别,版面还原,字体识别,文档结构 ...

  3. BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会

    Description Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 N(1<=N<=100,0 ...

  4. 反射实体自动生成EasyUi DataGrid模板

    用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...

  5. 中间人攻击之arp欺骗 科普ARP欺骗

    中间人攻击之arp欺骗 科普ARP欺骗 A <-> B A中有个ARP Table,每次发包都会在此Table中查找,若找不到,发APR Request包询问.此时若hacker冒充B的M ...

  6. WAF

    http://netsecurity.51cto.com/art/201010/231124.htm http://wenku.baidu.com/link?url=elrFtxPRcwJ5FjlXE ...

  7. "NetworkError: 500 Internal Server Error - http://develop.console.aliyun.sinopec.com/ots/ots_queryOtsList.action?state=0"

    项目明明开始好好的,报的这个错,错误提示也很少,啥信息都没有,只是明白是服务器报了500,知道是服务器内部错误,但是却没法找不到问题所在.后来突然想到把下面报错的action直接在浏览器运行: htt ...

  8. 2.6.1 使用toast显示提示信息框

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  9. USACO3.43Electric Fence(pick定理)

    忘记pick定理是什么了 想枚举来着 ..没枚出来 有篇pick定理的证明 貌似挺好 也没太看懂 /* ID: shangca2 LANG: C++ TASK: fence9 */ #include ...

  10. BZOJ_1497_[NOI2006]_最大获利_(最大流+最大权闭合图)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1497 共n个站点,给出建立每个站点所需要的花费.现在有m个客户需要开通服务,每个客户需要有两个 ...