快捷導(dǎo)航

HTML中的數(shù)據(jù)綁定

更新時(shí)間：2006年09月08日 00:00:00 作者：

信息來(lái)源：Wayne_Deng的專欄

有沒(méi)想過(guò)在java script中使用recordset？原來(lái)在客戶端操作數(shù)據(jù)也可以這樣簡(jiǎn)單，定義一個(gè)數(shù)據(jù)源，將數(shù)據(jù)綁定在各種tag上，實(shí)現(xiàn)應(yīng)用程序般的效果，酷斃了?。ㄊ紫壬昝饕稽c(diǎn)，文章的內(nèi)容全部來(lái)自msdn，不過(guò)用我自己的話總結(jié)而已。）

先看看這樣兩個(gè)例子：
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
不得不又一次佩服微軟。

這個(gè)是DataBinding的架構(gòu)：

當(dāng)然實(shí)現(xiàn)數(shù)據(jù)綁定有下面幾步：

第一步，定義數(shù)據(jù)源
從IE4.0起，就支持下面四種數(shù)據(jù)源：

Tabular Data Control (TDC)
TDC提供了一個(gè)簡(jiǎn)單的訪問(wèn)帶有格式的文本數(shù)據(jù)的方法，一般是csv文件。
下面是一個(gè)簡(jiǎn)單的示例：

<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    ID=dsoComposer WIDTH=0 HEIGHT=0>
    <PARAM NAME="DataURL" VALUE="composer.csv">
</OBJECT>

Remote Data Service (RDS)
遠(yuǎn)程數(shù)據(jù)服務(wù)，直接訪問(wèn)遠(yuǎn)程服務(wù)器端的數(shù)據(jù)，Internet Explorer 4.0. RDS 通過(guò)OLE-DB 或 Open Database Connectivity (ODBC)來(lái)實(shí)現(xiàn)。

示例：

<OBJECT classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
    ID=dsoComposer HEIGHT=0 WIDTH=0>
    <PARAM NAME="Server"  VALUE="http://musicserver">
    <PARAM NAME="Connect" VALUE="dsn=music;uid=guest;pwd=">
    <PARAM NAME="SQL"     VALUE="select compsr_name from composer">
</OBJECT>
不過(guò)感覺(jué)有點(diǎn)安全性的問(wèn)題，因?yàn)榭蛻舳四芸吹竭@段代碼。

XML Data Source
XML就不多說(shuō)了，在IE4.0中這樣使用：
<APPLET
    CODE="com.ms.xml.dso.XMLDSO.class"
    ID="xmldso"
    WIDTH="0"
    HEIGHT="0"
    MAYSCRIPT="true">
    <PARAM NAME="URL" VALUE="composer.xml">
</APPLET>

Internet Explorer 5以上可以這樣：



另外IE還提供了一個(gè)XML數(shù)據(jù)島的概念：XML Data Islands.

MSHTML Data Source
html數(shù)據(jù)頁(yè)示例：
<H1 ID=COMPSR_FIRST>Hector</H1>
<MARQUEE ID=COMPSR_LAST>Berlioz</MARQUEE>
<DIV ID=COMPSR_BIRTH>1803</DIV>
<H2 ID=COMPSR_FIRST>Modest</H2>
<H3 ID=COMPSR_LAST>Moussorgsky</H3>
<BUTTON ID=COMPSR_BIRTH>1839</BUTTON>
<TEXTAREA ID=COMPSR_FIRST>Franz</TEXTAREA>
<XMP ID=COMPSR_LAST>Liszt</XMP>
<SPAN ID=COMPSR_BIRTH>1811</SPAN>

一旦定義可以這樣訪問(wèn)：

<OBJECT ID=htmlComposer DATA="compdata.htm" HEIGHT=0 WIDTH=0>
</OBJECT>
.第二步：綁定數(shù)據(jù)到HTML元素上
一般都是通過(guò)tag中的datasrc和datafld實(shí)現(xiàn)綁定的。例如：
<INPUT TYPE=TEXTBOX DATASRC="#dsoComposers" DATAFLD="compsr_last">
和
<TABLE DATASRC=#dsoComposer>
<TR>
<TD><DIV DATAFLD=compsr_first></DIV></TD>
</TR>
</TABLE>
這個(gè)是綁定表格的示例：
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

其中數(shù)據(jù)來(lái)源：
<OBJECT id="tdcComposers" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv">
<PARAM NAME="UseHeader" VALUE="True">
<PARAM NAME="TextQualifier" VALUE="'">
</OBJECT>
綁定的table
<TABLE datasrc=#tdcComposers>
<THEAD><TR STYLE="font-weight:bold">
   <TD>First</TD><TD>Last</TD><TD>Birth</TD><TD>Death</TD><TD>Origin</TD>
   </TR></THEAD>
<TBODY>
<TR>
   <TD><DIV datafld="compsr_first"></DIV></TD>
   <TD><DIV datafld="compsr_last"></DIV></TD>
   <TD><DIV datafld="compsr_birth"></DIV></TD>
   <TD><DIV datafld="compsr_death"></DIV></TD>
   <TD><DIV datafld="origin"></DIV></TD>
</TR>
</TBODY>
</TABLE>
這就是效果了：
First Last Birth Death Origin
Hector Berlioz 1803 1869 France
Modest Moussorgsky 1839 1881 Russia
Franz Liszt 1811 1886 France
Antonio Vivaldi 1678 1741 Italy
Johann Sebastian Bach 1685 1750 Germany
Ludwig van Beethoven 1770 1827 Germany
Wolfgang Amadeus Mozart 1756 1791 Austria
Joseph Haydn 1732 1809 Germany
Claude Debussy 1862 1918 France

第三步：數(shù)據(jù)的動(dòng)態(tài)添加，刪除等等（對(duì)象模型）
當(dāng)然綁定可以是動(dòng)態(tài)的：
在script中：
span1.dataSrc = "#dsoComposer";
span1.dataFld = "compsr_first";

html是這樣的：
<SPAN DATASRC="#dsoComposer" DATAFLD="compsr_first"></SPAN>
而且可以訪問(wèn)數(shù)據(jù)源的ado：
var oRecordSet = dsoComposer.recordset;
自然就有oRecordSet .MoveNext等等。

如：
<INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"
    onclick="tdcComposers.recordset.MoveFirst()">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE=" < "
    onclick="tdcComposers.recordset.MovePrevious();
    if (tdcComposers.recordset.BOF)
        tdcComposers.recordset.MoveFirst();">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=" > "
    onclick="tdcComposers.recordset.MoveNext();
        if (tdcComposers.recordset.EOF)
            tdcComposers.recordset.MoveLast();">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
    onclick="tdcComposers.recordset.MoveLast()">

還可以這樣用：
<SCRIPT Language="VBScript">
For Each objFld in rsAttendees.Fields
    document.write("The field name is " & objFld.Name & "<BR>")
    document.write("The field value is " & objFld.Value & "<BR>")
Next
</SCRIPT>

添加刪除記錄就是：oRecordSet.AddNew()以及oRecordSet.Delete()。

第三步：響應(yīng)各種數(shù)據(jù)事件（事件模型）
如何在數(shù)據(jù)更改后做出相應(yīng)的處理？
msdn中提供的方法是這樣的：
<SCRIPT FOR=cboSort（數(shù)據(jù)源名） EVENT=onchange（事件名）>
    ……
</SCRIPT>
這些是事件名列表：

Event Bubbles Cancelable Applies to Introduced In Internet Explorer Version
onbeforeupdate True True bound elements 4.0
onafterupdate True False bound elements 4.0
onrowenter True False DSO 4.0
onrowexit True True DSO 4.0
onbeforeunload False False window 4.0
ondataavailable True False DSO 4.0
ondatasetcomplete True False DSO 4.0
ondatasetchanged True False DSO 4.0
onerrorupdate True True bound elements 4.0
onreadystatechange True False DSO 4.0
oncellchange True False DSO 5.0
onrowsinserted True False DSO 5.0
onrowsdelete True False DSO 5.0

怎么樣？
我覺(jué)得http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm算是一個(gè)應(yīng)用比較綜合的例子了，好好研究一下，必有收獲。

網(wǎng)上有不少利用數(shù)據(jù)綁定實(shí)現(xiàn)分頁(yè)的示例，其實(shí)數(shù)據(jù)綁定還可以做更多的事情吧？應(yīng)該在rich client里面有非常大的應(yīng)用，例如制作非常復(fù)雜的datagrid。

現(xiàn)在想進(jìn)一步搞清楚的是如何簡(jiǎn)便實(shí)現(xiàn)與服務(wù)器端的同步，因?yàn)榭蛻舳说臄?shù)據(jù)綁定是對(duì)服務(wù)器端沒(méi)有影響的（你可以從服務(wù)器端生成數(shù)據(jù)源，但是在客戶端的操作不會(huì)自動(dòng)返回服務(wù)器），msdn上說(shuō)RDS可以，但是這種方法太笨拙了吧，又不安全。