JQuery Kendo UI使用技巧总结

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