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