|
表10-5 支持?jǐn)?shù)據(jù)綁定的HTML元素
HTML元素
綁定屬性
可否更
新數(shù)據(jù)
可否表
格綁定
可否作為
HTML顯示
A
href
不可
不可
不可
APPLET
PARAM
可以
不可
不可
BUTTON
innerText和innerHTML
不可
不可
可以
DIV
innerText和innerHTML
不可
不可
可以
FRAME
src
不可
不可
不可
IFRAME
src
不可
不可
不可
IMG
src
不可
不可
不可
INPUT
checked
可以
不可
不可
TYPE=CHECKOBX INPUT
value
可以
不可
不可
TYPE=HIDDEN INPUT
vale
可以
不可
不可
TYPE=LABEL INPUT
value
可以
不可
不可
TYPE=PASSWORD INPUT
checked
可以
不可
不可
TYPE=RADIO INPUT
value
可以
不可
不可
TYPE=TEXT LABEL
innerText和innerHTML
不可
不可
可以
LEGEND
innerText和innerHTML
不可
不可
不可
MARQUEE
innerText和innerHTML
不可
不可
可以
OBJECT
param
可以
不可
不可
SELECT
選擇的<OPTION>元素文本
可以
不可
不可
SPAN
innerText和innerHTML
不可
不可
可以
TABLE
無(wú)
不可
可以
不可
TEXTAREA
value
可以
不可
不可
2． 單個(gè)記錄綁定
單個(gè)記錄綁定用于只顯示單行數(shù)據(jù)的情況。例如，考慮下面的代碼：
ID: <SPAN DATASRC="#dsoData" DATAFLD="au_id"></SPAN><BR>
First Name: <SPAN DATASRC="#dsoData" DATAFLD="au_fname"></SPAN><BR>
Last Name: <SPAN DATASRC="#dsoData" DATAFLD="au_lname"></SPAN><BR>
Phone: <SPAN DATASRC="#dsoData" DATAFLD="phone"></SPAN><BR>
Address: <SPAN DATASRC="#dsoData" DATAFLD="address"></SPAN><BR>
City: <SPAN DATASRC="#dsoData" DATAFLD="city"></SPAN><BR>
State: <SPAN DATASRC="#dsoData" DATAFLD="state"></SPAN><BR>
Zip: <SPAN DATASRC="#dsoData" DATAFLD="zip"></SPAN><BR>
Contact: <SPAN DATASRC="#dsoData" DATAFLD="contract"></SPAN><BR>
使用單個(gè)記錄綁定時(shí)，每一個(gè)綁定的HTML元素都要確定數(shù)據(jù)源（DATASRC）和綁定的字段（DATAFLD）。
以上數(shù)據(jù)綁定的結(jié)果如圖10-5所示：
圖10-5 單個(gè)記錄綁定的結(jié)果
作為一個(gè)結(jié)果來(lái)說(shuō)，這已經(jīng)滿足要求了，但由于在HTML文檔中忽略了空格，所以數(shù)據(jù)排列得不整齊。數(shù)據(jù)綁定使我們易于得到數(shù)據(jù)，但看上去不太美觀。一個(gè)好方法是使用表格來(lái)對(duì)齊數(shù)據(jù)。
<TABLE ID="tblData">
<TR><TD>ID:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_id"></SPAN></TD></TR>
<TR><TD>First Name:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_fname"></SPAN></TD></TR>
<TR><TD>Last Name:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_lname"></SPAN></TD></TR>
<TR><TD>Phone:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="phone"></SPAN></TD></TR>
<TR><TD>Address:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="address"></SPAN></TD></TR>
<TR><TD>City:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="city"></SPAN></TD></TR>
<TR><TD>State:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="state"></SPAN></TD></TR>
<TR><TD>Zip:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="zip"></SPAN></TD></TR>
<TR><TD>Contact:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="contract"></SPAN></TD></TR>
</TABLE>
這個(gè)HTML文檔雖然不容易閱讀，但卻提供了一個(gè)較好的顯示結(jié)果，如圖10-6所示：
圖10-6 單個(gè)記錄綁定的表格顯示結(jié)果
注意，這個(gè)例子只顯示了使用SPAN元素來(lái)存放數(shù)據(jù)。如果想編輯數(shù)據(jù)，那么可以使用INPUT元素來(lái)實(shí)現(xiàn)。例如：
<TABLE ID="tblData">
<TR><TD>ID:</TD>
<TD>
<INPUT TYPE="TEXT" DATASRC="#dsoData" DATAFLD="au_id"></INPUT>
</TD>
</TR>
...
</TABLE>
這里使用了一個(gè)TEXT類型的INPUT元素。注意，數(shù)據(jù)綁定幾乎是相同的，僅僅是HTML元素不同。結(jié)果如圖10-7所示：
圖10-7 單個(gè)記錄綁定的編輯界面
數(shù)據(jù)導(dǎo)航
除非能得到其他記錄，否則只顯示單條記錄并不理想。幸運(yùn)的是數(shù)據(jù)控件有一個(gè)Recordset屬性，它是實(shí)際的含有數(shù)據(jù)的ADO記錄集。回顧第8章，應(yīng)該記得記錄集有移動(dòng)記錄的方法：
· MoveFirst。
· MoveNext。
· MovePrevious。
· MoveLast。
舉一個(gè)例子，假定想在HTML頁(yè)面中增加一些按鈕以獲得記錄導(dǎo)航的能力，如圖10-8所示：
圖10-8 導(dǎo)航按鈕
可以用如下代碼創(chuàng)建按鈕：
<button id="cmdFirst" title="First Record"
onclick="dsoData.recordset.MoveFirst()"> |< </button>
<button id="cmdPrevious" title="Previous Record"
onclick="if (!dsoData.recordset.BOF) dsoData.recordset.MovePrevious()">
< </button>
<button id="cmdNext" title="Next Record"
onclick="if (!dsoData.recordset.EOF) dsoData.recordset.MoveNext()">
> </button>
<button id="cmdLast" title="Last Record"
onclick="dsoData.recordset.MoveLast()"> >| </button>
這些代碼僅僅利用了記錄集中移動(dòng)記錄的方法。移到第一條和最后一條記錄實(shí)現(xiàn)想來(lái)相當(dāng)容易。只需記住數(shù)據(jù)控件有一個(gè)Recordset屬性，由于該屬性是一個(gè)對(duì)象，所以有其自己的方法。因此，代碼可以寫為：
dsoData.recordset.MoveFirst()
以上代碼只是簡(jiǎn)單地調(diào)用數(shù)據(jù)控件管理的記錄集的MoveFirst方法。
移到上一條和下一條記錄的代碼看上去有一點(diǎn)技巧，但也很簡(jiǎn)單。
if (!dsoData.recordset.BOF)
dsoData.recordset.MovePrevious()
以上是向后移動(dòng)記錄的方法，只需在執(zhí)行MovePrevious方法之前，判斷一下記錄集的BOF屬性，以確定當(dāng)前記錄不在記錄集的開(kāi)始位置。
3． 表格綁定
表格綁定不同于單個(gè)記錄綁定，因?yàn)椴恢皇菫閷?duì)齊數(shù)據(jù)而使用表格。在表格綁定中把數(shù)據(jù)綁定到了TABLE元素，能夠一次看到多條記錄，如圖10-9所示：
圖10-9 表格綁定的界面
這甚至比單個(gè)記錄綁定更容易，實(shí)現(xiàn)表格綁定需要使用表格的DATASRC屬性，然后使用DATAFLD屬性綁定表格元素。這樣就將表格與數(shù)據(jù)控件綁定起來(lái)，每一個(gè)表格單元綁定到單獨(dú)的字段。
然而，看一下能夠被綁定的HTML元素的列表，會(huì)發(fā)現(xiàn)表格單元元素（TD）并不在其中。因?yàn)檫@個(gè)原因，一般為只讀的表格使用SPAN或DIV標(biāo)記，而對(duì)于可編輯的表格則使用INPUT標(biāo)記。例如，圖10-9中的表格是用下列代碼創(chuàng)建的：
<TABLE ID="tblData" DATASRC="#dsoData">
<THEAD>
<TR>
<TD>au_id</TD>
<TD>au_fname</TD>
<TD>au_lname</TD>
<TD>phone</TD>
<TD>address</TD>
<TD>city</TD>
<TD>state</TD>
<TD>zip</TD>
<TD>contract</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><INPUT TYPE="TEXT" DATAFLD="au_id"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="au_fname"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="au_lname"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="phone"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="address"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="city"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="state"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="zip"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="contract"></INPUT></TD>
</TR>
</TBODY>
</TABLE>
TABLE元素還有另外一個(gè)用于數(shù)據(jù)綁定的屬性：DATAPAGESIZE，決定了在表格中可以顯示的記錄數(shù)。
<TABLE ID="tblData" DATASRC="#dsoData" DATAPAGESIZE="10">
在上面的例子中，表格一次只能含有10條記錄。記錄集的移動(dòng)方法在這里不起作用，因?yàn)楸砀裣拗屏丝梢?jiàn)的記錄，所以必須使用表格的兩個(gè)方法，如下所示：
<button id="cmdPreviousPage" title="Previous Page"
onclick="tblData.PreviousPage()">Previous Page</button>
<button id="cmdNextPage" title="Next Page"
onclick="tblData.NextPage()">Next Page</button>
4． 動(dòng)態(tài)綁定
到目前為止，所有的例子都只顯示了一個(gè)固定的記錄集，綁定的字段在設(shè)計(jì)期間已經(jīng)創(chuàng)建。但看起來(lái)大量的代碼不能重用，特別是在Web應(yīng)用程序正給用戶帶來(lái)越來(lái)越強(qiáng)的功能的情況下，這種方式缺乏開(kāi)發(fā)程序的靈活性。
解決這個(gè)難題的方法是根據(jù)數(shù)據(jù)控件中的數(shù)據(jù)動(dòng)態(tài)創(chuàng)建表中的字段。實(shí)際上這也比較容易，依賴于客戶端的腳本程序。那么，假定讓用戶在表authors和publishers中進(jìn)行選擇，如圖10-10所示：
圖10-10 使用RDS動(dòng)態(tài)數(shù)據(jù)綁定的界面
現(xiàn)在我們并不真想綁定兩個(gè)表的所有字段，因?yàn)檫@會(huì)變得難以維護(hù)。如果源數(shù)據(jù)的結(jié)構(gòu)改變了，或者想增加另一個(gè)表，情況將會(huì)怎樣？處理這種情況的方法就是創(chuàng)建一個(gè)虛表，在運(yùn)行期間動(dòng)態(tài)地創(chuàng)建和綁定字段。
首先，創(chuàng)建數(shù)據(jù)控件。
<OBJECT CLASSID="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
ID="dsoData" HEIGHT="0" WIDTH="0"
ondatasetcomplete="createCells()">
</OBJECT>
這是RDS數(shù)據(jù)控件，與前面例子唯一不同的是這里沒(méi)有設(shè)置參數(shù)，代碼中也是如此。唯一增加的是設(shè)置了一個(gè)在數(shù)據(jù)控件讀完數(shù)據(jù)后運(yùn)行的函數(shù)。
接下來(lái)，需要?jiǎng)?chuàng)建兩個(gè)按鈕來(lái)確定數(shù)據(jù)。
<BUTTON ID="cmdAuthors"
onclick="resetData('authors')">authors</BUTTON>
<BUTTON ID="cmdPublishers"
onclick="resetData('publishers')">publishers</BUTTON>
下面創(chuàng)建虛表。
<TABLE ID="tblData" border=1>
<THEAD><TR></TR></THEAD>
<TBODY><TR></TR></TBODY>
</TABLE>
這充當(dāng)了模板的作用。注意，表格中還沒(méi)有單元格。這是因?yàn)椴⒉恢罃?shù)據(jù)有多少個(gè)字段，所以也將在運(yùn)行期間創(chuàng)建它們。
現(xiàn)在編寫JScript代碼。首先看一下resetData函數(shù)，該函數(shù)設(shè)置數(shù)據(jù)控件的屬性并加載數(shù)據(jù)。
function resetData(sTable)
{
// reset the data
dsoData.Connect = 'Provider=SQLOLEDB; Data Source=' +
'<%= Request.ServerVariables("SERVER_NAME") %>' +
'; Initial Catalog=pubs; User ID=sa; Password=';
dsoData.Server = 'http://<%= Request.ServerVariables("SERVER_NAME") %>';
dsoData.SQL = 'SELECT * FROM ' + sTable;
dsoData.Refresh();
}
雖然這看起來(lái)比使用參數(shù)更復(fù)雜一些，但是仍然比較簡(jiǎn)單。別忘了參數(shù)名是如何映射到屬性的？這里所做的就是設(shè)置那些屬性，然后調(diào)用Refresh方法更新數(shù)據(jù)控件。看上去，這可能比以前的例子更糟糕，因?yàn)樵诖a中只有不多的ASP，也只是簡(jiǎn)單地在屬性中填入Web服務(wù)器的名字。但使用該方法可以在不修改代碼的情況下將此ASP頁(yè)面從一個(gè)服務(wù)器移到另一個(gè)服務(wù)器。作為數(shù)據(jù)源的表名可以通過(guò)選擇適當(dāng)?shù)陌粹o而傳給函數(shù)。
一旦加載了數(shù)據(jù)，將觸發(fā)數(shù)據(jù)控件的ondatasetcomplete事件，運(yùn)行createCells函數(shù)。
function createCells()
{
var fldF;
var tblCell;
// delete what's there already
deleteCells();
// now create the new cells
for (fldF = new Enumerator(dsoData.recordset.Fields);
!fldF.atEnd(); fldF.moveNext())
{
// create a new cell for the heading
tblCell = tblData.rows[0].insertCell();
tblCell.innerHTML = '<B>' + fldF.item().name + '</B>';
// create a new cell for the body
tblCell = tblData.rows[1].insertCell();
tblCell.innerHTML = '<INPUT TYPE="TEXT" DATAFLD="' +
fldF.item().name + '"></INPUT>';
}
// now bind to the data source
tblData.dataSrc = '#dsoData';
}
這同樣也很簡(jiǎn)單。首先刪除了現(xiàn)有的表格單元格（馬上會(huì)介紹這個(gè)函數(shù)），然后遍歷記錄集的字段。在行頭為每個(gè)字段創(chuàng)建一個(gè)新單元格（這個(gè)表格只有兩行：第一行，即第0行，是表頭；第二行，即第1行，是表體）。表格單元?jiǎng)?chuàng)建完后，將innerHTML屬性設(shè)為對(duì)應(yīng)的字段名。在表體中創(chuàng)建新單元格的過(guò)程類似，但此時(shí)使用innerHTML元件保存綁定到數(shù)據(jù)字段的INPUT標(biāo)記。當(dāng)所有的字段都完成這樣的操作后，這個(gè)表就與數(shù)據(jù)控件綁定了。
因?yàn)檫@個(gè)頁(yè)面允許在兩個(gè)不同的數(shù)據(jù)集之間進(jìn)行切換，所以需要先刪除現(xiàn)有的數(shù)據(jù)。
function deleteCells()
{
var iCell;
var iCells;
// unbind the table
tblData.dataSrc = '';
// delete existing cells
iCells = tblData.rows[0].cells.length
for (iCell = 0; iCell < iCells; ++iCell)
{
tblData.rows[0].deleteCell();
tblData.rows[1].deleteCell();
}
}
這個(gè)子程序只是對(duì)表解除綁定，然后在表格中遍歷所有的單元格并刪除它們。等到上述程序執(zhí)行完畢，表格就只剩下空的表頭和表體行。
這是一個(gè)用RDS和一些DHTML實(shí)現(xiàn)的簡(jiǎn)單例子。可以容易地把其加到一個(gè)ASP包含文件中，并把該文件放到任何應(yīng)用程序中，即使數(shù)據(jù)源不改變也可使用這種方法。
這個(gè)例子的全部代碼——文件RDSDynamicBinding.asp以及類似的其他類型的數(shù)據(jù)控件例子，可以在Wrox站點(diǎn)上找到。
10.2.6 更新數(shù)據(jù)
迄今為止，僅學(xué)習(xí)了在客戶端如何取到數(shù)據(jù)，但還沒(méi)有涉及如何更新客戶端數(shù)據(jù)，和將其送回服務(wù)器。別忘了，記錄集是斷開(kāi)連接的，那么如何更新數(shù)據(jù)呢？對(duì)數(shù)據(jù)所做的任何修改只是數(shù)據(jù)控件中本地記錄的一部分，因此為了更新服務(wù)器必須發(fā)一條特殊的指令。然而這并不需做什么復(fù)雜的工作，因?yàn)镽DS數(shù)據(jù)控件有兩個(gè)方法，允許我們要么取消最近對(duì)數(shù)據(jù)所做的任何修改，要么將所有修改送到服務(wù)器。
為了方便用戶，可以為此創(chuàng)建一些按鈕。
<BUTTON ID="cmdCancelAll" TITLE="Abandon All Chnages"
ONCLICK="dsoData.CnacelUpdate()">Cnacel</BUTTON>
<BUTTON ID="cmdUpdateAll" TITLE="Save All Changes"
ONCLICK="dsoData.SubmitChanges()">Save</BUTTON>
SubmitChanges方法只將那些改動(dòng)過(guò)的記錄送回服務(wù)器，而CancelUpdate方法則取消在本地記錄集上所做的任何修改。
更新和取消更新操作并不是唯一所需的。如果想增加新的記錄或刪除一條現(xiàn)有的記錄，怎么辦？可以使用記錄集的AddNew和Delete方法。這將增加或刪除記錄集中的記錄，然后在發(fā)送SubmitChanges命令后，服務(wù)器上的數(shù)據(jù)就可以被更新。
<BUTTON ID="cmdDelete" TITLE="Delete This Record"
ONCLICK="dsoData.recordset.Delete()">Delete</BUTTON>
<BUTTON ID="cmdAddNew" TITLE="Add New Record"
ONCLICK="dsoData.recordset.AddNew()">Add</BUTTON>
|
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
