有没想过在javascript中使用recordset?原来在客户端操作数据也可以这样简单,定义一个数据源,将数据绑定在各种tag上,实现应用程序般的效果,酷毙了!(首先申明一点,文章的内容全部来自msdn,不过用我自己的话总结而已。)
先看看这样两个例子: http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm 不得不又一次佩服微软。
这个是DataBinding的架构:

当然实现数据绑定有下面几步:
第一步,定义数据源 从IE4.0起,就支持下面四种数据源:
Tabular Data Control (TDC)
TDC提供了一个简单的访问带有格式的文本数据的方法,一般是csv文件。 下面是一个简单的示例: <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)
远程数据服务,直接访问远程服务器端的数据,Internet Explorer 4.0. RDS 通过OLE-DB 或 Open Database Connectivity (ODBC)来实现。
示例: <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>
不过感觉有点安全性的问题,因为客户端能看到这段代码。
XML Data Source
XML就不多说了,在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以上可以这样:
<!--[if gte IE 5]> <XML ID="xml1"> <topic-info> <page-type>reference</page-type> <member-type>property</member-type> <persistent-name>ACCESSKEY</persistent-name> <runtime-name readable="1" writeable="1">accessKey</runtime-name> <abstract>Sets or retrieves the accelerator key for the object.</abstract> </topic-info> </XML> <![endif]-->
另外IE还提供了一个XML数据岛的概念:XML Data Islands.
MSHTML Data Source
html数据页示例: <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>
一旦定义可以这样访问: <OBJECT ID=htmlComposer DATA="compdata.htm" HEIGHT=0 WIDTH=0>
</OBJECT>
.第二步:绑定数据到HTML元素上 一般都是通过tag中的datasrc和datafld实现绑定的。例如: <INPUT TYPE=TEXTBOX DATASRC="#dsoComposers" DATAFLD="compsr_last"> 和 <TABLE DATASRC=#dsoComposer> <TR> <TD><DIV DATAFLD=compsr_first></DIV></TD> </TR> </TABLE> 这个是绑定表格的示例: http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm
其中数据来源: <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 |
第三步:数据的动态添加,删除等等(对象模型) 当然绑定可以是动态的: 在script中: span1.dataSrc = "#dsoComposer"; span1.dataFld = "compsr_first";
html是这样的: <SPAN DATASRC="#dsoComposer" DATAFLD="compsr_first"></SPAN> 而且可以访问数据源的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()。
第三步:响应各种数据事件(事件模型) 如何在数据更改后做出相应的处理? msdn中提供的方法是这样的: <SCRIPT FOR=cboSort(数据源名) 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 | 怎么样? 我觉得http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm算是一个应用比较综合的例子了,好好研究一下,必有收获。
网上有不少利用数据绑定实现分页的示例,其实数据绑定还可以做更多的事情吧?应该在rich client里面有非常大的应用,例如制作非常复杂的datagrid。
现在想进一步搞清楚的是如何简便实现与服务器端的同步,因为客户端的数据绑定是对服务器端没有影响的(你可以从服务器端生成数据源,但是在客户端的操作不会自动返回服务器),msdn上说RDS可以,但是这种方法太笨拙了吧,又不安全。
|