论坛首页 → Web前端技术论坛 →

ext2的树组件的使用（从底层到表现层，异步加载）

浏览 15721 次
锁定老帖子 主题：ext2的树组件的使用（从底层到表现层，异步加载）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • beckrabbit
  • 等级: 三星会员
  • 性别:
  • 文章: 171
  • 积分: 300
  • 来自: 杭州
   发表时间：2007-10-17  
貌似ext2的树组件没什么变化，一个简单的树照着example弄就可以了
js 代码
  1. var Tree = Ext.tree;   
  2.       
  3.    var tree = new Tree.TreePanel({   
  4.        el:'tree',   
  5.        autoScroll:true,   
  6.        animate:true,   
  7.        enableDD:true,   
  8.        containerScroll: true,    
  9.        loader: new Tree.TreeLoader({   
  10.            dataUrl:'moduletree.do'   
  11.        })   
  12.    });   
  13.   
  14.    // set the root node   
  15.    var root = new Tree.AsyncTreeNode({   
  16.        text: '管辖单位',   
  17.        draggable:false,   
  18.        id:'source'   
  19.    });   
  20.    tree.setRootNode(root);   
  21.   
  22.    // render the tree   
  23.    tree.render();   
  24.    root.expand();  

el决定了树的显示位置，一般是个div例如

 

dataUrl决定了树的json数据来源，我这里是一个struts的action，这个action会输出json数据

 

在服务层要提供一个可以生成json格式数据的service，struts的任务是获取传来的参数调用service方法输出json

我在服务层生成json数据用的是jsonlib包，论坛有详细介绍的帖子，就不多说了

数据库有两个表来构建树，一个是树的节点表，至少包括树的id name 我这里还有一个haschild，代表有没有子节点。

另一个是节点关系表，两列分别是父节点和他对应的子节点。

service层调用dao的方法将结果集组装成List或者Map，再用jsonlib包提供的api将list转化成json,例如

js 代码
  1. //根据用户的角色和id生成用户的管辖单位树   
  2. public List getsubdept(String userid,Long roleid){   
  3.         try{   
  4. //调用dao的方法查找到结果集   
  5.         List list=roledeptdao.findRoledept(userid, roleid);   
  6. //生成json所使用的单位list   
  7.         List deptlist=new ArrayList();   
  8.         Iterator it=list.iterator();   
  9.         while(it.hasNext()){   
  10.             Ruledept rd=(Ruledept) it.next();   
  11.             Map tree = new HashMap();   
  12. //节点显示单位名              
  13. tree.put("text", rd.getId().getTYwxtDept().getDeptName());   
  14. //节点的id    
  15.         tree.put("id", rd.getId().getTYwxtDept().getDeptId());   
  16.             Object value = new Object();   
  17.             value = Boolean.TRUE;   
  18.             tree.put("cls", "file");   
  19. //是否是叶子节点，我这里只有一层所以直接写的TRUE   
  20.             tree.put("leaf", value);   
  21. //将这个生成叶子节点对应的MAP加到单位list里   
  22.             deptlist.add(tree);   
  23.         }   
  24.            
  25.         return deptlist;   
  26.         }catch(Exception e){   
  27.             log.error("获取单位列表失败"+e.getMessage());   
  28.             return null;   
  29.         }   
  30.            
  31.     }   
  32.   
  33.     public JSONArray getmoduletree(String userid, String roleid) {   
  34.         List list=this.getsubdept(userid, new Long(roleid));   
  35.         if(list==null){   
  36.             return null;   
  37.         }   
  38. //转换这个list让他变成json格式       
  39.     JSONArray jsonArray = JSONArray.fromObject(list);   
  40.         return jsonArray;   
  41.     }  

在action里面调用这个service方法：

java 代码
  1. public ActionForward execute(ActionMapping mapping, ActionForm form,   
  2.             HttpServletRequest request, HttpServletResponse response) {   
  3.   
  4.         HttpSession httpsession=request.getSession();   
  5.         String roleid=(String) httpsession.getAttribute("role");   
  6.         UserInfo userinfo=(UserInfo)httpsession.getAttribute("userinfo");   
  7.         String userid=userinfo.getUserID();   
  8.         JSONArray jsonArray=this.getRoledeptservice().getmoduletree(userid, roleid);   
  9.         response.setContentType("text/json; charset=GBK");    
  10.             try {   
  11.                 response.getWriter().print(jsonArray);   
  12.             } catch (IOException e) {   
  13.                 log.error("输出json失败"+e.getMessage());   
  14.                 return null;   
  15.             }   
  16.        
  17.     return null;   
  18.     }  

 

这样一个完整的树就生成了，现在这个树是只有两层，如果是多层的就需要修改service方法来递归构造一个树的list再转化成json。

异步读取节点：首先，底层的service方法要做到每次生成的是传入参数的下一级节点的list，然后在js的 tree.setRootNode(root);下面加上这句：js 代码

  1. tree.on('beforeload', function(node){   
  2. tree.loader.dataUrl = 'createTree.do?id='+node.id;   
  3. });  

 

tree.loader.dataUrl 的值需要返回的就是该节点id的下一级的json数据

数据量大的时候异步加载要好的多，服务层也代码比起一次性全部加载的反复递归调用省不少。
返回顶楼
         
  • fangzhouxing
  • 等级: 三星会员
  • 性别:
  • 文章: 321
  • 积分: 368
  • 来自: 上海
   发表时间：2007-10-18  
引用
数据库有两个表来构建树，一个是树的节点表，至少包括树的id name 我这里还有一个haschild，代表有没有子节点。

另一个是节点关系表，两列分别是父节点和他对应的子节点。


为何不用一个表实现呢？我的树表结构如下，请指正：

CREATE TABLE Docmnt_Content (
Id int NOT NULL,
Name nvarchar(255) NOT NULL,
IsLeaf nchar(1) NOT NULL,   //即 hasChildren
ParentId int NOT NULL, //父节点Id,0表示无父节点的根节点
SortOrder int NOT NULL, //用于节点同级排序
PRIMARY KEY (Id)
)


返回顶楼
          回帖地址
0 请登录后投票
  • beckrabbit
  • 等级: 三星会员
  • 性别:
  • 文章: 171
  • 积分: 300
  • 来自: 杭州
   发表时间：2007-10-18  
当然可以只用一个表了 这是数据库设计的问题了
我上面的例子是直接从项目里拿出来的 只要业务逻辑能正确的组装成树形结构的list就可以了
返回顶楼
          回帖地址
0 请登录后投票
  • fangzhouxing
  • 等级: 三星会员
  • 性别:
  • 文章: 321
  • 积分: 368
  • 来自: 上海
   发表时间：2007-10-18  
beckrabbit，谢谢回复。

是否考虑过树的拖动改变父节点，或者通过拖动调整同级位置的操作。


返回顶楼
          回帖地址
0 请登录后投票
  • beckrabbit
  • 等级: 三星会员
  • 性别:
  • 文章: 171
  • 积分: 300
  • 来自: 杭州
   发表时间：2007-10-18  
fangzhouxing 写道
beckrabbit，谢谢回复。

是否考虑过树的拖动改变父节点，或者通过拖动调整同级位置的操作。



添加一个保存的按钮，这个按钮将树按照一定的规则保存成json或者数组什么的
使用DWR把组装好的树的数据传回服务端，服务端的方法解析传过来的数据，将数据保存就可以了
返回顶楼
          回帖地址
0 请登录后投票
  • fangzhouxing
  • 等级: 三星会员
  • 性别:
  • 文章: 321
  • 积分: 368
  • 来自: 上海
   发表时间：2007-10-18  
我使用DWR, 可以做到即时同步节点的拖动操作。

把整个树传递，数据量好像太大了。
返回顶楼
          回帖地址
0 请登录后投票
  • beckrabbit
  • 等级: 三星会员
  • 性别:
  • 文章: 171
  • 积分: 300
  • 来自: 杭州
   发表时间：2007-10-18  
fangzhouxing 写道
我使用DWR, 可以做到即时同步节点的拖动操作。

把整个树传递，数据量好像太大了。

的确，如果树比较大的话这样做不好。
但是按照一般的思维方式，做树的节点拖动这种操作一般是调整组织结构什么的，
在最后加一个保存按钮可以保证用户的输入准确度，而且可以加入还原按钮什么的。
如果每次拖动树节点都提交一次数据，拖动多次后如果用户发现树已经混乱了，
还想回到原来状态就不那么好办了，还要再把原来那颗树保存一下
返回顶楼
          回帖地址
0 请登录后投票
  • kanxue
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: henan
   发表时间：2007-12-11  
引用
tree.on('beforeload', function(node){   
tree.loader.dataUrl = 'createTree.do?id='+node.id;   
});


我也这样写,为啥点击不能传id啊?
返回顶楼
          回帖地址
0 请登录后投票
  • kanxue
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: henan
   发表时间：2007-12-14  
用火狐跟踪了一下,原来那几行代码没用,因为他传的参数是node,
客户端这样写
       loader: new Tree.TreeLoader({   
           dataUrl:'moduletree.do'   
       })
服务端只需要request.getparameter("node")即可读取
返回顶楼
          回帖地址
0 请登录后投票
  • zlq4863947
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 北京
   发表时间：2007-12-24  
呵呵，谢谢 beckrabbit提供这么好的文章，不知有没有想过用struts2的实现....
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics