HTML中的数据绑定

信息来源:Wayne_Deng的专栏 有没想过在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起,就支持下面四种数据源: TabularDataControl(TDC)
TDC提供了一个简单的访问带有格式的文本数据的方法,一般是csv文件
下面是一个简单的示例: ID=dsoComposerWIDTH=0HEIGHT=0>
araMNAME="DataURL"VALUE="composer.csv">

RemoteDataService(RDS)
远程数据服务,直接访问远程服务器端的数据,InternetExplorer4.0.RDS通过OLE-DB或OpenDatabaseConnectivity(ODBC)来实现。 示例: ID=dsoComposerHEIGHT=0WIDTH=0>
araMNAME="Server"VALUE="http://musicserver">
araMNAME="Connect"VALUE="dsn=music;uid=guest;pwd=">
araMNAME="sql"VALUE="selectcompsr_namefromcomposer">

不过感觉有点安全性的问题,因为客户端能看到这段代码。 XMLDataSource
XML就不多说了,在IE4.0中这样使用:
CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso"
WIDTH="0"
HEIGHT="0"
MAYSCRIPT="true">
araMNAME="URL"VALUE="composer.xml">
InternetExplorer5以上可以这样: 另外IE还提供了一个XML数据岛的概念:XMLDataIslands.
MSHTMLDataSource
html数据页示例:
Hector
Berlioz
1803

Modest
Moussorgsky
1839
Franz
Liszt
1811 一旦定义可以这样访问:

.第二步:绑定数据到HTML元素上
一般都是通过tag中的datasrc和datafld实现绑定的。例如:
BoxDATASRC="#dsoComposers"DATAFLD="compsr_last">






这个是绑定表格的示例:
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm 其中数据来源:
araMNAME="DataURL"VALUE="http://msdn.microsoft.com/workshop/samples/author/databind/composer.csv">
araMNAME="UseHeader"VALUE="True">
araMNAME="TextQualifier"VALUE="'">

绑定的table

FirstLastBirthDeathOrigin



irst">








这就是效果了:
FirstLastBirthDeathOrigin
HectorBerlioz18031869France
ModestMoussorgsky18391881Russia
FranzLiszt18111886France
AntonioVivaldi16781741Italy
JohannSebastianBach16851750Germany
LudwigvanBeethoven17701827Germany
WolfgangAmadeusMozart17561791Austria
JosephHaydn17321809Germany
ClaudeDebussy18621918France
第三步:数据的动态添加删除等等(对象模型)
当然绑定可以是动态的:
在script中:
span1.dataSrc="#dsoComposer";
span1.dataFld="compsr_first"; html是这样的:
irst">
而且可以访问数据源的ado:
varoRecordSet=dsoComposer.recordset;
自然就有oRecordSet.MoveNext等等。 如:
irstTYPE=BUTTONVALUE="<<"
onclick="tdcComposers.recordset.MoveFirst()">
onclick="tdcComposers.recordset.MovePrevIoUs();
if(tdcComposers.recordset.BOF)
tdcComposers.recordset.MoveFirst();">
onclick="tdcComposers.recordset.MoveNext();
if(tdcComposers.recordset.EOF)
tdcComposers.recordset.MoveLast();">
"
onclick="tdcComposers.recordset.MoveLast()"> 还可以这样用:
ForEachobjFldinrsAttendees.Fields
document.write("Thefieldnameis"&objFld.Name&"
")
document.write("Thefieldvalueis"&objFld.Value&"
")
Next
添加删除记录就是:oRecordSet.AddNew()以及oRecordSet.Delete()。 第三步:响应各种数据事件(事件模型)
如何在数据更改后做出相应的处理?
msdn中提供的方法是这样的:

……

这些是事件名列表: EventBubblesCancelableAppliestoIntroducedInInternetExplorerVersion
onbeforeupdateTrueTrueboundelements4.0
onafterupdateTrueFalseboundelements4.0
onrowenterTrueFalseDSO4.0
onrowexitTrueTrueDSO4.0
onbeforeunloadFalseFalsewindow4.0
ondataavailableTrueFalseDSO4.0
ondatasetcompleteTrueFalseDSO4.0
ondatasetchangedTrueFalseDSO4.0
onerrorupdateTrueTrueboundelements4.0
onreadystatechangeTrueFalseDSO4.0
oncellchangeTrueFalseDSO5.0
onrowsinsertedTrueFalseDSO5.0
onrowsdeleteTrueFalseDSO5.0 怎么样?
我觉得http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm算是一个应用比较综合的例子了,好好研究一下,必有收获。 网上有不少利用数据绑定实现分页的示例,其实数据绑定还可以做更多的事情吧?应该在richclient里面有非常大的应用,例如制作非常复杂的datagrid。 现在想进一步搞清楚的是如何简便实现与服务器端的同步,因为客户端的数据绑定是对服务器端没有影响的(你可以从服务器端生成数据源,但是在客户端的操作不会自动返回服务器),msdn上说RDS可以,但是这种方法太笨拙了吧,又不安全。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解(附视频)
MIP的规则有哪些
Mip轮播图组件中的重要属性讲解
Mip的内联框架组件是什么
怎么创建初始的MIP配置及模板文件
HTML实现多选框及无法提交多数据的原因分析(附视频)
HTML如何设置复选框、单选框以及默认选项?(图文+视频)
怎么使用MIP组件
Div垂直居中效果怎么实现
HTML如何实现视频在线播放
如何使用Mip代码校验工具
Mip中弹出层组件是什么
如何用HTML实现简单按钮样式
Mip中快速回顶组件怎么用
Div内容居中效果如何实现
Div水平居中效果怎么实现
Mip中列表组件怎么用