Web页面中动态目录树的生成
一、为什么需要动态显示的目录树由于用目录树显示数据层次性强,在web页面中目录树的使用可以说是随处可见.其实现方法也有好几种.
方案一.我们可以直接去msdn去下载webcontrol包,里面包含了一个TreeView控件,它是一个web的服务器端控件,添加引用之后,就可以直接添加到页面中了,开发起来也很简单,数据既可以直接添加,也可以通过数据绑定动态添加,但是它的缺点也很明显:由于每次显示时,它把需要显示的数据全部都加载,如果数据量很大的话,效率可想而知.
方案二.我们也可以用javascript编写,然后用css控制它的样式,由于javascript是在客户端运行的,这种方案实现的目录树减轻了服务器的负担,但是显示的数据不能动态绑定.
试想一个这样的应用环境:我们需要把上万个文件夹和文件用一个目录树加载,文件夹中可以包含多个目录和文件,而这些文件夹和文件的信息都保存在数据库中,我们该怎么做?方案一和方案二显然都行不通,这时我们可以先把第一层目录加载在页面中显示出来(不是全部加载),其它的目录和文件就按需显示,即什么时候用户请求显示,内容什么时候加载.
二、如何实现
在客户端
JavaScript代码:
function InsertChildTree1(str,o)
{
if(o==null || o.parentNode==null || str==null)
{
alert("Error. object expected!");
return;
}
if(o.parentNode.className=="Closed")return;
if(o.IsLoad)
{
if(o.IsLoad=="1")return;
}
var response=TreeData.InsertTreeData(str);
var ds=response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0;i<ds.Tables.Rows.length;i++)
{
var oNewList=document.createElement("ul");
o.parentNode.appendChild(oNewList);
var oNewNode = document.createElement("li");
oNewList.appendChild(oNewNode);
oNewNode.className="Closed";
var oNodeImg=document.createElement("img");
oNodeImg.setAttribute("IsLoad","0");
var strPath;
var subCount=ds.Tables.Rows.NodeCount;
strPath=ds.Tables.Rows.NodePath;
oNodeImg.setAttribute("strPath",strPath);
oNodeImg.className="s";
oNewNode.appendChild(oNodeImg);
if(subCount>0)
{
oNodeImg.onclick=function(){ChangeStatus(this);InsertChildTree1(this.strPath,this);this.IsLoad="1";};
oNodeImg.src="css/s.gif";
}
else
{
oNodeImg.src="css/s.gif";
oNodeImg.parentNode.className="Child";
}
var oNodeHref=document.createElement("a");
oNodeHref.setAttribute("strPath",strPath);
oNodeHref.setAttribute("href","#");
oNodeHref.onclick=function(){ViewFolder(this.strPath);};
oNodeHref.innerText=ds.Tables.Rows.NodeText;
if(subCount<0)subCount=0;
oNodeHref.setAttribute("title","此目录下共有"+subCount+"个子文件夹");
oNewNode.appendChild(oNodeHref);
}
}
else
{
alert("Error. " + response.request.responseText);
}
}
function write(o)
{
if(typeof(o.request)!="object")return;
if(o.request.readyState==1 && o.request!=null)
{
alert("ffff");
}
else
{
return;
}
}
//添加子树
function InsertChildTree(o)
{
if(o.className=="Closed")
if(o.IsLoad)
{
if(o.IsLoad=="1")return;
}
var response=TreeData.InitTreeData1();
write(response);
var ds = response.value;
if(ds != null<%2
页:
[1]