etmvc结合easyui-tree开发时的问题

背景

花了两天时间来做帮助文档生成树的的任务，期间遇到了许多问题，这里就说几点吧

etmvc集成了tree

• etmvc很好的集成了json拼写tree的方式，这样在写树形结构时就不需要像struts那样使用大量的字符串来拼树形结构，但是初学者往往不得要领，这里我分享下自己的经验吧。
  • 首先定义自己需要的模板，注意要使用对应的easyui-tree的属性来定义，如下代码
    全选 示例 :

    public class Help  extends ActiveRecordBase  {
            @Id private Integer id;
    	@Column private Integer pId;
    	@Column private String name;
    	@Column private Integer sort;
            // 由于url在easyui-tree里是不存在的属性，所以必须使用它提供的专门用来设               置属性的元素attributes,如下mapa
    	@Column private String url;
    	@Column private String iconCls;
    	@Column private Integer status;
           //easyui-tree的特有属性，用来设定额外属性的，不需要和数据库关联
    	private Map<String,Object> attributes = new HashMap<String, Object>();
    	//判断是否有子节点
    	public int getChildCount() throws Exception {
    		return (int)count(Help.class, "pId=?", new Object[]{id});
    	}
    	
    	public String findChildIds() throws Exception {
    		String s = "";
    		List<Integer> ids = new ArrayList<Integer>();
    		ids.add(id);
    		while(!ids.isEmpty()){
    			int id = ids.remove(0);
    			s += id + ",";
    			for(Help help: Help.findAll(Help.class, "pId=?", new Object[]{id})){
    				ids.add(help.getId());
    			}
    		}
    		if (!s.equals("")){
    			s = s.substring(0, s.length() - 1);
    		}
    		return s;
    	}
    	......
          //getter/setter
    

• 其次编写controller类，编写controller时需要注意的也是关于attributes的设定，代码如下：
  全选 示例 :

  public View getItems() throws Exception {
  		List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
  		
  		List<Help> helps = Help.findAll(Help.class, "pId=0", null, "sort");
  		for(Help help: helps){
  			Map<String,Object> item = new HashMap<String,Object>();
  			item.put("id", help.getId());
  			item.put("text", help.getName());
  			//设定attributes，开始时我想在models中装入，而看到同事帮助在此处使用，感觉在此处使用更好
  			Map<String,Object> attributes = new HashMap<String, Object>();
  			attributes.put("url", help.getUrl());
  			item.put("attributes", attributes);
  			
  			items.add(item);
  		}
  		
  		List<Map<String,Object>> doing = new ArrayList<Map<String,Object>>();
  		doing.addAll(items);
  		while(!doing.isEmpty()){
  			List<Map<String,Object>> todo = new ArrayList<Map<String,Object>>();
  			for(Map<String,Object> item: doing){
  				helps = Help.findAll(Help.class, "pId=?", new Object[]{item.get("id")}, "sort");
  				if (helps.isEmpty()){
  					continue;
  				}
  				List<Object> children = new ArrayList<Object>();
  				for(Help help: helps){
  					Map<String,Object> child = new HashMap<String,Object>();
  					child.put("id", help.getId());
  					child.put("text", help.getName());
  					
  					Map<String,Object> attributes = new HashMap<String, Object>();
  					attributes.put("url", help.getUrl());
  					child.put("attributes", attributes);
  					
  					child.put("state", help.getChildCount() > 0 ? "closed" : "open");
  					children.add(child);
  					
  					todo.add(child);
  				}
  				item.put("children", children.toArray(new Object[children.size()]));
  			}
  			doing = todo;
  		}
  		System.out.println(new JsonView(items));
  		return new JsonView(items);
  	}
  

easyui-tree

• easyui啊，让现在的我又爱又恨，说说easyui的tree吧，为了做这个模块，我算是翻遍网页吧，但最终能用到的少之又少。该模块的easyui代码如下：

全选 示例 :

$(function() {			 
			$("#helptree").tree({				
				line:true,
				checkbox:false,
    			        url:"<c:url value='/doc/help/getItems'/>",				    
				onClick: function(node){
					if(node.state == null){
						var data = $("#helptree").tree('getData',node.target);
						addTab(node.text,_base+data.attributes.url);
					}
             }
			});
			
		});

上面代码里当触发一个onClick事件时，如何拿到传入的url是一个让人头大的问题，我们试过了onLoadSuccess，以及onClick的好些方法都没有用，后来同事查找更新版本的API发现可以使用getData方法来拿，详见api吧，下面说说几个特性：

• 很多事件的回调函数需要 'node' 函数，它包含下列特性：
  • id：绑定到节点的标识值。
  • text：显示的文字。
  • checked：是否节点被选中。
  • attributes：绑定到节点的自定义属性。
  • target：目标的 DOM 对象。