彩票走势图

HTML5 Web app开发工具Kendo UI Web教程:如何绑定网格到远程数据

原创|行业资讯|编辑:郝浩|2013-10-31 10:25:16.000|阅读 1007 次

概述:

在前面的文章中对于Kendo UI 中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

    在前面的文章中对于Kendo UI 中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据。

    众所周知Grid网格控件是用户界面的一个重要的接口,尽管jQuery已经使得界面项目变得更加的容易,但是当网页设计时网格依旧是有一点玄乎。Kendo UI 中的Grid控件包含了快速模版引擎以及内置的数据源,使得我们可以非常快速的创建和运行网格。

创建Grid网格

    在页面上首先需要一个网格,一个简单的描述了列表头的表格就可以了,如果你要自己做一个网格的话,你可以直接从表格开始。

<table id="grid">
    <thead>
        <tr>
            <th>
                
            </th>
            <th>
                Details
            </th>
            <th>
                Comments
            </th>
    </thead>
    <tbody>
    <td colspan="3"></td>
    </tbody>
</table>

    现在需要将我们的div成为网格,这个将会需要kendo.common.min.css。同时由于Kendo UI是基于jQuery平台构建,所以也需要jQuery。由于Kendo UI依赖于jQuery,最后还需要kendo.all.min.js引用,并且必须包含jQuery引用。

  ;  为了简单起见,这里是作为CDN引用的所有脚本标签,简单的复制粘贴就可以使用。

<link href="//cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css" rel="Stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js" ></script>

  &nbsp; 在document.ready() jQuery功能中,可以将div装换成一个网格。

添加一些Awesome数据

    现在可以对网格添加一些实际的数据了,在Kendo UI中提供了一个强大的数据绑定框架,网格可以立即的在线使用。我们只需要简单的定义网格的数据源以及提供远程的端点即可。

$(function() {
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

    现在运行上面的代码,将会得到一个空的网格。这个主要是因为我们没有告诉网格每列中出现什么东西,要解决这个问题,只需要简单在Instagram响应中 指定在特定列中要展示的元素。如下在列数组中指定了field属性,所以现在网格中将会从响应中显示实际的数据。

$(function() {
    $("#grid").kendoGrid({
        columns: [{ field: 'images.thumbnail.url' }, { field: 'user.username' }, { field: 'comments' }],
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

HTML5 Web app开发工具Kendo UI Web教程:如何绑定网格到远程数据

    现在有了数据,但是依然还有一些其他的问题。在网格中的图像列中有每个图像的URL链接,其他的列中显示的是对象的数组。现在需要告诉网格要显示的内容,对于图像就可以通过一个简单的在线模版来显示图像。

$(function() {
    $("#grid").kendoGrid({
        columns: [{ template: '<img src="<#= images.thumbnail.url #>" />' }, 
                  { field: 'user.username' }, { field: 'comments' }],
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

HTML5 Web app开发工具Kendo UI Web教程:如何绑定网格到远程数据

美化网格

    剩下的列就可以使用一些指定的模版来显示,通过移动模版到网格外,并设置模版的内容包含创建照片的用户名称、用于创建的过滤器以及照片说明。在最后一个单元格中,在模版中使用JavaScript来以列的形式枚举显示评论。

$(function() {
    $("#grid").kendoGrid({
        rowTemplate: kendo.template($("#detailsTemplate").html()),
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

HTML5 Web app开发工具Kendo UI Web教程:如何绑定网格到远程数据


>>>Kendo UI Web下载

慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP