前段时间忽然神游起来,给自己放大暑假。整天在家闲着也是闲着。就把已经搁置已久的oo语言计划翻出来做。虚拟机元旦就做好了,一直没有具体的应用。要是让我整个web框架搭建起来,那工作也太过于庞大,纯粹是浪费我美好的暑假。所以我就搭了简单的web 服务器,客户端就用现在最火的ajax技术来构建,也算是个应用。
架构示例:
![](https://www.cnblogs.com/images/cnblogs_com/sukyboor/p1.JPG)
也许是做.net WEB组件做久了,所以很自然的想到DataGrid里的组件模版格式。既然在服务端可以处理,那么在客户端同样可以处理。
< EditGrid id="EGList" runat="server" ShowPageCount="True"PageSize="20"
ShowActionCell="True">
<Columns>
<asp:BoundColumn Visible="False" DataField="ID" ReadOnly="True" HeaderText="ID"></asp:BoundColumn>
</Columns>
</ EditGrid>
依葫芦画瓢,我们先定义模版,有过.net web组件开发的人一定很眼熟吧!(简直就是抄袭):
<div id="dtopicList" tagType="GridView">
<GridView>
<GridHead>
[td]ID[/td][td]标题[/td][td]内容[/td][td]编辑[/td]
</GridHead>
<GridColumns>
<BoundField>[DataItem.ID]</BoundField>
<BoundField>[DataItem.Title]</BoundField>
<BoundField>[DataItem.Content]</BoundField>
<BoundField>增加 修改 删除</BoundField>
</GridColumns>
<GridFoot>
[td]编号[/td][td][/td][td][/td][td][/td]
</GridFoot>
</GridView>
</div>
定义好了xml模版,就得想办法让数据集转换成浏览器可识别的代码。这里上段我的代码,大家参考一下。模版内容的识别和转换依然使用大家所熟识的正则表达式。
Sys.WebControl = new Object();
Sys.WebControl.GetDom = function(s){
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = false;
doc.loadXML(s) ;
return doc;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//数据列表组件
Sys.WebControl.DataList = function(control){
this.Control = control;
this.TemplateDoc = Sys.WebControl.GetDom(this.Control.innerHTML);
this.Control.innerHTML = "";
//数据绑定
this.DataBind = function(dataSrc){
//读取模版
var ix = this.TemplateDoc.selectSingleNode("/ITEMTEMPLATE/LABEL").text;
var pstr = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//遍历数据源
for(var i = 0;i < dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes.length;i++){
var xobj = dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes[i];
//解析模版
var str = ix;
var re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var arr;
while ((arr = re.exec(str)) != null){
str = str.replace(arr[0],xobj.selectSingleNode(arr[1]).text);//解析并替换
re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
}
//alert(arr[0]);
//alert(arr.index + "-" + arr.lastIndex + "\t" + arr);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
str = str.replace(/\[/ig,"<").replace(/\]/ig,">");
pstr += str;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.Control.innerHTML = pstr;
}
return this;
}
//数据网格组件
Sys.WebControl.GridView = function(control){
this.Control = control;
this.TemplateDoc = Sys.WebControl.GetDom(this.Control.innerHTML);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.Control.innerHTML = "";
//数据绑定
this.DataBind = function(dataSrc){
//读取模版
//alert(this.TemplateDoc.documentElement.tagName);
var viewDom = this.TemplateDoc.selectSingleNode("/GRIDVIEW");
var pstr = "<table width='98%'>";
//表头
var sHear = viewDom.selectSingleNode("GRIDHEAD").text;
pstr += "<tr>"
pstr += sHear.replace(/\[/ig,"<").replace(/\]/ig,">");
pstr += "</tr>"
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//遍历数据源
for(var i = 0;i < dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes.length;i++){
var xobj = dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes[i];
pstr += "<tr>"
//遍历Columns
for(var j = 0;j < viewDom.selectSingleNode("GRIDCOLUMNS").childNodes.length;j++){
var xItem = viewDom.selectSingleNode("GRIDCOLUMNS").childNodes[j];
pstr += "<td>"
//解析模版
var str = xItem.text;
var re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
var arr;
while ((arr = re.exec(str)) != null){
str = str.replace(arr[0],xobj.selectSingleNode(arr[1]).text);//解析并替换
re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
}
str = str.replace(/\[/ig,"<").replace(/\]/ig,">");
pstr += str;
pstr += "</td>";
}
pstr += "</tr>";
}
//表尾
var sHear = viewDom.selectSingleNode("GRIDFOOT").text;
pstr += "<tr>";
pstr += sHear.replace(/\[/ig,"<").replace(/\]/ig,">");
pstr += "</tr>";
pstr += "</table>";
this.Control.innerHTML = pstr;
}
return this;
}
用法:
//初始化话题列表组件
topiclist = new Sys.WebControl.GridView(document.getElementById("dtopicList"));
//数据绑定
topiclist.DataBind(Sys.Net.HttpSession.GetDom(s));
架构示例:
也许是做.net WEB组件做久了,所以很自然的想到DataGrid里的组件模版格式。既然在服务端可以处理,那么在客户端同样可以处理。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
用法:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
百足之虫,死而不僵