问题描述
最近做了一个小东西玩呢是一个书城那样子的系统后台我要实现一个货架的树状图怎么实现目前还没有学xml解析dome点击菜单栏的货架管理将会查询出一级货架根据一级货架id查询二级货架显示在同一个页面并且表现为树形有谁会做吗呵呵急求呢下午要用呢
解决方案
解决方案二：
我也想做这个呢，就是不会！
解决方案三：
extjs可拖动树的实例2009-05-1110:01ext提供的树本身就有拖拽的功能，也许大部分使用过TreePanel的都知道。可是光是在前台拖来拖去那是空把式不是吗？因此必须获取拖拽的事件才能与后台交互。因此现在就说一下如何获取tree的拖拽事件。对于要想让tree可以拖拽，那么必须为tree的enableDD属性设置为true。其实事件最常用的就是nodedrop。eg：tree.on('nodedrop',function(){……});js代码：//节点可以编辑的树Ext.namespace('demo');demo=function(){this.init();//初始化函数};Ext.extend(demo,Ext.util.Observable,{init:function(){//创建一个简写varTree=Ext.tree;//添加一个树形面板this.tree=newTree.TreePanel({el:'tree-panel',//将树形添加到一个指定的div中title:'可编辑的树',autoScroll:true,enableDD:true,//是否支持拖拽效果containerScroll:true,//是否支持滚动条loader:newExt.tree.TreeLoader({dataUrl:'tree-tz-test.json'})});//创建一个根节点this.root=newTree.AsyncTreeNode({text:'木叶村',draggable:false,id:'source'});//为tree设置根节点this.tree.setRootNode(this.root);//渲染树形this.tree.render();this.root.expand(true);/*设置tree的节点放置函数此函数有一个很重要的参数对象ee对象有三个重要的属性，分别为dropNode,target,point1.dropNode为在拖动时鼠标抓住的节点2.target为将要放置在某处的节点3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。*/this.tree.on('nodedrop',function(e){if(e.point=='append'){alert('当前"'+e.dropNode.text+'"被"'+e.target.text+'"录取！');}elseif(e.point=='above'){alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');}elseif(e.point=='below'){alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');}});}});//实例化主程序类Ext.BLANK_IMAGE_URL='images/public/s.gif"';Ext.onReady(function(){varmyDemo=newdemo();//实例化});html：<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>可拖拽的树</title><linkrel="shortcuticon"href="favicon.ico"/><linkrel="Bookmark"href="favicon.ico"/><linkhref="css/default.css"rel="stylesheet"type="text/css"><!--导入prototype文件--><scriptlanguage="javascript"type="text/javascript"src="js/prototype.js"></script></head><body><!--loading加载--><divid="loadingTab"><divclass="loading-indicator"><imgsrc="images/public/loader.gif"width="32"height="32"style="margin-right:8px;float:left;vertical-align:top;"/><ahref="index.html">可拖拽的树练习</a>-<spanid="loading-yfo"><ahref="http://yfoffice.net.cn"target="_blank">忆凡工作室</a></span><br/><spanid="loading-msg">加载样式表和图片...</span></div></div><br><h1>拖拽tree的综合练习</h1><divid="tree-panel"style="margin:30px;width:300px;height:400px"></div><linkhref="js/ext-2.0/resources/css/ext-all.css"rel="stylesheet"type="text/css"><scripttype="text/javascript">$('loading-msg').innerHTML='正在加载JSUI组建...';</script><scriptlanguage="javascript"type="text/javascript"src="js/ext-2.0/adapter/ext/ext-base.js"></script><scriptlanguage="javascript"type="text/javascript"src="js/ext-2.0/ext-all.js"></script><scriptlanguage="javascript"type="text/javascript"src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script><scripttype="text/javascript">$('loading-msg').innerHTML='正在初始化...';</script><scripttype="text/javascript"src="js/tree-tz-test.js"></script><scripttype="text/javascript">$('loading-msg').innerHTML='初始化完毕！！';Ext.get('loadingTab').fadeOut({remove:true});//让加载标签消失</script></body></html>本例子的json：[{"text":"卡卡西班","id":"01","allowDrag":false,"children":[{"text":"小樱","id":"0101","leaf":true,"allowDrag":true},{"text":"鸣人","id":"0102","leaf":true,"allowDrag":true},{"text":"佐助","id":"0103","leaf":true,"allowDrag":true}]},{"text":"凯班","id":"02","allowDrag":false,"children":[{"text":"小李","id":"0201","leaf":true,"allowDrag":true},{"text":"宁次","id":"0202","leaf":true,"allowDrag":true},{"text":"天天","id":"0203","leaf":true,"allowDrag":true}]}]看看上面json可以看出，我为节点设置了一个allowDrag属性，如果该属性为false，表示这个节点不可以拖动，否则可以。本例的意图是卡卡西班和凯班为父节点，所以是不可拖动的，其孩子比如鸣人，佐助可是拖动的。希望对你有帮助
解决方案四：
解决方案五：
看到树我就想起EXTJS了
解决方案六：
引用4楼qkniit的回复:
看到树我就想起EXTJS了
就是2楼说的那种撒
解决方案七：
在网上找个有树形结构样式的网站，把js页面当下来，然后分析数据库结构，不就OK啦！！
解决方案八：
我也想学学这个树是怎么构造的，就是不会。
解决方案九：
运用递归的原理就可以实现无限级树。
解决方案十：
ExtJSTreeandJQueryTree
解决方案十一：
最简单的可以使用Dtree