动态加载梅花雪树1.0的子节点

//梅花雪树1.0子节点的动态加载
//梅花雪介绍：3-5万以内节点，一次性加载性能极佳。动态加载只是探索这个树的生成方法，实用性不强
//index.htm
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>#Mtree {
FONT-SIZE: 12px; BACKGROUND-COLOR: #e1e1e1
}
#Mtree A {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; COLOR: #000060; PADDING-TOP: 2px; TEXT-DECORATION: none
}
#Mtree A:hover {
BACKGROUND: #7386ba; COLOR: #fff; TEXT-DECORATION: none
}
</STYLE><META content="MSHTML 6.00.3790.3959" name=GENERATOR></HEAD>
<BODY>
<TABLE id=Mtree cellSpacing=0 cellPadding=8>
<TR><TD width=194><div id="xx">xxxx</div>
</TABLE><SCRIPT language=JavaScript src="img/MzTreeView10.js"></SCRIPT>
<SCRIPT language=JavaScript>function nothing(){return;}//去除母节点的url，并可避免url实用#时页面移动到顶端的现象，和动态加载无关
function expanding(){tree.expand(tree.currentNode.id,!tree.node[tree.currentNode.id].isExpand);}//点击母节点时将其展开
var tree = new MzTreeView("tree");
tree.setIconPath("img/"); 
tree.nodes["0_1"] = "text:孟州市村务公开系统;method:tree.expand(1,!tree.node[1].isExpand);url:javascript:nothing()";tree.nodes["1_2"] = "text:大定办事处;url:javascript:nothing();method: expanding()";
tree.nodes["1_3"] = "text:会昌办事处;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_4"] = "text:河雍办事处;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_5"] = "text:河阳办事处;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_6"] = "text:化工镇;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_7"] = "text:南庄镇;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_8"] = "text:城伯镇;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_9"] = "text:谷旦镇;url:javascript:nothing();method:dynamicAdd()";
//tree.nodes["1_10"] = "text:赵和镇;url:javascript:nothing();method:dynamicAdd()";
tree.nodes["1_11"] = "text:槐树乡;url:javascript:nothing();";//本节点没有method:dynamicAdd()，不能动态加载
tree.nodes["1_12"] = "text:西虢镇;url:javascript:nothing();method:dynamicAdd()";tree.nodes["2_201"] = "text:北街; data:id=201&bianhao=1";
tree.nodes["2_202"] = "text:北开义; data:id=202&bianhao=2";
tree.nodes["2_203"] = "text:陈湾; data:id=203&bianhao=3";tree.setURL("#");
tree.setTarget('_self');xx.innerHTML=tree.toString()+'<br>';//生成树
//setTimeout("tree.focus('2',true), tree.expand(tree.currentNode.id,true);",30);
</SCRIPT>
<SCRIPT language=JavaScript>
function dynamicAdd(){
//只刷新当前加载的节点
  var sourceIndex=tree.currentNode.sourceIndex;
  var str=tree.getAttribute(tree.nodes[sourceIndex],"method");
  if(str.replace(" ","")=="dynamicAdd()"){
var d = tree.divider;
var sid = sourceIndex.substr(sourceIndex.indexOf(d) + d.length); try{
  if(window.ActiveXObject){
for(var i=5; i; i--){
  try{if(i==2){ xmlhttp_req = new ActiveXObject("Microsoft.XMLHTTP");}
else{
  xmlhttp_req = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
  xmlhttp_req.setRequestHeader("Content-Type","text/html");
  xmlhttp_req.setRequestHeader("Charset","utf-8");
} break;
  } catch(e){xmlhttp_req = false;}
}
  } else if(window.XMLHttpRequest){
xmlhttp_req = new XMLHttpRequest();
if(xmlhttp_req.overrideMimeType) {xmlhttp_req.overrideMimeType('text/html');}
  }
} catch(e){xmlhttp_req = false;return;}//已建立xmlhttp对象 xmlhttp_req.open('GET', "childnode.php?id="+sid, true);
xmlhttp_req.setRequestHeader('If-Modified-Since', '0');
xmlhttp_req.setRequestHeader('CONTENT-TYPE','application/x-www-form-urlencoded');
xmlhttp_req.send(null);
xmlhttp_req.onreadystatechange = function(){
  if (xmlhttp_req.readyState == 4 && xmlhttp_req.status==200){//已从服务器得到子节点数据，开始加入母节点
//alert(xmlhttp_req.responseText); eval(xmlhttp_req.responseText);
var id=tree.currentNode.id;
document.getElementById("tree_icon_"+id).src="img/loading.gif";
var temp = tree.getElementById(tree.name +"_tree_"+ id).childNodes;
temp[temp.length-1].innerHTML = "<DIV noWrap><NOBR><SPAN>" + tree.word2image(tree.node[id].childAppend +"└") +
  "</SPAN>"+"<IMG border='0' height='16' align='absmiddle' src='"+tree.icons["file"].src+
  "'><A style='color: red; '>正在加载,请稍候...</A></NOBR></DIV>"; 
  temp[temp.length-1].style.display = "block";//套用梅花雪的语句
alert("正在加载");//此处用alert暂停，可在执行快的时候看到上面的提示 var CN = tree.node[tree.node[id].parentId].childNodes;
if(CN.length>0){
  for(var i=0;i<CN.length;i++){if(CN[i]==tree.node[id]) break;}
  tree.node[id].iconExpand=(i<CN.length-1)?"PM1":"PM2";
}
tree.dataFormat();
tree.node[id].icon="folder";
tree.node[id].hasChild=true;
tree.node[id].childNodes=[];
tree.load(id);
tree.buildNode(id);
tree.nodes[sourceIndex] = tree.nodes[sourceIndex].replace(str,"expanding()");
setTimeout("tree.focus('"+sid+"',true);tree.expand(tree.currentNode.id,true);",30);
  }
}
  }/* 笨方法，在加入新的节点信息后，刷新整个树。把其他节点都在作一遍，另外树会刷新显示，感觉不好
tree.nodes["3_313"] = "text:三道沟; data:id=313&bianhao=32";
tree.nodes["3_314"] = "text:寺村; data:id=314&bianhao=33";
tree.nodes["3_315"] = "text:西何庄; data:id=315&bianhao=34";
tree.nodes["3_316"] = "text:西街; data:id=316&bianhao=35";
tree.nodes["3_317"] = "text:小坡掌; data:id=317&bianhao=36";
tree.nodes["3_318"] = "text:许村; data:id=318&bianhao=37";
tree.nodes["4_405"] = "text:兰窑; data:id=405&bianhao=45";
tree.nodes["4_406"] = "text:马窑; data:id=406&bianhao=46";
tree.nodes["4_407"] = "text:钱唐; data:id=407&bianhao=47";
tree.nodes["4_408"] = "text:钱庄; data:id=408&bianhao=48";
tree.nodes["4_409"] = "text:太子; data:id=409&bianhao=49";
tree.nodes["4_410"] = "text:王庙; data:id=410&bianhao=50";tree.index=0;
tree.useArrow=false;
tree.node["0"].childNodes=[];
xx.innerHTML=tree.toString()+'<br>';
//在页面显示后，重新执行toString()，需要将梅花雪的程序中setstyle()修改为返回字符串，并在toString()中加入。
//我没感觉到他的用处，直接屏蔽了
*/
}
</SCRIPT></BODY>
</HTML>
//chilnode.php
//返回用于生成节点信息的javascript语句，供eval()执行<?php
header("Content-type: text/html; charset=utf-8");
if (empty($_GET['id']) || !is_numeric($_GET['id']) || $_GET['id']>12 || $_GET['id']<2) exit;
$id=floor($_GET['id']);$mysql_server_name = "localhost";
$mysql_username = "***";
$mysql_password = "***";
$mysql_database = "***";
$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password);
mysql_query("SET NAMES 'utf8'");$sql = "select userid,username from user where floor(userid/100)=$id";
$result=mysql_db_query($mysql_database,$sql,$conn);
mysql_data_seek($result,0);
while($row=mysql_fetch_row($result)) {
echo "tree.nodes[\"$id"."_"."$row[0]\"] = \"text:$row[1]; data:id=$row[0]\";\n";
}
?>

解决方案 »

  1.   

    http://mzjw.xiyuidc.net/可到此处看看效果
      

  2.   

    楼主:zhaolidong 你好
    关于你提的js问题,我正好想找你交流,还请你多指教...你QQ与msn是多少,我加你...
      

  3.   

    我的qq：745749203，已加了你xmlhttp_req.responseText 返回的内容基本上是这样：tree.nodes["4_406"] = "text:马窑; data:id=406&bianhao=46"; 
    tree.nodes["4_407"] = "text:钱唐; data:id=407&bianhao=47"; 
    tree.nodes["4_408"] = "text:钱庄; data:id=408&bianhao=48"; 
    tree.nodes["4_409"] = "text:太子; data:id=409&bianhao=49"; 
    tree.nodes["4_410"] = "text:王庙; data:id=410&bianhao=50"; 也就是使用梅花雪树时加入节点的语句。这里，让他动态返回，然后eval()执行，就动态加入了节点。
    然后用
    tree.dataFormat(); //重新根据nodes[]，建立节点信息，把新加入的节点也添了进去
    tree.node[id].icon="folder"; //这个修改图标，再次显示时就变了
    tree.node[id].hasChild=true; 
    tree.node[id].childNodes=[]; 
    tree.load(id); 
    tree.buildNode(id); //生成子节点的显示信息
    tree.nodes[sourceIndex] = tree.nodes[sourceIndex].replace(str,"expanding()"); //修改method，再次点击时就不再加载了就在页面上构造出了这些节点的内容。其他的都是辅助的，主要是这几步完成了梅花雪数1.0的动态加载。