请问：如何让在网页上显示的树在刷新后不恢复成原始的全close状态，而是保持当前状态

csdn的树也有这个问题，他刷新后也不能保持，这个是梅老大在做的

那要怎么办啊？
能不能改初始化部分的程序或用COOKIE操作啊
实在没弄明白谢谢啊
急~~~~~~~~~~~~

用cookie记录吧,参考dtree的代码
http://www.destroydrop.com/javascripts/tree/

对cookie的操作不是很明白
到底要在cookie中记录什么呢？

我给你个简单的代码<html>
<head>
<script language="javascript">
function init(){
var allDiv = document.getElementsByTagName('div');
for(var i=0;i<allDiv.length;i++){
if(allDiv[i].id!=''){
if(getCookies(allDiv[i].id)=='1'){
show(allDiv[i].firstChild);
}
}
}
}function getCookies(sName){
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++){
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    return unescape(aCrumb[1]);
  }
  return null;
}function setCookies(sName,sValue){
  date = new Date();
  document.cookie = sName + "=" + escape(sValue) + "; expires=05 Jan 2009 00:00:00 GMT";}function show(athis){
var it;
it = athis.parentNode.nextSibling;
if(athis.innerText=='+'){
athis.innerText = '-';
setCookies(athis.parentNode.id,'1');
while(it!=null && it.id == ''){
it.style.display = 'block';
it = it.nextSibling;
}
}else{
athis.innerText = '+';
setCookies(athis.parentNode.id,'0');
while(it!=null && it.id == ''){
it.style.display = 'none';
it = it.nextSibling;
} }

}window.onload = function(){
init();
}
</script></head>
<body>
<div id="div_par01"><a href="#" onclick="show(this)">+</a>001</div>
<div style="display:none">001-1</div>
<div style="display:none">001-2</div>
<div style="display:none">001-3</div>
<div id="div_par02"><a href="#" onclick="show(this)">+</a>002</div>
<div style="display:none">002-1</div>
<div style="display:none">002-2</div>
<div style="display:none">002-3</div>
</body>
<html>

<!--
//MzTreeView1.0网页树类, 在实例化的时候请把实例名作参数传递进来
function MzTreeView(Tname)
{
  if(typeof(Tname) != "string" || Tname == "")
    throw(new Error(-1, '创建类实例的时候请把类实例的引用变量名传递进来！'));

  //【property】
  this.name     = Tname;
  this.wordLine = false;
  this.currentNode = null;
  this.useArrow = true;   //??
  this.nodes = {};
  this.node  = {};
  this.names = "";
  this._d    = "\x0f";   //
  this.index = 0;
  this.divider   = "_";
  this.node["0"] =
  {
    "id": "0",
    "path": "0",
    "isLoad": false,
    "childNodes": [],
    "childAppend": "",
    "sourceIndex": "0"
  };  this.colors   =
  {
    "highLight" : "#0A246A",
    "highLightText" : "#FFFFFF",
    "mouseOverBgColor" : "#D4D0C8"
  };
  this.icons    = {
    L0        : 'L0.gif',  //┏
    L1        : 'L1.gif',  //┣
    L2        : 'L2.gif',  //┗
    L3        : 'L3.gif',  //━
    L4        : 'L4.gif',  //┃
    PM0       : 'P0.gif',  //＋┏
    PM1       : 'P1.gif',  //＋┣
    PM2       : 'P2.gif',  //＋┗
    PM3       : 'P3.gif',  //＋━
    empty     : 'L5.gif',     //空白图
    root      : 'root.gif',   //缺省的根节点图标
    folder    : 'folder.gif', //缺省的文件夹图标
    file      : 'file.gif',   //缺省的文件图标
    exit      : 'exit.gif'
  };
  this.iconsExpand = {  //存放节点图片在展开时的对应图片
    PM0       : 'M0.gif',     //－┏
    PM1       : 'M1.gif',     //－┣
    PM2       : 'M2.gif',     //－┗
    PM3       : 'M3.gif',     //－━
    folder    : 'folderopen.gif',
    exit      : 'exit.gif'
  };  //扩展 document.getElementById(id) 多浏览器兼容性
  //id 要查找的对象 id
  this.getElementById = function(id)
  {
    if (typeof(id) != "string" || id == "") return null;
    if (document.getElementById) return document.getElementById(id);
    if (document.all) return document.all(id);
    try {return eval(id);} catch(e){ return null;}
  }  //MzTreeView 初始化入口函数
  this.toString = function()
  {
    this.browserCheck();
    this.dataFormat();
    this.setStyle();
    this.load("0");
    var rootCN = this.node["0"].childNodes;
    var str = "<Label id='"+ this.name +"_RootLink' style='DISPLAY: none'></Label>";

    if(rootCN.length>0)
    {
      this.node["0"].hasChild = true;
      for(var i=0; i<rootCN.length; i++)
      {
        str += this.nodeToHTML(rootCN[i], i==rootCN.length-1);
        this.load(rootCN[i].id);
        for(var j=0;j<rootCN[i].childNodes.length;j++)
        str+=this.nodeToHTML(rootCN[i].childNodes[j],j==rootCN[i].childNodes.length-1);
      }
      setTimeout(this.name +".expand('"+ rootCN[0].id +"', true); "+
        this.name +".focusClientNode('"+ rootCN[0].id +"'); "+ this.name +".atRootIsEmpty()",10);
      for(var i=0;i<rootCN.length;i++)
       for(var j=0;j<rootCN[i].childNodes.length;j++)
       {
         setTimeout(this.name +".expand('"+ rootCN[i].childNodes[j].id +"', true); ",10);
       }

    }    if (this.useArrow)  //使用方向键控制跳转到上级下级父级子级节点
    {
      if (document.attachEvent)
          document.attachEvent("onkeydown", this.onkeydown);
      else if (document.addEventListener)
          document.addEventListener('keydown', this.onkeydown, false);
    }
    return "<DIV class='MzTreeView' "+
      "onclick='"+ this.name +".clickHandle(event)' "+
      "ondblclick='"+ this.name +".dblClickHandle(event)' "+
      ">"+ str +"</DIV>";
  };  this.onkeydown= function(e)
  {
    e = window.event || e; var key = e.keyCode || e.which;
    switch(key)
    {
      case 37 : eval(Tname).upperNode(); break;  //Arrow left, shrink child node
      case 38 : eval(Tname).pervNode();  break;  //Arrow up
      case 39 : eval(Tname).lowerNode(); break;  //Arrow right, expand child node
      case 40 : eval(Tname).nextNode();  break;  //Arrow down
    }
  };
}

//浏览器类型及版本检测
MzTreeView.prototype.browserCheck = function()
{
  var ua = window.navigator.userAgent.toLowerCase(), bname;
  if(/msie/i.test(ua))
  {
    this.navigator = /opera/i.test(ua) ? "opera" : "";
    if(!this.navigator) this.navigator = "msie";
  }
  else if(/gecko/i.test(ua))
  {
    var vendor = window.navigator.vendor.toLowerCase();
    if(vendor == "firefox") this.navigator = "firefox";
    else if(vendor == "netscape") this.navigator = "netscape";
    else if(vendor == "") this.navigator = "mozilla";
  }
  else this.navigator = "msie";
  if(window.opera) this.wordLine = false;
};//给 TreeView 树加上样式设置
MzTreeView.prototype.setStyle = function()
{
  /*
    width: 16px; \
    height: 16px; \
    width: 20px; \
    height: 20px; \
  */
  var style = "<style>"+
  "DIV.MzTreeView DIV IMG{border: 0px solid #FFFFFF;}"+
  "DIV.MzTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;}";
  if(this.wordLine)
  {
    style +="\
    DIV.MzTreeView DIV\
    {\
      height: 20px;"+
      (this.navigator=="firefox" ? "line-height: 20px;" : "" ) +
      (this.navigator=="netscape" ? "" : "overflow: hidden;" ) +"\
    }\
    DIV.MzTreeView DIV SPAN\
    {\
      vertical-align: middle; font-size: 21px; height: 20px; color: #D4D0C8; cursor: default;\
    }\
    DIV.MzTreeView DIV SPAN.pm\
    {\
      width: "+ (this.navigator=="msie"||this.navigator=="opera" ? "11" : "9") +"px;\
      height: "+ (this.navigator=="netscape"?"9":(this.navigator=="firefox"?"10":"11")) +"px;\
      font-size: 7pt;\
      overflow: hidden;\
      margin-left: -16px;\
      margin-right: 5px;\
      color: #000080; \
      vertical-align: middle;\
      border: 1px solid #D4D0C8;\
      cursor: "+ (this.navigator=="msie" ? "hand" : "pointer") +";\
      padding: 0 2px 0 2px;\
      text-align: center;\
      background-color: #F0F0F0;\
    }";
  }
  style += "<\/style>";
  /*alert(document.getElementsByTagName("HEAD")[0].innerHTML);
  if(document.body)
  {
    var head = document.getElementsByTagName("HEAD")[0];
    head.innerHTML = head.innerHTML + style;
  }
  else */
  document.write(style);
};//当根节点为空的时候做的处理
MzTreeView.prototype.atRootIsEmpty = function()
{
  var RCN = this.node["0"].childNodes;
  for(var i=0; i<RCN.length; i++)
  {
    if(!RCN[i].isLoad) this.expand(RCN[i].id);
    if (RCN[i].text=="")
    {
      var node = RCN[i].childNodes[0], HCN  = node.hasChild;
      if(this.wordLine)
      {
        var span = this.getElementById(this.name +"_tree_"+ node.id);
        span = span.childNodes[0].childNodes[0].childNodes[0];
        span.innerHTML = RCN[i].childNodes.length>1 ? "┌" : "─";
      }
      else
      {
        node.iconExpand  =  RCN[i].childNodes.length>1 ? HCN ? "PM0" : "L0" : HCN ? "PM3" : "L3"
        this.getElementById(this.name +"_expand_"+ node.id).src = this.icons[node.iconExpand].src;
      }
    }
  }
};//初始化数据源里的数据以便后面的快速检索
MzTreeView.prototype.dataFormat = function()
{
  var a = new Array();
  for (var id in this.nodes) a[a.length] = id;
  this.names = a.join(this._d + this._d);
  this.totalNode = a.length; a = null;
};

调试易

请问：如何让在网页上显示的树在刷新后不恢复成原始的全close状态，而是保持当前状态

解决方案 »