Spry主要和詳細資料區域概要和結構
使用Spry資料集，你可以建立主要和明細動態地區去顯示詳細資料，一個地區（主要）控制另一個地區（明細）的資料顯示。
通常，主地區會顯示指定記錄的摘要資訊，而詳細資料區域顯示指定記錄的詳細資料。詳細資料區域隨主地區的選擇變化而變化。
這部分講述關聯於相同資料集的主要區域和詳細資料區域的關係。
在下面的範例中，主要區域顯示dsSpecials資料集的資料，詳細資料區域根據主要區域的選擇來顯示詳細資料：
<head>. . .<script type="text/javascript" src="../includes/xpath.js"></script><script type="text/javascript" src="../includes/SpryData.js"></script><script type="text/javascript"> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");</script></head>. . .<body><!--Create a master dynamic region--> <div id="Specials_DIV" spry:region="dsSpecials"> <table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <!--User clicks to reset the current row in the data set--> <tr spry:repeat="dsSpecials" spry:setrow="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr> </table></div><!--Create the detail dynamic region--><div id="Specials_Detail_DIV" spry:detailregion="dsSpecials"> <table id="Specials_Detail_Table"> <tr> <th>Ingredients</th> <th>Calories</th> </tr> <tr> <td>{ingredients}</td> <td>{calories}</td> </tr> </table></div>. . .</body>
在這個範例中，第一個div標記包含id和spry:region兩個屬性，用於建立包含主要區域的容器：
<div id="Specials_DIV" spry:region="dsSpecials">
主要區域的第2個行標記包含了一個spry:setrow屬性，用於設定資料集的當前行。
<tr spry:repeat="dsSpecials" spry:setrow="dsSpecials">
第2個div標記包含spry:detailregion屬性以建立一個明細動態地區：
<div id="Specials_Detail_DIV" spry:detailregion="dsSpecials">
每個Spry資料集都保持一個當前行，預設情況下，當前行是資料集的第一行。一個spry:detailregion的工作方式除了在資料集的目前記錄改變時更新外都與spry:region相同。
當瀏覽器頁面裝載時，詳細資料區域中的運算式 ({ingredients} 和 {calories})將顯示資料集中當前行的資料。當使用者點擊主要區域中的一行時，spry:setrow屬性改變資料集中的當前行為使用者指定。
{ds_RowID}資料參考是Spry架構為資料集每行自動產生的一個ID，當使用者在主要區域指定一個行時，spry:setrow屬性將指定的唯一ID提供給setCurrentRow方法，並將其設定為當前行。
當資料集變化後，綁定到該資料集的所有動態地區都將重建並顯示更新後的資料。因為詳細資料區域類似主要區域都是做為dsSpecials資料集的一個接聽程式，同樣會在資料變化後更新，並顯示使用者所指定（新的當前行）的行。
spry:region 和 spry:detailregion 的不同在於 spry:detailregion 響應資料集的CurrentRowChanged事件, 並在事件發生時更新自己。通常spry:regions忽略CurrentRowChange事件,僅在資料集的DataChanged 事件中更新。
Spry 進階主要和詳細資料區域概要和結構
在一些情況下，你可能希望建立包括多個資料集的主/細關係。例如，你有包含眾多關聯資訊的菜單列表，因為頻寬的問提，對於使用者沒有使用到的菜單關聯資訊沒有必要全部擷取，僅下載使用者請求的詳細資料以獲得較高的效率，這是AJAX應用中減少資料交換量的常用技術。
下面範例XML源碼檔案叫cafetownsend.xml:
<?xml version="1.0" encoding="UTF-8"?><specials> <menu_item id="1"> <item>Summer Salad</item> <description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description> <price>7</price> <url>summersalad.xml</url> </menu_item> <menu_item id="2"> <item>Thai Noodle Salad</item> <description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description> <price>8</price> <url>thainoodles.xml</url> </menu_item> <menu_item id="3"> <item>Grilled Pacific Salmon</item> <description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description> <price>16</price> <url>salmon.xml</url> </menu_item></specials>
cafetownsend.xml 檔案為主要資料集提供資料，每一個功能表項目的url節點指向一個唯一的XML檔案。每個XML檔案中包含了一個對應於功能表項目的配方列表，用summersalad.xml做為例子 for
example, might look as follows:
<?xml version="1.0" encoding="UTF-8" ?><item> <item_name>Summer salad</item_name> <ingredients> <ingredient> <name>butter lettuce</name> </ingredient> <ingredient> <name>Macintosh apples</name> </ingredient> <ingredient> <name>Blood oranges</name> </ingredient> <ingredient> <name>Gorgonzola cheese</name> </ingredient> <ingredient> <name>raspberries</name> </ingredient> <ingredient> <name>Extra virgin olive oil</name> </ingredient> <ingredient> <name>balsamic vinegar</name> </ingredient> <ingredient> <name>sugar</name> </ingredient> <ingredient> <name>salt</name> </ingredient> <ingredient> <name>pepper</name> </ingredient> <ingredient> <name>parsley</name> </ingredient> <ingredient> <name>basil</name> </ingredient> </ingredients></item>
你可以使用你熟悉的XML結構來編寫資料，並建立兩個資料集在主要/詳細地區中顯示資料。下列範例中，主要動態地區顯示dsSpecials資料集，明細動態區從dsIngredients資料集擷取資料：
<head>. . .<script type="text/javascript" src="../includes/xpath.js"></script><script type="text/javascript" src="../includes/SpryData.js"></script><script type="text/javascript"><!--Create two separate data sets--> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item"); var dsIngredients = new Spry.Data.XMLDataSet("data/{dsSpecials::url}", "item/ingredients/ingredient");</script></head>. . .<body><!--Create a master dynamic region--><div id="Specials_DIV" spry:region="dsSpecials"> <table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <!--User clicks to reset the current row in the data set--> <tr spry:repeat="dsSpecials" spry:setrow="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr> </table></div><!--Create the detail dynamic region--><div id="Specials_Detail_DIV" spry:region="dsIngredients"> <table id="Specials_Detail_Table"> <tr> <th>Ingredients</th> </tr> <tr spry:repeat="dsIngredients"> <td>{name}</td> </tr> </table></div>. . .</body>
在範例中，3個代碼塊中包含並建立了兩個資料集dsSpecials和dsIngredients:
var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");var dsIngredients = new Spry.Data.XMLDataSet("data/{dsSpecials::url}", "item/ingredients/ingredient");
B資料集dsIngredients的URL包含了的{dsSpecials::url}引用第一個資料集的資料。它引用了dsSpecials資料集中的url列，如果URL或XPath包含參考了另一個資料集，那麼這個資料集將自動成為所參考的資料集的接聽程式，B資料集將以依賴A資料集，每當A資料集資料或當前行發生改變，B資料集都將重新裝載。
下面的圖例展示了資料集和主要、詳細區之間的偵聽關係：
在這個範例中，改變dsSpecials資料集的當前行時會發送一個訊息給dsIngredients資料集使其改變，因為dsSpecials資料集的每行url列中包含一個不同的URL，dsIngredients資料集必鬚根據選擇的行的URL進行更新。
預設，dsIngredients資料集是通過建構函式裡的URL參數指定資料來源的，這裡引用的是dsSpecials資料集裡的url列。dsSpecials資料集的預設當前行（第一行）包含了一個路徑指向summersalad.xml檔案，當瀏覽器裝載時詳細地區顯示該資訊。當dsSpecials資料集當前行改變，假如URL改變為salmon.xml，則dsIngredients資料集（以及想關聯的詳細動態地區）將做相應的更新。
如所示，資料集B偵聽A資料集的資料和行改變的訊息。
範例代碼中的詳細地區標記spry:region被spry:detailregion替代.spry:region 和 spry:detailregion的區別是spry:detailregion偵聽資料集的CurrentRowChange訊息(還有DataChanged訊息), 在接到訊息後更新自己。因為dsIngredients從來不改變（其根據dsSpecials資料集的當前行而改變），所以dsSpecials不需要spry:detailregion屬性。在這裡spry:region屬性定義的地區僅僅偵聽DataChanged訊息。
容易改造使用Spry技術改造下面的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Hijax Demo - Notes 1</title></head><body><a href="notes1.html">Note 1</a><a href="notes2.html">Note 2</a><a href="notes3.html">Note 3</a><div> <p>This is some <b>static content</b> for note 1.</p></div></body></html>
通過Spry技術，不需要將頁面整體裝載，你先編寫為每一個串連編寫頁面片段，例如：
<?xml version="1.0" encoding="iso-8859-1"?><notes> <note><![CDATA[<p>This is some <b>dynamic content</b> for note 1.</p>]]></note> <note><![CDATA[<p>This is some <b>dynamic content</b> for note 2.</p>]]></note> <note><![CDATA[<p>This is some <b>dynamic content</b> for note 3.</p>]]></note></notes>
改造後的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Hijax Demo - Notes 1</title><script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script><script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script><script language="JavaScript" type="text/javascript"><!--var dsNotes = new Spry.Data.XMLDataSet('data/notes.xml', "/notes/note");--></script></head><body><a href="note1.html" onclick="dsNotes.setCurrentRowNumber(0); return false;">Note 1</a><a href="note2.html" onclick="dsNotes.setCurrentRowNumber(1); return false;">Note 2</a><a href="note3.html" onclick="dsNotes.setCurrentRowNumber(2); return false;">Note 3</a><div spry:detailregion="dsNotes" spry:content="{note}"> <p>This is some <b>static content</b> for note 1.</p></div></body></html>
附加在前面的代碼看起來非常熟悉，但需要注意的是div塊包含了一個spry:detailregion屬性和spry:content屬性。spry:content屬性告訴Spry動態地區用該屬性指定的參考資料去替換待用資料。
運行這個範例要求你的瀏覽器啟用javascript功能。
運行後，點連結將會使動態地區的內容更新。
在前面的例子，使用用onclick屬性快速綁定了連結的Javascript事件控制代碼。
使用Spry建立動態網頁面準備檔案在建立Spry資料集前，先準備一些必要的檔案（xpath.js和SpryData.js），xpath.js允許你在建立資料集時指定複雜的XPath運算式，SpryData.js檔案包含Spry資料操作庫。
在HTML頁面中連結這些檔案。
<script type="text/javascript" src="includes/xpath.js"></script><script type="text/javascript" src="includes/SpryData.js"></script>
SpryData.js依賴於xpath.js檔案，所以要先引用xpath.js檔案。
引用完這些庫檔案後就可以建立Spry資料集了。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry/">
為了讓代碼有效，必須聲明Spry名字空間。
注意：在上傳連結了Spry特性的頁面時，一定要將xpath.js和SpryData.js一併上傳。
例如，你的XML檔案叫cafetownsend.xml，該檔案存放在網站根目錄下的data目錄中：
data/cafetownsend.xml
你也可以指定一個XML檔案的URL：
http://www.somesite.com/somefolder/cafetownsend.xml
注意:決定使用URL或者是相對路徑，這取決於你的瀏覽器的安全模型。
下例中，cafetownsend.xml檔案中包含specials父節點，改接點下有重複的menu_item子節點。
<?xml version="1.0" encoding="UTF-8"?><specials> <menu_item id="1"> <item>Summer Salad</item> <description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description> <price>7</price> </menu_item> <menu_item id="2"> <item>Thai Noodle Salad</item> <description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description> <price>8</price> </menu_item> <menu_item id="3"> <item>Grilled Pacific Salmon</item> <description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description> <price>16</price> </menu_item></specials>
<script type="text/javascript"> var datasetName = new Spry.Data.XMLDataSet("XMLsource", "XPathToRepeatingChildNode");</script>在Cafe Townsend範例中,你使用下列語句建立資料集：
var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");該語句建立了dsSpecials資料集來接受指定XML檔案中specials/menu_item節點的資料。資料集為每一個功能表項目都建立了一個列，包括：@id, item,
description, 和 price，如下：
@id |
item |
description |
price |
|---|---|---|---|
1 |
Summer salad |
organic butter lettuce with apples, blood oranges, gorgonzola, and |
7 |
2 |
Thai Noodle Salad |
lightly sauteed in sesame oil with baby bok choi, portobello |
8 |
3 |
Grilled Pacific Salmon |
served with new potatoes, diced beets, Italian parlsey, and lemon |
16 |
你也可以指定一個XML資料的URL：
var dsSpecials = new Spry.Data.XMLDataSet("http://www.somesite.com/somefolder/cafetownsend.xml", "specials/menu_item");完成後的範例代碼如下：
<head>...<script type="text/javascript" src="includes/xpath.js"></script><script type="text/javascript" src="includes/SpryData.js"></script><script type="text/javascript"> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");</script>...</head>在建立資料集，可以通過添加setColumnType資料集合方法來設定列類型，下面紅色部分：
<script type="text/javascript"> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item"); dsSpecials.setColumnType("price", "number");</script>例子中，運算式為dsSpecials資料集的setColumnType方法，該方法有2個參數：一個是要設定資料類型的列名 ("price")，一個是資料類型名 ("number")。
在建立完資料集後，就可以建立動態地區來顯示資料了。
建立Spry動態地區並顯示資料建立了Spry資料集後就可以將動態地區綁定到記錄集，一個Spry動態地區是頁面上的一個地區，可以顯示資料併當資料幾改變時自動更新。
例如，用div標記來顯示dsSpecials資料集，給div標記添加spry:region屬性，如下：
<div id="Specials_DIV" spry:region="dsSpecials"></div>
注意：動態地區可以依賴於多個資料集。給地區添加多個資料集，可以在spry:region屬性的值中添加多個資料集名字，名字之見用空格分開，例如：spry:region="dsSpecials dsSpecials2
dsSpecials3".
<table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <tr spry:repeat="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr></table>儲存格裡的值參考到資料集中的列。
注意：如果地區依賴於多個資料集，則引用資料集中的列時需要指定列是哪個資料集的，文法為：{datasetName::columnName}.例如，綁定了2、3個不同的資料集，上面的例子就要寫作：{dsSpecials::item}, {dsSpecials::description}, 依次類推.
spry:repeat="datasetName"
例子中，你添加了spry:repeat屬性到表行標記中，下列紅色部分:
<tr spry:repeat="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td></tr>例子中，完整的動態地區綁定代碼如下：
<div id="Specials_DIV" spry:region="dsSpecials"> <table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <tr spry:repeat="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr> </table></div>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
