Ext
1:EXT树2:通过数据库构造树
3:异步加载的树
4:构造界面
1:EXT树
构造一个完整的树包含4部分:
数据库:存储数据
java代码:生成json数据格式
js代码:构造树
html代码:显示
数据库库结构
treeId--idtreeName--显示名称href--链接leaf--是否子节点parentId--父id
如果只构造一个简单的树,这几个就够了
java代码
/*** 调用**/List list = getTree("0"); //获取父节点为0的所有节点JSONArray js=new JSONArray();response.getWriter().print(js.fromObject(list));/*** 通过递归生成tree结构**/public static List getTree(String id){List list= new ArrayList(); List rs =sqlResult("select * from t_tree where parentId="+id+" order by treeId"); for(int i=0;i<rs.size();i++){ Map map=new HashMap(); ResultMap rm=(ResultMap)rs.get(i); if(leaf==false){ map.put("text",rm.getString("treeName")); map.put("action",rm.getString("leaf")); map.put("children",getTree(rm.getString("treeId")));//递归调 list.add(map); }else{ map.put("text",rm.getString("treeName")); map.put("action",rm.getString("leaf")); map.put("leaf","true"); list.add(map); } }return list;}
js代码
var root = new Ext.tree.AsyncTreeNode({text: 'ROOT',id:'root'});var tree = new Ext.tree.TreePanel({renderTo:'tree',title:'好大一棵树',width: 200,minSize: 175,maxSize: 400,collapsible :true,rootVisible:false,root:root,loader: new Ext.tree.TreeLoader({dataUrl:'treeaction.action'})});
html代码:
<div id="tree"></div>
2:通过数据库构造树
3:异步加载的树
4:构造界面
先做个模版,有空再整理
页:
[1]