cnfeather 发表于 2013-2-7 14:52:42

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]
查看完整版本: Ext