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

原创 2013年12月04日 09:50:05


背景

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

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

etmvc+jQuery EasyUI使用教程(四)—数据的交互

关于etmvc+jQuery EasyUI使用教程距离上次更新已经有一个多月了,其实这项目早已经做完了,只是一直没时间更新,今天抽空把里面的一小部分作为例子抽出来讲讲。上篇教程讲到接下来我们会进入JQ...

etmvc+jQuery EasyUI+POI动态导出EXCEL

一直想找一种简单的办法来实现JQuery easyUI datagrid的数据导出,试了很多种都不是特别理想,主要是我这里后端使用etmvc框架。先是在前端想了一些办法,没戏,后来有想过把datagr...

etmvc+jQuery EasyUI combobox实现google提示

基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示,主要使用combobox的onChange事件,在onChange事件中改变url参数,重新绑定数据,代码...

etmvc+jQuery EasyUI+combobox多值操作实现角色授权

基于角色的权限管理一般有5张表构成,如下图,这里我们要实现对角色role进行授权操作,简单来说就是要对rolemenu进行添加操作,这里前端主要用easyui-combobox来实现权限多选。 ...

etmvc+jQuery EasyUI使用教程(三)

本章我们来学习一下ActiveRecord中的关联,即一对一、一对多、多对一等关联问题! 1、先新建一个authors表和books表 create table authors( id int...

etmvc+jQuery EasyUI Highcharts实现柱状图

基于JQuery easyUI 使用Highcharts实现了数据柱状图的显示,前段显示主要使用Highchartst这个图表库,后端使用etmvc框架从数据库获取数据,前后端数据交互采用Json数据...

etmvc+jQuery EasyUI使用教程(二)

本章我们来学习一下etmvc是如何访问数据库的。 etmvc中访问数据可以使用JDBC,HIBERNATE等,鉴于JDBC的烦琐和HIBERNATE的复杂,etmvc同时提供了一个ORM的简易实现版...

etmvc和jQuery EasyUI使用教程

  • 2016年11月22日 14:28
  • 522KB
  • 下载

easyUI中Tree的实现问题

最近项目选择easyUI作为项目的前端显示组件,原因有两个一个是公司的美工确实不给力设计出来的东西太难看了,另一个原因就是easyUI有很多组件用起来很方便。   今天说要做机构管理,需要一个机构...
  • qiuhan
  • qiuhan
  • 2013年07月12日 15:04
  • 2832
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:etmvc结合easyui-tree开发时的问题
举报原因:
原因补充:

(最多只允许输入30个字)