jsp页面怎么实现树状结构

最近做了一个小东西玩呢   是一个书城那样子的系统  后台我要实现一个货架的树状图  怎么实现
目前还没有学xml解析dome

点击菜单栏的货架管理将会查询出一级货架  根据一级货架id查询二级货架  显示在同一个页面  并且表现为树形

有谁会做吗  呵呵急求呢  下午要用呢

10 个解决方案

#1

我也想做这个呢，就是不会！

#2

extjs可拖动树的实例
2009-05-11 10:01
ext提供的树本身就有拖拽的功能，也许大部分使用过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(){
  //创建一个简写
  var Tree = Ext.tree;

  //添加一个树形面板
  this.tree = new Tree.TreePanel({
  el:'tree-panel',//将树形添加到一个指定的div中
  title:'可编辑的树',
  autoScroll:true,
  enableDD:true,//是否支持拖拽效果
  containerScroll: true,//是否支持滚动条
  loader:new Ext.tree.TreeLoader({
  dataUrl:'tree-tz-test.json'
})
  });


  //创建一个根节点
  this.root = new Tree.AsyncTreeNode({
  text: '木叶村',
  draggable:false,
  id:'source'
  });
  //为tree设置根节点
  this.tree.setRootNode(this.root);
  //渲染树形
  this.tree.render();
  this.root.expand(true);

  /*设置tree的节点放置函数此函数有一个很重要的参数对象e
e对象有三个重要的属性，分别为dropNode,target,point
  1.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+'"录取！');
  }else if(e.point=='above'){
  alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！');
  }else if(e.point=='below'){
  alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！');
  }
  });


}

});

//实例化主程序类
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';

Ext.onReady(function(){
var myDemo = new demo(); //实例化
});

html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可拖拽的树</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>

<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">可拖拽的树练习</a> -
<span id="loading-yfo"><a href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<br>
<h1>拖拽tree的综合练习</h1>
<div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div>

<link href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>

<script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>

<script type="text/javascript" src="js/tree-tz-test.js"></script>
<script type="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，表示这个节点不可以拖动，否则可以。本例的意图是卡卡西班和凯班为父节点，所以是不可拖动的，其孩子比如鸣人，佐助可是拖动的。

希望对你有帮助

#3

http://download.****.net/source/2582751

#4

看到树我就想起 EXTJS了

#5

引用 4 楼 qkniit 的回复:

看到树我就想起 EXTJS了

就是2 楼说的那种撒

#6

在网上找个有树形结构样式的网站，把js页面当下来，然后分析数据库结构，不就OK啦！！

#7

我也想学学这个树是怎么构造的，就是不会。

#8

运用递归的原理就可以实现无限级树。

#9

ExtJS Tree and JQuery Tree

#10

最简单的可以使用Dtree

#1