HTML中的数据绑定(Data Binding)
来源:互联网 发布:linux kvm性能对比 编辑:程序博客网 时间:2024/05/21 12:53
先看看这样两个例子:
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
第三步:数据的动态添加,删除等等(对象模型)
当然绑定可以是动态的:
在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
怎么样?
我觉得http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm算是一个应用比较综合的例子了,好好研究一下,必有收获。
网上有不少利用数据绑定实现分页的示例,其实数据绑定还可以做更多的事情吧?应该在rich client里面有非常大的应用,例如制作非常复杂的datagrid。
现在想进一步搞清楚的是如何简便实现与服务器端的同步,因为客户端的数据绑定是对服务器端没有影响的(你可以从服务器端生成数据源,但是在客户端的操作不会自动返回服务器),msdn上说RDS可以,但是这种方法太笨拙了吧,又不安全。
- HTML中的数据绑定(Data Binding)
- 数据绑定(Data Binding)
- 数据绑定(data binding)
- 数据绑定(data binding )1
- 数据绑定(data binding)2
- 数据绑定(data binding)3
- Data Binding(数据绑定)用户指南
- Android Data Binding(数据绑定)用户指南
- Data Binding Library(数据绑定库)
- Android Data Binding(数据绑定)用户指南
- Data Binding(数据绑定)用户指南
- angularjs数据绑定(data binding)
- Data Binding(数据绑定)用户指南
- Data Binding(数据绑定)用户指南
- XAML数据绑定(Data Binding)
- 转载:Data Binding(数据绑定)用户指南
- Data Binding(数据绑定)用户指南
- Delphi 6中的XML数据绑定(XML Data Binding)
- TStrings的AddObject方法应用,以及和 PChar 的相互转化
- fileStream
- 数据补丁
- 通过代码,怎样调用IE打印呢?
- 数据压缩 -- 源码
- HTML中的数据绑定(Data Binding)
- 数据压缩 -- 应用
- .NET中的xpath
- 独立开发并公开源代码的项目
- 另一篇摘抄的文章, 或许可以帮助理解一下osi的概念
- (转)一些jbx的配置
- mdb Utils (Access)
- ASP中使用事务处理
- 提高FastReplace速度 (fStrRep.pas)