关闭

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

433人阅读 评论(0) 收藏 举报
分类:


背景

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

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 对象。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23704次
    • 积分:592
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类