logo资料库

KendoUI的速查手册.docx

发布时间：2022-06-14 发布人：admin 分类：说明书 资料大小：0.17M 资料格式：docx 举报 版权申诉
第1页 / 共15页
第2页 / 共15页
第3页 / 共15页
第4页 / 共15页
第5页 / 共15页
第6页 / 共15页
第7页 / 共15页
第8页 / 共15页
资料共15页，剩余部分请下载后查看
    一、基本概念
    1. 如何开始使用Kendo UI？
    二、DataSource
    1. 什么是DataSource？
    2. 如何将本地数据绑定到DataSource？
    3. 如何将远程数据绑定到DataSource？
    4. 如何将DataSource应用到widgets上？
    5. 如何延迟加载数据？
    三、Templates
    1. 什么是Templates？
    2. Templates渲染界面的语法有几种？
    3. 如何快速建立Templates？
    4. 什么时候使用#...#语法？
    5. 如何在模板中使用字符#？
    6. 如何获得极限性能（模板解析最快速度）？
    7. 如何复用模板？
    四、Grid
    1. 如何绑定本地数据？
    2. 如何绑定服务器端数据？
    五、AutoComplete
    1. 如何从数据库获取数据绑定到AutoComplete？
    2. 如何获取被选中的值？
    3. 能够预先指定一个值在AutoComplete里面吗？
    4. 能绑定键值对吗？
    5. 什么情况下使用AutoComplete组件？
    kendo UI 速查手册 本文档基于 Kendo UI 2015.1.318 版本进行说明。
    一、基本概念 1. 如何开始使用 Kendo UI？ 1. 首先下载 Kendo UI 到本地计算机，例如从官方网站 http://www.telerik.com/kendo-ui 或者从国内 http://www.kendoui.io 处下载； 2. 将 js 和 styles 文件夹拷贝到项目中； 3. 在页面引入相应的脚本文件和样式文件，包括： （1）/styles/kendo.common.min.css （2）/styles/kendo.default.min.css （3）/js/jquery.min.js（这是 1.9.1 版本，也可以自行下载基础 Jquery 库） （4）/js/kendo.all.min.js 以上即完成使用 Kendo UI 的准备工作，以后就是 Kendo 具体的组件或对象使用。
    二、DataSource 1. 什么是 DataSource？ 顾名思义，这是“数据源”。在 Kendo UI 中，它被设计为构建所有 web Applcation 的核心应用，它是 本地数据（例如 Javascript 的数组或对象）或者远程数据（例如 web Service 返回的 JSON、JSONP、OData 或者是 XML）的抽象表示。 它可以做以下的事情： （1）从远程终端检索数据； （2）维护数据的结构和类型（data schema）； （3）在和远程终端交互的过程中处理数据的序列化（读取或写入）； （4）在和远程终端交互的过程中进行数据同步（创建、更新、删除）； （5）维护一个用于远程更新的本地的数据缓存； （6）计算和维护数据的聚合，排序以及分页； （7）为数据过滤提供查询语法。 概括起来说，DataSource 提供对数据的 CRUD 操作，以及无论是本地还是远程数据的排序、分页、 检索（过滤）、分组和聚合操作。 2. 如何将本地数据绑定到 DataSource？ 下面的代码演示了如何将 Javascript 的数组指定到 DataSource 实例的 data 配置项： var movies = [{ title: "Star Wars: A New Hope", year: 1977 }, { }, { }]; title: "Star Wars: The Empire Strikes Back", year: 1980 title: "Star Wars: Return of the Jedi", year: 1983 var localDataSource = new kendo.date.DataSource({ data: movies }); 3. 如何将远程数据绑定到 DataSource？ 仅仅从获取（读取）数据的角度来说，可以使用 DataSource.transport.read 来指定一个远程的数据源。 例如下面的代码：
    var remoteDataSource = new kendo.data.DataSource({ transport: { read: { url: "../DataHandler.ashx", type: "get", dataType: "json", data: { crecode: "R68", sort: "DESC" } } } }); url：指定一个远程的地址来获取程序，这里只针对.NET 的 ashx 进行演示； type：http 请求的类型，get 或者是 post； dataType：指定返回的数据格式，通常是 json； data：http 请求附加的参数。 4. 如何将 DataSource 应用到 widgets 上？ 大部分 Kendo UI 的 widgets 都支持数据绑定，通过对组件的 dataSource 配置项赋值来将 DataSource 应用到组件上。有两种方式： （1）在指定 dataSource 属性时，对 DataSource 进行相应的配置，如下： $("#chart").kendoChart({ …,
    dataSource: new kendo.data.DataSource({ data: [ { employee: "Joe Smith", sales: 2000 employee: "Jane Smith", sales: 2250 employee: "Will Roberts", sales: 1550 }, { }, { }] }), … }); （2）声明独立的 DataSource 实例，将其指定到组件的 dataSource 配置项上。这样做的好处在于， 数据可以在多个 widgets 之间进行共享或者传递。如下： var sharedDataSource = new kendo.data.DataSource({ transport: { read: { url: "data-service.json", dataType: "json" } } }); // 将相同的 DataSource 绑定到两个组件上面：Chart 和 Grid $("#chart").kendoChart({ …, dataSource: sharedDataSource, series: [{ field: "sales", name: "Sales in Units" }], categoryAxis: { field: "employee" } }); $("#grid").kendoGrid({ dataSource: sharedDataSource,
    … }); 5. 如何延迟加载数据？ 当给 DataSource 指定了数据以后，实际上，此时仅仅是做了“初始化”的工作。数据并没有被真正 加载到 DataSource 之中。必须通过调用 read()方法来加载数据。例如下面的代码： var localDataSource = new kendo.data.DataSource({ data: movies }); localDataSource.read(); 对于指定到 widgets 上的 DataSource，默认就已经执行了 read()的动作，因此可以直接在组件上看到 数据绑定的效果。当然，如果想不自动绑定显示数据（例如页面初始化的时候出于性能的考虑），可以重载 autoBind 配置项，将其设置为 false 就可以避免数据的自动加载。
    三、Templates 1. 什么是 Templates？ 出于程序开发的需要，我们需要根据获取的数据动态的构建 HTML 代码段。比如构建一个菜单，以标 签
  • 来呈现，菜单是存储在数据库里面的，不同的权限看到的菜单项也不一致。此时只有通过 ajax 来获 取菜单数据，然后在 Javascript 代码里面拼接一个 HTML 的字符串，将其输出到
      的 html()里面去。这 谓之“传统的 HTML string building in JavaScript”。 Kendo UI 提供了一个易于使用的，高性能的 JavaScript 模板引擎，它可以自动将数据嵌合在 HTML 块中。Kendo UI Templates 着眼于针对通用的 UI 提供一个基础的模板功能，在性能和功能之间更着重前者 的需求。 2. Templates 渲染界面的语法有几种？ 有三种语法： （1）#=……#：以 HTML 的语法来渲染 UI； （2）#: ……#：忽略 HTML 语法，直接将获取得值渲染到 UI 上面； （3）# …… #：在界面上引用 Javascript 代码段。 对上面的第（1）种和第（2）种情况，他们的区别是：假设有一个数据源是下面的格式： var data = { firstName: "Keanu" }; 那么下面是第一种模板语法：
      此时，界面输出的是粗体的 keanu，即 keanu。因为它是按照 HTML 语法将解释为粗体，并将其 渲染到 id 为 example 的 div 里面。 第二种模板语法：
      此时，界面输出的是keanu。它直接将值渲染到界面 UI 上面。
    • 3. 如何快速建立 Templates？ 通过指定 kendo.template 内的字符串来创建一个 template 为我们提供了很大的便利。但是，这样做 很不直观，依然是一种“HTML string building in JavaScript”。可以通过以下的方式来便利创建。首先，创 建一个代码块，在这里代码块里面包含需要模板的 HTML 预制内容。如下，注意 type 属 性的设置： 其次，将这个 id 为 javascriptTemplate 的 html()指定给模板。如下：
    有一点需要注意，写在 script 里面的 html 代码是没有自动提示的。因此，可以现在页面的其他地方 写好需要的 HTML 代码，然后拷贝到 总结来说，##语法可以包含任意的 js 代码段，也适用于用户自定义的变量。或者说，完全可以在页 面的某个地方写好完整的 javascript 代码，然后将其拷贝到模板中。
    分享到：
    赞 收藏

    相关推荐

    资料库

    开发技术

    共收录19306份资料，累计14个分类，关注成员有19位，主要包括：Actionscript,Javascript,PHP,VB,Perl,Delphi,Python,C#,C,Java,C++,Web开发,硬件开发,其它

    热门标签

    Actionscript Javascript PHP VB Perl Delphi Python C# C Java C++ Web开发 硬件开发 其它

    最新资料