基于模板的ajax的客户端组件

前段时间忽然神游起来，给自己放大暑假。整天在家闲着也是闲着。就把已经搁置已久的oo语言计划翻出来做。虚拟机元旦就做好了，一直没有具体的应用。要是让我整个web框架搭建起来，那工作也太过于庞大，纯粹是浪费我美好的暑假。所以我就搭了简单的web 服务器,客户端就用现在最火的ajax技术来构建，也算是个应用。
架构示例：



也许是做.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>


ID标题内容编辑
</GridHead>


<GridColumns>


<BoundField>[DataItem.ID]</BoundField>


<BoundField>[DataItem.Title]</BoundField>


<BoundField>[DataItem.Content]</BoundField>


<BoundField>增加 修改 删除</BoundField>


</GridColumns>


<GridFoot>


编号
</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;


}




//数据列表组件




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 = "";




//遍历数据源




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");




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);




str = str.replace(//[/ig,"<").replace(//]/ig,">");


pstr += str;


}




this.Control.innerHTML = pstr;


}




return this;


}




//数据网格组件




Sys.WebControl.GridView = function(control)

{


this.Control = control;


this.TemplateDoc = Sys.WebControl.GetDom(this.Control.innerHTML);




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>"






//遍历数据源




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));

DEMO地址：
http://www.cnblogs.com/Files/sukyboor/QBS_Demo.rar