关闭

JQuery Kendo UI使用技巧总结

1889人阅读 评论(0) 收藏 举报
分类:
原文出处:http://blog.csdn.net/jia20003/article/details/10695359

Kendo UI开发总结 By Gloomyfish on 2013-04-25

Grid中支持分页刷新:           

scrollable: {virtual : true },

GridDataSource中添加分页支持:

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

 


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Telerik Kendo UI 那点事[1]

最近在构建一套行业应用的快速开发框架
  • supperman_009
  • supperman_009
  • 2014-09-25 16:59
  • 8927

Kendo UI开发教程: Kendo UI 示例及总结

http://blog.csdn.net/mapdigit/article/details/11492895 在正式开发Kendo Web应用前,需要把每个例子一一过一遍,对Ke...
  • DJ2008
  • DJ2008
  • 2015-04-27 16:17
  • 2659

Kendo UI常用示例汇总(十一)

Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobi...
  • AABBbaby
  • AABBbaby
  • 2016-06-03 09:45
  • 829

关于Kendo ui 的简单介绍

项目中使用到了,kendo ui 控件,如 列表, 下拉框, 饼图, 树结构, 图表。 这里简单介绍下,列表,下拉框,使用kendo ui 生成的方法(仅js代码) 一,...
  • zhuxianxin0118
  • zhuxianxin0118
  • 2016-07-08 09:35
  • 1951

kendo ui gird使用技巧(使用本地数据) 一

添加js引用 html  添加js绑定 var data={data:[{id:...
  • zhangyuanwei88
  • zhangyuanwei88
  • 2014-07-30 20:51
  • 3345

Kendo ui Grid的创建步骤

原文出处:http://blog.csdn.net/ibigpig/article/details/25631261     Kendo UI Dataviz 中的Grid控件不仅可以显示数据,...
  • chelen_jak
  • chelen_jak
  • 2016-12-20 15:11
  • 974

Kendo UI开发教程(25): 单页面应用(三) View

View为屏幕上某个可视部分,可以处理用户事件。 View可以通过HTML创建或是通过script元素。缺省情况下View将其所包含的内容封装在一个Div元素中。Kendo创建View有两种方式:使用...
  • mapdigit
  • mapdigit
  • 2013-09-09 21:39
  • 4075

Telerik Kendo UI 那点事【2】中文化(汉化)

CSDN上有一个引路蜂软件的博客,里面有kendo ui的一般用法。它那里讲过的我这里就不再继续重复。 由于框架设计的需要,后台使用spring,前台使用kendo ui构建页面。为了加快快发速度以...
  • supperman_009
  • supperman_009
  • 2014-09-25 17:38
  • 32427

Kendo UI开发教程(1): 概述

JavaScript 在开发Web应用的作用越来越大,JQuery简化了HTML和JavaScript之间的操作,jQuery的教程可以参见本博客jQuery和 jQuery UI 入门教程, jQu...
  • mapdigit
  • mapdigit
  • 2013-06-12 22:34
  • 21977

开发kendo-ui弹窗组件

转自:http://www.itnose.net/detail/6157288.html 摘要:   kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件。现在分享项目中自己定...
  • chelen_jak
  • chelen_jak
  • 2015-11-12 09:43
  • 1730
    个人资料
    • 访问:1826236次
    • 积分:17876
    • 等级:
    • 排名:第616名
    • 原创:159篇
    • 转载:873篇
    • 译文:0篇
    • 评论:100条
    最新评论