彩票走势图

HTML5/jQuery UI库Ignite UI使用教程:绑定igDataSource到客户端数据

原创|使用教程|编辑:郝浩|2013-10-31 09:46:00.000|阅读 770 次

概述:本教程为大家展示如何将Ignite UI 数据源组件 igDataSource 绑定到客户端的JavaScript数组和JSON数据。

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

本教程为大家展示如何将HTML5 & jQuery UI库 Ignite UI 数据源组件 igDataSource 绑定到客户端的JavaScript数组和JSON数据。事实上,无论是绑定到标准数组还是JSON数组,其方法大致都是差不多的。建立数据源数组之后,将数据绑定到igDataSource组件,然后将数据源绑定到UI元素上。这篇文章会讲到不同数据格式之间的一些细微差别。

>>Ignite UI 2013.1下载

绑定到客户端数据

无论选择哪种数组格式进行绑定,页面上必须有合适的JavaScript文件支持数据源组件。首先在页面上添加以下脚本引用:

<script src="scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/infragistics.core.js" type="text/javascript"></script>

注意:igGridControl组件没有规定引用任何CSS文件,因为数据源组件没有内置对应的用户界面。

绑定到JavaScript数组

将igDataSource组件绑定给一个纯JavaScript数组,首先添加一串数组到页面:

var arrayOfArraysData = [
["AED", "Emirati Dirham", "Jun 1 1998 12:00AM"],
["AFA", "Afghani", "Jun 1 1998 12:00AM"],
["ALL", "Lek", "Jun 1 1998 12:00AM"],
["AMD", "Armenian Dram", "Jun 1 1998 12:00AM"],
["ANG", "Netherlands Antillian Guilder", "Jun 1 1998 12:00AM"],
["AOA", "Kwanza", "Jun 1 1998 12:00AM"],
["ARS", "Argentine Peso", "Jun 1 1998 12:00AM"],
["ATS", "Shilling", "Jun 1 1998 12:00AM"],
["AUD", "Australian Dollar", "Jun 1 1998 12:00AM"],
["AWG", "Aruban Guilder", "Jun 1 1998 12:00AM"],
["AZM", "Azerbaijanian Manat", "Jun 1 1998 12:00AM"],
];

然后创建一个HTML表格元素作为容器,下列代码展示了如何创建表格,如何定义表格标题:

<table id="t1">
<thead>
<tr>
<th>Currency Code</th>
<th>Name</th>
<th>Modified Date</th>
</tr>
</thead>
<tbody></tbody>
</table>

接下来,必须有一个可以渲染绑定在表格上数据的机制,下面给出了一个jQuery客户端模板定义:

var template = "<tr> <td> ${CurrencyCode} </td> <td> ${Name} </td><td> ${ModifiedDate} </td></tr>"

下面要做的就是将各个部分绑定到一起:

var arraySchema = new $.ig.DataSchema("array", {fields:[
{name: "CurrencyCode", type: "string"},
{name: "Name", type: "string"},
{name: "ModifiedDate", type: "string"}]
});

ds = new $.ig.DataSource({dataSource: arrayOfArraysData, schema: arraySchema});
ds.dataBind();

$("#t1 tbody").empty();
$("#arrayDataTemplate").tmpl(ds.dataView()).appendTo("#t1 tbody");

这样,最终表格中的内容就被清空了,取而代之用客户端模板中的数组数据填充表格。

绑定到JSON数据

绑定 igDataSource组件到JSON数据的方法跟前面是差不多的,主要的差别就是数据源组件可以直接从数据中推出模式,这是因为JSON数据的对象定义中包含一个固定模式。

下面是JSON的数组:

var products = [];
products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" };
products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" };
products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" };
products[3] = { "ProductID": 4, "Name": "HS Ball Bearings", "ProductNumber": "BE-2908" };
products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" };
products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" };
products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" };
products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" };
products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" };
products[8] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" };

接下来是创建表格容器:

<table id="t1">
<thead>
<tr>
<th>ProductID</th>
<th>Name</th>
<th>Product Number</th>
</tr>
</thead>
<tbody></tbody>
</table>

jQuery客户端模板定义,用于客户端数据绑定:

<script id="JsonDataTemplate" type="text/x-jquery-tmpl">
<tr> <td> ${ProductID} </td> <td> ${Name} </td> <td> ${ProductNumber} </td>
</script>

最后将JSON数组绑定到数据源组件,然后使用 jQuery客户端模板绑定表格元素:

var ds = new $.ig.DataSource({
type: "json",
dataSource: products,
responseDataKey: "ProductID"});

ds.dataBind();

$("#t1 tbody").empty();
$($.ig.tmpl(template, ds.dataView())).appendTo("#t1 tbody");

这里注意: responseDataKey的值通常设置为关键字域。


标签:

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

文章转载自:慧都控件

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP