XML第四篇:快速表列資料-資料繫結 [转载]

转载 2006年06月03日 17:55:00
XML第四篇:快速表列資料-資料繫結

恆逸資訊教育訓練中心首頁

作者: 恆逸資訊 許嘉仁

快速表列資料-資料繫結
在上一期的文章中我們介紹了使用ADO從資料庫取出資料轉換成為XML,並利用XSL技術將之展現在網頁上。漸漸地整合各種XML應用技術,在這一期將介紹透過資料繫結技術,輕鬆快速地表列資料。
談到資料繫結,它到底有什麼好處呢?首先第一點它使用上直覺、簡單,第二點它不需撰寫大量的程式即可達到資料展現的目的,第三點它維護輕鬆、容易修改,主要是因為資料與展現的HTML標籤分離。接下來就這三點來討論資料繫結如何應用吧!

資料繫結

首先如果要使用資料繫結技術來展現資料,必須要在網頁中建立XML的資料來源物件(Data Source Object),文中簡稱DSO,建立DSO的方式有兩種,第一種是使用Java Applet連結到一份Books.xml檔案資料,範例如下:
< HTML >
< HEAD >
< APPLET CODE="com.ms.xml.dso.XMLDSO.class"
id="xmldso" width=0 height=0 >
< PARAM NAME="URL" VALUE="Books.xml" >
< /APPLET >
< /HEAD >
< BODY >

< /BODY >
< /HTML >
JavaApplet.htm
第二種方式是建立XML DataIsland(XML資料島),範例如下:
< HTML >
< HEAD >
< xml id="xmldso" src="Books.xml" >< /xml >
< /HEAD >
< BODY >

< /BODY >
< /HTML >
XMLDataIsland1.htm
或者直接將XML資料崁入DataIsland中,範例如下:
< HTML >
< HEAD >
< xml id="xmldso" >
< ?xml version="1.0"? >
< booklist >
< book >
< title >The Gourmet Microwave< /title >
< isbn >72-80081-082< /isbn >
< publisher >New Moon Books< /publisher >
< price >9.95< /price >
< details >Details.asp?isbn=72-80081-082< /details >
< author >Charlotte M. Cooper< /author >
< author >Shelley B. Burke< /author >
< author >Regina P. Murphy< /author >
< /book >
< /booklist >
< /xml >
< /HEAD >
< BODY >

< /BODY >
< /HTML >
XMLDataIsland2.htm
這兩種方式都能建立DSO,不過第二種方式,也就是XML DataIsland的語法只有在IE5以後的版本才有支援,在這邊預設讀者都有IE5可以測試。建立好DSO,先看一下DSO裡面的資料,也就是連結到的XML檔案Books.xml,如下列檔案內容:

< ?xml version="1.0"? >
< booklist >
< book >
< title >The Gourmet Microwave< /title >
< isbn >72-80081-082< /isbn >
< publisher >New Moon Books< /publisher >
< price >9.95< /price >
< details >Details.asp?isbn=72-80081-082< /details >
< author >Charlotte M. Cooper< /author >
< author >Shelley B. Burke< /author >
< author >Regina P. Murphy< /author >
< /book >
< book >
< title >Sushi, Anyone?< /title >
< isbn >72-80081-024< /isbn >
< publisher >New Moon Books< /publisher >
< price >14.99< /price >
< details >Details.asp?isbn=72-80081-024< /details >
< author >Charlotte M. Cooper< /author >
< author >Yoshi Nagase< /author >
< /book >
< book >
< title >The Busy Executive's Database Guide< /title >
< isbn >9-001-122-12< /isbn >
< publisher >Binnet and Hardley< /publisher >
< price >19.95< /price >
< details >Details.asp?isbn=9-001-122-12< /details >
< author >Mayumi Ohno< /author >
< /book >
< book >
< title >Cooking With Computers: Surreptitous Balance Sheet< /title >
< isbn >9-001-122-90< /isbn >
< publisher >Binnet and Hardley< /publisher >
< price >11.95< /price >
< details >Details.asp?isbn=9-001-122-90< /details >
< author >Mayumi Ohno< /author >
< author >Ian H. Devling< /author >
< author >Peter Wilson II< /author >
< author >Lars Peterson< /author >
< /book >
< book >
< title >Straight Talk About Computers< /title >
< isbn >9-001-122-01< /isbn >
< publisher >Binnet and Hardley< /publisher >
< price >19.99< /price >
< details >Details.asp?isbn=9-001-122-01< /details >
< author >Lars Peterson< /author >
< /book >
< /booklist >

XML檔案中包含五本書,每本書都有一個以上的作者。接下來要如何讓HTML標籤來展現資料呢?其實很簡單,例如下面的範例,僅僅在標籤內加上兩個屬性設定(datasrc與datafld),第一筆資料就能夠繫結在標籤內了:
< HTML >
< HEAD >
< xml id="xmldso" src="Books.xml" > < /xml >
< /HEAD >
< BODY >
書號:< span datasrc="#xmldso" datafld="isbn" >< /span >< br >
書名:< TEXTAREA rows=2 cols=20 id=textarea1 name=textarea1
  datasrc="#xmldso" datafld="title" >< /TEXTAREA >< br >
出版商:< INPUT type="button" value="Button" id=button1 name=button1
  datasrc="#xmldso" datafld="publisher" >< br >
價格:< INPUT type="text" id=text1 name=text1 datasrc="#xmldso" datafld="price" >
< /BODY >
< /HTML >
DataIsland3.htm
結果圖如下:
原來datasrc屬性就是指定DSO,而datafld就是指定欄位,並且個別用不同的標籤來展現,讀者就會發現資料繫結的彈性以及方便了。例如價格欄位資料會繫結到TextBox的Value屬性,所以結果可以看到資料便展現在TextBox裡面。
但是有一點必須要注意,並不是所有的HTML標籤都支援這兩個屬性,在以下的表格中列出支援的HTML標籤以及資料繫結後所對應的標籤屬性:
HTML標籤 資料繫結標籤屬性
A href
APPLET property value via PARAM
BUTTON innerText, innerHTML
DIV innerText, innerHTML
FRAME src
IFRAME src
IMG src
INPUT TYPE=BUTTON innerText, innerHTML
INPUT TYPE=CHECKBOX checked
INPUT TYPE=HIDDEN value
INPUT TYPE=PASSWORD value
INPUT TYPE=RADIO checked
INPUT TYPE=TEXT value
LABEL innerText, innerHTML
LEGEND innerText, innerHTML
MARQUEE innerText, innerHTML
SELECT obj.options(obj.selectedIndex).text
SPAN innerText, innerHTML
TEXTAREA value
如上表span標籤在設定完datasrc及dtafld之後,資料會存放在標籤的innerText或innerHTML屬性中,這代表資料能夠以TEXT純文字展現或以HTML展現。資料繫結之後預設使以純文字展現,也就是存放在innerText屬性,例如改寫Books.xml的第一筆資料的isbn欄位如下:
< book >
< title >The Gourmet Microwave< /title >
  < isbn > &lt; B &lt; 72-80081-082 &lt; /B &lt; ;< /isbn >
< publisher >New Moon Books< /publisher >
< price >9.95< /price >
< details >Details.asp?isbn=72-80081-082< /details >
< author >Charlotte M. Cooper< /author >
< author >Shelley B. Burke< /author >
< author >Regina P. Murphy< /author >
< /book >
其中「<」代表「< 」符號,「&glt;」代表「 >」符號,主要是因為XML資料中大於和小於符號是保留字,所以必須以其他方式表現,此時再度執行DataIsland3.htm會得到以下結果:
但是這不是想要的結果,主要的目的是希望書號欄位資料以粗體展現,此時必須配合另一個HTML屬性,也就是修改DataIsland3.htm的span標籤,再加上一個屬性dataformatas設定為HTML。此時資料繫結後,資料便會存放在span標籤的innerHTML屬性,也就是以HTML方式展現,如下程式碼及結果:
書號:< span datasrc="#xmldso" datafld="isbn" dataformatas="HTML" >< /span >< br >

瀏覽資料

到目前為止,雖然資料繫結很方便看到所需的資料,但是都只能看到第一筆,所以應該要有瀏覽的機制,也就是加上可以切換上下筆的功能。首先在頁面上放進四顆按鈕並給定按鈕文字內容,然後加上被點選後所執行的程式如下:
< HTML >
< HEAD >
< META name=VI60_defaultClientScript content=VBScript >
< META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0" >
< TITLE >< /TITLE >
< xml id="xmldso" src="Books.xml" >< /xml >
< SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript >
< !--

Sub button2_onclick
  xmldso.recordset.movefirst
End Sub

Sub button3_onclick
  xmldso.recordset.moveprevious
if xmldso.recordset.bof then
xmldso.recordset.movefirst
end if
End Sub

Sub button4_onclick
  xmldso.recordset.movenext
if xmldso.recordset.eof then
xmldso.recordset.movelast
end if
End Sub

Sub button5_onclick
  xmldso.recordset.movelast
End Sub

-- >
< /SCRIPT >
< /HEAD >
< BODY >

書號:< span datasrc="#xmldso" datafld="isbn" dataformatas=HTML >< /span >< br >
書名:< TEXTAREA rows=2 cols=20 id=textarea1 name=textarea1 datasrc="#xmldso" datafld="title" >< /TEXTAREA >< br >
出版商:< INPUT type="button" value="Button" id=button1 name=button1 datasrc="#xmldso" datafld="publisher" >< br >
價格:< INPUT type="text" id=text1 name=text1 datasrc="#xmldso" datafld="price" >< br >

  < INPUT type="button" value="第一筆" id=button2 name=button2 >
< INPUT type="button" value="上一筆" id=button3 name=button3 >
< INPUT type="button" value="下一筆" id=button4 name=button4 >
< INPUT type="button" value="最後一筆" id=button5 name=button5 >

< /BODY >
< /HTML >
DataIsland3.htm
上面的程式中會將XML資料模擬成RecordSet,此時就可以透過RecordSet的Method來瀏覽資料。不過如果想要同時瀏覽多筆資料又該如何?這時可以使用Table標籤來做資料繫結,如以下方式:
< HTML >
< HEAD >
< TITLE >< /TITLE >
< xml id="xmldso" src="Books.xml" >< /xml >
< /HEAD >
< BODY >

< TABLE WIDTH=100% BORDER=1 datasrc=#xmldso >
< THead >
< TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD >
< /THead >
< TR >
< TD >< span datafld=isbn >< /span >< /TD >
< TD >< span datafld=title >< /span >< /TD >
< TD >< span datafld=price >< /span >< /TD >
< TD >< span datafld=author >< /span >< /TD >
< /TR >
< /TABLE >

< /BODY >
< /HTML >
結果如下:
但是由於每一筆資料有多個作者欄位資料,所以資料繫結的方式必須稍作修改,以槽狀結構來繫結資料:
< TABLE WIDTH=100% BORDER=1 datasrc=#xmldso >
< THead >
< TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD >
< /THead >
< TR >
< TD >< span datafld=isbn >< /span >< /TD >
< TD >< span datafld=title >< /span >< /TD >
< TD >< span datafld=price >< /span >< /TD >
  < TD >
< table datasrc=#xmldso datafld=author >
< tr >< td >< span datafld="$Text" >< /span >< /td >< /tr >
< /table >
< /TD >
< /TR >
< /TABLE >
結果如下:
既然能夠瀏覽多筆資料,最好能加上換頁功能,而做法只要再配合兩個屬性-Table標籤的id及datapagesize屬性,以及簡短的程式就可以達成,範例如下:
< HTML >
< HEAD >
< TITLE >< /TITLE >
< xml id="xmldso" src="Books.xml" >< /xml >
< SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript >
< !--

Sub button1_onclick
  Table1.previousPage
End Sub

Sub button2_onclick
  Table1.nextPage
End Sub

-- >
< /SCRIPT >
< /HEAD >
< BODY >

< TABLE WIDTH=100% BORDER=1 datasrc=#xmldso id=Table1 datapagesize=2 >
< THead >
< TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD >
< /THead >
< TR >
< TD >< span datafld=isbn >< /span >< /TD >
< TD >< span datafld=title >< /span >< /TD >
< TD >< span datafld=price >< /span >< /TD >
< TD >
< table datasrc=#xmldso datafld=author >
< tr >< td >< span datafld="$Text" >< /span >< /td >< /tr >
< /table >
< /TD >
< /TR >
< /TABLE >

< INPUT type="button" value="上一頁" id=button1 name=button1 >
< INPUT type="button" value="下一頁" id=button2 name=button2 >

< /BODY >
< /HTML >
DataIsland4.htm
結果如下:

資料繫結小技巧

對於資料繫結也有許多小技巧,例如提供超連結、跑馬燈的效果或者TextBox繫結提供編修資料的功能,範例如下:
< HTML >
< HEAD >
< TITLE >< /TITLE >
< xml id="xmldso" src="Books.xml" >< /xml >
< /HEAD >
< BODY >

< TABLE WIDTH=100% BORDER=1 datasrc=#xmldso id=Table1 datapagesize=2 >
< THead >
< TD >書號< /TD >< TD >書名< /TD >
< TD >價格< /TD >< TD >出版商< /TD >
< TD >作者< /TD >
< /THead >
< TR >
  < TD > < span datafld=isbn dataformatas=HTML >< /span > < /TD >
  < TD > < a datafld=details >< span datafld=title >< /span >< /a >< < /TD >
  < TD > < MARQUEE datafld=price >< /MARQUEE > < /TD >
  < TD > < INPUT type="text" id=text1 name=text1 datafld=publisher > < /TD >
< TD >
< table datasrc=#xmldso datafld=author >
< tr >< td >
  < font color=red >   < span datafld="$Text" >< /span > < /font >
< /td >< /tr >
< /table >
< /TD >
< /TR >
< /TABLE >

< /BODY >
< /HTML >
DataIsland4.htm
結果如下:

結 論

看過了以上幾個範例,讀者會真正了解本文第一段所談到資料繫結的好處,使用上極為簡單易用。不過應用方式及小技巧不少,如果能妥善運用,對於資料的展現以及維護都會比使用ASP和HTML標籤混雜的程式容易許多。
雖然展現快速容易,但是仍然有不足的地方,也就是彈性較小。如果想要做到更複雜的功能則就很困難,例如想要根據欄位內容來做排序,這就要另外結合XSL技術或ASP技術重新查詢資料庫。如果不需要複雜的功能,上面的這些範例就能夠解決掉大部分只需簡單展現的頁面。
在下一期的文章中會再結合XML的魔法師XML DOM(XML Document Object Model),完全整合這四期文章的技術,讓XML充滿無限的變化。

使用XML解析器(TinyXML)编程之常用参数讲解-------转载的原版资料2

--------------------------第2部分:tinyxml常用参数讲解------------------------------------ TinyXml 是一款优秀的C+...

程序员面试题精选(17)-把字符串转换成整数_资料存档

http://zhguiqiang.blog.163.com/blog/static/9993752200861310505693/ 程序员面试题精选(17)-把字符...

iOS动效学习-推荐资料(最全)

资源互链!!!资源的精华都在这里了 iOS开发推荐DMG资源  http://blog.csdn.net/xiongbaoxr/article/details/50989283动效学习-推荐资...

多筆資料 二進制檔案 讀取 -使用fread

此篇介紹如何對二進制檔做多筆資料的讀取,另外,若想要知道做寫入,可以參考「C/C++多筆資料的二進制檔案寫入-使用fwrite」 實作方式 首先,先讓我們來看看二進制的檔案寫入所提...

资料分享-关于软件稳定性测试的思考与实践

前两天和几位软件测试的同行在网上聊到经验交流的问题,大家都觉得国内目前这种同行之间的交流机会还是比较少,特别是面对面交流的机会。很多时候我们的经验都来自于自己的工作,是第一手的资料和心得,但是这也带来...
  • superqa
  • superqa
  • 2011年03月19日 20:30
  • 3626

编程资料 -C# 多线程

编程资料 - 多线程C#多线程编程实例实战作者: 刘弹 www.ASPCool.com 时间:2003-5-17 上午 10:24:05 阅读次数:10996单个写入程序/多个阅读程序在.Net 类库...

iOS动效学习-推荐资料(最全)

iOS动效学习-推荐资料(最全)资源互链!!!资源的精华都在这里了 iOS开发推荐DMG资源 http://blog.csdn.net/xiongbaoxr/article/details/5098...

资料整理 - NAT类型与穿透

NAT话题,主要涉及: - NAT 与 防火墙 - NAT 基本类型 与 原理 - NAT 穿透方式及原理 - 基于NAT穿透的网络应用 - NAT穿透相关的工具和开源项...

iOS动效学习-推荐资料(最全)

原文地址:http://blog.csdn.net/xiongbaoxr/article/details/50989275 资源互链!!!资源的精华都在这里了 iOS开发推荐DMG资源  h...

多筆資料 二進制檔案 寫入-使用fwrite

當我們在做C或C++語言的檔案讀寫時,時不時可能都會用到二進制的檔案讀取或寫入,而有時候我們可能會一次寫入多筆資料,如陣列,或是結構的陣列等,那麼這時候我們需要如何確保可以一次全部寫入,並一次全部讀取...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:XML第四篇:快速表列資料-資料繫結 [转载]
举报原因:
原因补充:

(最多只允许输入30个字)