本教程為大家展示如何將HTML5 & jQuery UI庫(kù) Ignite UI 數(shù)據(jù)源組件 igDataSource 綁定到客戶端的JavaScript數(shù)組和JSON數(shù)據(jù)。事實(shí)上，無(wú)論是綁定到標(biāo)準(zhǔn)數(shù)組還是JSON數(shù)組，其方法大致都是差不多的。建立數(shù)據(jù)源數(shù)組之后，將數(shù)據(jù)綁定到igDataSource組件，然后將數(shù)據(jù)源綁定到UI元素上。這篇文章會(huì)講到不同數(shù)據(jù)格式之間的一些細(xì)微差別。

>>Ignite UI 2013.1下載

綁定到客戶端數(shù)據(jù)

無(wú)論選擇哪種數(shù)組格式進(jìn)行綁定，頁(yè)面上必須有合適的JavaScript文件支持?jǐn)?shù)據(jù)源組件。首先在頁(yè)面上添加以下腳本引用：

<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組件沒(méi)有規(guī)定引用任何CSS文件，因?yàn)閿?shù)據(jù)源組件沒(méi)有內(nèi)置對(duì)應(yīng)的用戶界面。

綁定到JavaScript數(shù)組

將igDataSource組件綁定給一個(gè)純JavaScript數(shù)組，首先添加一串?dāng)?shù)組到頁(yè)面：

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"],
];

然后創(chuàng)建一個(gè)HTML表格元素作為容器，下列代碼展示了如何創(chuàng)建表格，如何定義表格標(biāo)題：

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

接下來(lái)，必須有一個(gè)可以渲染綁定在表格上數(shù)據(jù)的機(jī)制，下面給出了一個(gè)jQuery客戶端模板定義：

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

下面要做的就是將各個(gè)部分綁定到一起：

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");

這樣，最終表格中的內(nèi)容就被清空了，取而代之用客戶端模板中的數(shù)組數(shù)據(jù)填充表格。

綁定到JSON數(shù)據(jù)

綁定 igDataSource組件到JSON數(shù)據(jù)的方法跟前面是差不多的，主要的差別就是數(shù)據(jù)源組件可以直接從數(shù)據(jù)中推出模式，這是因?yàn)镴SON數(shù)據(jù)的對(duì)象定義中包含一個(gè)固定模式。

下面是JSON的數(shù)組：

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" };

接下來(lái)是創(chuàng)建表格容器：

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

jQuery客戶端模板定義，用于客戶端數(shù)據(jù)綁定：

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

最后將JSON數(shù)組綁定到數(shù)據(jù)源組件，然后使用 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的值通常設(shè)置為關(guān)鍵字域。