使用dhtmltree动态生成树菜单总结

我之前发布的dhtmltree总结因为页面问题，看起来很不爽，再次做一下更新，希望大家看起来更方便

 

最近有一个项目需要做到无限级树型菜单,而且要实现右键的功能,经别人的介绍,我接触到了dhtmlxtree,虽然最后并没有使用它,但是我想以后会有机会用的

在官方给出的例子中,加载一个xml文件很简单,文件内容如下

 

<?xml version='1.0' encoding='utf-8'?>   
<tree id="0" text="root">   
    <item text="Books" id="books" im0="books_close.gif" im1="tombs.gif" im2="tombs.gif" src="http://www.baidu.com">   
        <item text="Mystery &amp; Thrillers" id="mystery" im0="book.gif" im1="books_open.gif" im2="books_close.gif">   
            <item text="Lawrence Block" id="lb" im0="book.gif" im1="books_open.gif" im2="book.gif">   
                <item text="All the Flowers Are Dying" id="a1" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"  child="1">   
                </item>   
                <item text="The Burglar on the Prowl" id="lb_2" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>   
                <item text="The Plot Thickens" id="lb_3" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>   
                <item text="Grifter's Game" id="lb_4" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>   
                <item text="The Burglar Who Thought He Was Bogart" id="lb_5" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>   
            </item>   
        </item>   
    </item>   
</tree>

 简单了解下,id就是这个节点ID,text是显示的内容,src是点击时的超链接,有了这个xml文件的结构之后,我们就可以通过页面发出请求访问后台,由后台生成类似的xml的字符串,发送到页面,有页面进行接收处理

在页面中的显示如下

<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">    
    <script src="../js/dhtmlXCommon.js"></script>    
    <script src="../js/dhtmlXTree.js"></script>    
   
......    
   
   
<div id="treeboxbox_tree"></div>    
<script language="javascript">
   tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			tree.setImagePath("../../images/csh_bluebooks/");
			tree.setXMLAutoLoading("tasklist.do");//如果不加的话就会不现实有下级菜单
            tree.loadXML("tasklist.do?id=<%=id%>");
 function tondblclick(id){
    id=tree.getSelectedItemId();
   
	//window.location="searchByStype.do?stype=id";	
	window.parent.main.location="taskright.do?id="+id;
}
  tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件
  function add(){
	if(tree.getSelectedItemId()==""){
		alert("请选中父任务进行添加");
		return false;
	}

	window.parent.main.location="taskadd.do?id="+tree.getSelectedItemId();
}
 function update(){
	if(tree.getSelectedItemId()==""){
		alert("请选中任务进行修改");
		return false;
	}
	window.parent.main.location="taskupdate.do?id="+tree.getSelectedItemId();
}
 function update1(){
 	if(tree.getSelectedItemId()==""){
		alert("请选中任务进行修改");
		return false;
	}
	window.parent.main.location="taskupdate1.do?id="+tree.getSelectedItemId();
}
function del(){
	if(tree.getSelectedItemId()==""){
		alert("请选中任务进行删除");
		return false;
	}
    if(confirm('确定要删除吗?'))
    {
	 window.parent.main.location="taskdel.do?id="+tree.getSelectedItemId();
	}
}
function add1(){

	window.parent.main.location="taskadd.do?id=<%=id%>";
}
function add2(id){
	tree._xopenAll(tree._globalIdStorageFind(id));
}
function add3(id){
	//tree.refreshItem(id); //刷新指定节点
	window.location.reload();
}
function opentiems(itemId){
	tree.openAllItems(0);
}
function cltime(){
	tree.closeAllItems(0);
}


</script>

 这里的tree.loadXML说的明白一点,就是页面第一次打开的时候,访问的请求

tree.setXMLAutoLoading是展开树发送的请求

大家还可以通过查看API定义一些事件处理如：

tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件

台的代码如下：

 

 

public ModelAndView handleRequest(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		HttpSession session=request.getSession();
		UserVo user=(UserVo)session.getAttribute("user");
		String id =request.getParameter("id");

		String[] ids=id.split("_");
		String pid=ids[0];
		String fid=ids[1];
		response.setContentType("text/xml;charset=UTF-8");
		response.setHeader("Cache-Control","no-cache");
		StringBuffer sb = new StringBuffer();
		sb.append("<?xml version='1.0' encoding='utf-8'?>\n");
		if(fid.equals("0"))
		{
			id="0";
		}
		sb.append("<tree id=\""+id+"\">\n");
		List list = projectService.gettreexml(pid, fid);
		
		for(int i=0;i<list.size();i++){
			
			PmenuVo bean = (PmenuVo)list.get(i);
			
			sb.append("\t<item");
			if(!bean.getSum().equals("0")){
				sb.append(" child='1' open ='1'");
			}
			String id11=pid+"_"+bean.getId();
			
			sb.append(" id='"+id11+"' text='"+bean.getTaskname().trim()+"'>\n");
			
			sb.append("\t</item>\n");
			
		}
		sb.append("</tree> ");
			try {
				response.getWriter().print(sb.toString());
			} catch (IOException e) {
				e.printStackTrace();
			}
			
		return null;
	}

 

评论

4 楼 cn_arthurs 2009-08-16  

yuxin_85 写道

请问一下，当执行tree.setXMLAutoLoading()方法展开树发送请求时，
如何把当前展开节点的父节点Id 也传到后台去？(默认只会把当前选中节点的Id传到后台去)

可以使用这个方法 getParentId(itemId)来获取itemId节点的父节点ID

3 楼 yuxin_85 2009-08-15  

请问一下，当执行tree.setXMLAutoLoading()方法展开树发送请求时，
如何把当前展开节点的父节点Id 也传到后台去？(默认只会把当前选中节点的Id传到后台去)

2 楼 cn_arthurs 2009-06-05  

yanMouse 写道

问一下，你这个有没有完整的代码，谢谢了，能否给我了。

你可以去下面的网站上去下载,有很多的demo的
http://www.dhtmlx.com/docs/products/dhtmlxTree/index.shtml
如果有问题大家一起研究

1 楼 yanMouse 2009-06-04  

问一下，你这个有没有完整的代码，谢谢了，能否给我了。