对于Ajax的介绍,国内外的技术网站都有不少的资料,我在此不多说了。我所使用的Ajax来自http://ajax.schwarz-interactive.de/,大家有兴趣可以去下载。
首先来看看做出来的效果:
![](https://dingsea.cnblogs.com/images/cnblogs_com/dingsea/38456/o_ajax1.jpg)
这是刚加载好页面的效果。
![](https://dingsea.cnblogs.com/images/cnblogs_com/dingsea/38456/o_ajax2.jpg)
![](https://dingsea.cnblogs.com/images/cnblogs_com/dingsea/38456/o_ajax3.jpg)
![](https://dingsea.cnblogs.com/images/cnblogs_com/dingsea/38456/o_ajax4.jpg)
这是我仿造项目做的一个解决方案:
其中BorgWorX.Web.Core.Ajax生成Ajax.DLL
第一步:按AjaxGuide.doc上说的来,先在web.config中进行修改,增加:
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
第二步:我们在page load事件时向Ajax注册页面类,并向tree view控件绑定UNSPSC第一层的数据:
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://dingsea.cnblogs.com/Images/OutliningIndicators/None.gif)
第四步:服务端搞定后,我们来看看客户端如何设计。通过page_load方法加载了第一层的UNSPSC Code,也就是XX000000的所有节点并显示出来。通过对TreeView WebControl的客户端行为进行考察(微软在其文章《About the TreeView WebControl》中有提到),我们发现可以在TreeView的OnExpand事件中,进行异步下载子层数据:
<script language="javascript">
var Index;
function ds()
{
WebForm2.returnDs(TreeView1.getTreeNode(Index).getAttribute("NodeData"),returnDs_callback);
}
function returnDs_callback(response)
{
var n=TreeView1.getTreeNode(Index);
var load=n.getChildren();
if(load.length!=1){
return;//如果已经存在数据,那就不再读取。
}
else
{
var loadNode=load[0];
loadNode.remove();
}
var ds=response.value;
if(ds!=null && ds.Tables!=null && typeof(ds)=="object")
{
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
var newNode=TreeView1.createTreeNode();
newNode.setAttribute("NodeData",ds.Tables[0].Rows[i].UNSPSCCode);
newNode.setAttribute("Text",ds.Tables[0].Rows[i].UNSPSCCode+" "+ds.Tables[0].Rows[i].Description);
if(newNode.getAttribute("NodeData")%100==0)
{
var loadNode=TreeView1.createTreeNode();
loadNode.setAttribute("Text","Loading......");
newNode.add(loadNode);
}
n.add(newNode);
}
}
else{alert(response.error);}
}
</script>
<script language="javascript" for="TreeView1" event="onexpand">
//TODO:在此处填写TreeView的OnExpand事件的代码。
Index= window.event.treeNodeIndex;//获得展开的节点的位置,根节点为0。
if(Index=='0')return;//如果是根节点的话就直接返回。
ds();
</script>
按这样的情况来算,业务中每层节点最多99个,一共四层节点,也就是99*99*99*99= 9227446944279201(更正:96059601,自己汗一个先。)个节点。远远超过需求中的9000万个,而且在用户展开节点后先出现的是“Loading……”的字样,同时在服务器上去下载节点,不但优化了性能提高了效率而且还更人性化、界面更有亲和力。
2006年4月5日修改:上传项目文件。http://dingsea.cnblogs.com/Files/dingsea/Ajax/project.rar