关于dtree伸缩展开的问题

Question

最近在用那个dtree做个树形菜单采用的jquery+ajax+dtree+struts2的结构，下面是我的做法：
大部分地方比较顺利，先分享一下我的做法，再提个问题。
利用struts2中json的插件，返回菜单表的json数据，再利用dtree将菜单表展现出来：
下面是ajax及构造dtree的js文件，因为dtree中的图片是路径是默认的所以我改成下面的这种
function dTree(objName,sImgPath) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, useStatusText : false, closeSameLevel : false, inOrder : false } this.icon = { root : sImgPath+'base.gif', folder : sImgPath+'folder.gif', folderOpen : sImgPath+'folderopen.gif', node : sImgPath+'page.gif', empty : sImgPath+'empty.gif', line : sImgPath+'line.gif', join : sImgPath+'join.gif', joinBottom : sImgPath+'joinbottom.gif', plus : sImgPath+'plus.gif', plusBottom : sImgPath+'plusbottom.gif', minus : sImgPath+'minus.gif', minusBottom : sImgPath+'minusbottom.gif', nlPlus : sImgPath+'nolines_plus.gif', nlMinus : sImgPath+'nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false;};
这样在new时就可以把图片的路径加进去，这也是根据网上的个朋友的做法改写的，我的jquery的代码是单独放到一个文件中去的。如下所示
$(document).ready(function(){
var wscmtree = new dTree("tree","main/pic/");
var url = "createmenu.action";
var m_username=encodeURIComponent("");
var params  =  {username:m_username};   
jQuery.post(url, params, callbackFun, "json");
function callbackFun(data)
{
var list = data.list;
    for(var i=0;i<list.length;i++)
    {
     var menuid = list[i].menuid;
     var parentid = list[i].parentid;
     var menuname = "";
     if (list[i].menuname==null)
     {menuname=""}else{menuname = trim(list[i].menuname)}
     var url = "";
     if (list[i].url==null)
     {url=""}else{url = trim(list[i].url)}
     var title = "";
     var target = "";
     var icon = "";
     var iconopen = "";
     var open = false;
     wscmtree.add(menuid, parentid, menuname,url,title,target,icon,iconopen,open);
    }
$("body").append(wscmtree.toString());
$("#test").attr("value",wscmtree.toString());
}
$("#openall").click(function(){
wscmtree.openAll();
}
);

$("#closeall").click(function(){
wscmtree.closeAll();
}
); function   trim(str) 
{   
        return   str.replace(/^\s+/, ' ').replace(/\s+$/, ' '); 
}
})
现在的问题是我的树形菜单可以完全展示出来没有问题了，点击那个openall与closeall按钮时正常。现在有一个问题，我点击那个+或-号时不会出现任何反应是什么问题？页面左下角提示那个javascript是错误的。javascript:tree.0(1),括号中的数字是结点的ID

Answer 1

这个事件是由dtree动态生成了的，我怀疑是不是应该修改那个dtree.js的源码？生成那段代码是这样的：
<div class="dtree"><div class="dTreeNode"><img id="itree0" src="pic/base.gif" alt="" />ROOT </a></div><div id="dtree0" class="clip" style="display:block;"><div class="dTreeNode"><a href="javascript: tree.o(1);"><img id="jtree1" src="pic/minusbottom.gif" alt="" /></a><img id="itree1" src="pic/folderopen.gif" alt="" /><a href="javascript: tree.o(1);" class="node">AAAA </a></div><div id="dtree1" class="clip" style="display:block;"><div class="dTreeNode"><img src="pic/empty.gif" alt="" /><img src="pic/join.gif" alt="" /><img id="itree2" src="pic/page.gif" alt="" />BBBB </div><div class="dTreeNode"><img src="pic/empty.gif" alt="" /><img src="pic/join.gif" alt="" /><img id="itree3" src="pic/page.gif" alt="" />BBBB </div><div class="dTreeNode"><img src="pic/empty.gif" alt="" /><img src="pic/join.gif" alt="" /><img id="itree4" src="pic/page.gif" alt="" />CCCC </div><div class="dTreeNode"><img src="pic/empty.gif" alt="" /><a href="javascript: tree.o(5);"><img id="jtree5" src="pic/minusbottom.gif" alt="" /></a><img id="itree5" src="pic/folderopen.gif" alt="" /><a href="javascript: tree.o(5);" class="node">DDDD </a></div><div id="dtree5" class="clip" style="display:block;"><div class="dTreeNode"><img src="pic/empty.gif" alt="" /><img src="pic/empty.gif" alt="" /><img src="pic/joinbottom.gif" alt="" /><img id="itree6" src="pic/page.gif" alt="" />EEEE </div></div></div></div></div> 

Answer 2

那个+或-号的事件是dtree动态生成的，如<div class="dtree"><div class="dTreeNode"><img id="itree0" src="main/pic/base.gif" alt="" />ROOT </a></div><div id="dtree0" class="clip" style="display:block;"><div class="dTreeNode"><a href="javascript: tree.o(1);"><img id="jtree1" src="main/pic/minusbottom.gif" alt="" /></a><img id="itree1" src="main/pic/folderopen.gif" alt="" /><a href="javascript: tree.o(1);" class="node">AAAA </a></div><div id="dtree1" class="clip" style="display:block;"><div class="dTreeNode"><img src="main/pic/empty.gif" alt="" /><img src="main/pic/join.gif" alt="" /><img id="itree2" src="main/pic/page.gif" alt="" /><a id="stree2" class="node" href="/lhcl.jsp " onclick="javascript: tree.s(2);">BBBB </a></div><div class="dTreeNode"><img src="main/pic/empty.gif" alt="" /><img src="main/pic/join.gif" alt="" /><img id="itree3" src="main/pic/page.gif" alt="" />CCCC </div><div class="dTreeNode"><img src="main/pic/empty.gif" alt="" /><img src="main/pic/join.gif" alt="" /><img id="itree4" src="main/pic/page.gif" alt="" />EEEE </div><div class="dTreeNode"><img src="main/pic/empty.gif" alt="" /><a href="javascript: tree.o(5);"><img id="jtree5" src="main/pic/minusbottom.gif" alt="" /></a><img id="itree5" src="main/pic/folderopen.gif" alt="" /><a href="javascript: tree.o(5);" class="node">FFFF </a></div><div id="dtree5" class="clip" style="display:block;"><div class="dTreeNode"><img src="main/pic/empty.gif" alt="" /><img src="main/pic/empty.gif" alt="" /><img src="main/pic/joinbottom.gif" alt="" /><img id="itree6" src="main/pic/page.gif" alt="" />GGGG </div></div></div></div></div>

Answer 3

上述问题我一直以为是ajax的异步调用，造成的，结果我改为同步调用后，效果还是一样，这是为什么呢？

Answer 4

struts2有tree这个控件捏,, 怎么不用呢?

Answer 5

那个没用过，我用firefox浏览器自带的那个控件，查了一下，在那个页面中有这样一句<p><a href="javascript: wscmtree.openAll();">open all</a> | <a href="javascript: wscmtree.closeAll();">close all</a></p>告诉我wscmtree没有定义，可是但是我加入  <input id="openall" type="button" value="openall"></input> 
  <input id="closeall" type="button" value="closeall"></input> 
再在jquery中加入如下代码 $("#openall").click(function(){ 
wscmtree.openAll(); 
} 
); 
$("#closeall").click(function(){ 
wscmtree.closeAll(); 
} 
); 
这几两个按钮是正常的，那个wscmtree怎么会没有被定义呢？

Answer 6

公布答案，问题得已解决
还是那个js的问题应该这样
var wscmtree = new dTree("wscmtree","main/pic/");
wscmtree.add(0, -1, "我的菜单");$(document).ready(function(){
jQuery.ajax({
url:"createmenu.action",
type:"post",
dataType:"json",
async:false,
success: function(data){
以下代码省略----------
至于原因我也不知道，在初始化的时候先给wscmtree一个初值就可以了，唉困绕了好几天的问题了。

Answer 7

不过还有个问题，希望大家能给解决，就是这做了以后操作上都没有问题了，但是在IE的右下角还是会出现一个带红色叉号的东西，可能是在提示javascript: wscmtree.closeAll()它有错误，但是不影响使用，不知道为什么？而且我在firefox里使用的时候还是不行，会提示javascript: wscmtree.closeAll()中的wscmtree这个对象没有定义，不知道是何原因？

Answer 8

你好！我现在也再做这一块！和你 用的技术一样！就是想请教下，点击父节点内容（name）后就显示子节点信息，我希望达到的效果和点击+  -号一样打开和关闭子节点信息！