ace tree使用小记

最近使用ace admin模板，里面的组件很丰富，但是文档太少，用起来是真心吐血啊，一点点摸索，做个笔记

引用Js文件

<script src="static/assets/js/fuelux/fuelux.tree.min.js"></script>

<div id="tree1" class="tree tree-selectable" role="tree"></div>

下载的不同版本的模板，一定要按照该版本模板示例来，在这上面吃过亏啊，

在网上下载的【AceAdmin1.3.2_中英双语完整版(2015-5-21_update)】，汉化和未汉化版里面的示例就不一样

/*ace-tree栏目选择树*/
		jQuery(function($){
		        var DataSourceTree = function(options) {
		            this._data = options.data;
		            this._delay = options.delay;
		        }
		    
		  	DataSourceTree.prototype.data = function(options, callback) {
		        var self = this;
		        var $data = null;
		        if (! ("name" in options) && !("type" in options)) {
		            $data = this._data;
		            callback({
		                data: $data
		            });
		            return;
		        } else if ("type" in options && options.type == "folder") {
		            if ("additionalParameters" in options && "children" in options.additionalParameters) $data = options.additionalParameters.children;
		            else $data = {}
		        }
		        if ($data != null)
		        setTimeout(function() {
		            callback({
		                data: $data
		            });
		        },
		        parseInt(Math.random() * 500) + 200);
		  }
		
		  var showData = new DataSourceTree({
			 data: getTreeData()
		  });
		  
		  $('#tree1').ace_tree({
		        dataSource: showData ,
		        cacheItems: true,
		        multiSelect: false,
		        loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
		        'open-icon' : 'icon-minus',
			'close-icon' : 'icon-plus',
			 'selectable': true,
			 'selected-icon' : 'icon-ok',
		         'unselected-icon' : 'icon-remove'
		  });

还要注意http://www.bootcdn.cn/font-awesome/的版本，图标显示不出来有可能是版本不对，比如

新版本<i class="fa fa-3x fa-adjust"></i>，

旧版本<i class="icon-3 icon-adjust"></i>

/*ace-tree选中节点，获取选中节点的数据*/		  
<span style="white-space:pre">	</span>$("#tree1").bind('selected',function(a,b,c,d){
		  	console.log(b.info[0]);
		  	$("#channelId").val(b.info[0].id);
		  	$("#channelName").val(b.info[0].name);
		  	$("#treeDiv").hide();
        });
	

  

/*获取tree数据*/
	   function getTreeData(){
		var resultData = {};
            	$.ajax({  
		           url: getChannelsUrl,  
		           type: 'GET' , 
		           async : false,
		           dataType: 'json' ,  
		           success : function (data) {
		           		resultData = channelsToTreeData(data);
					 },  
		           error: function (response) {  
		                //console.log(response);  
		           }  
		      });  
			console.log(resultData)
			return resultData;
		}

Ace-tree默认展开

//触发所有的父节点的click事件，默认展开所有节点；若节点未完全展开，获取不到未展开节点下已选中的节点，会导致权限误删

$("#tree1").find(".tree-folder-header").each(function(){
	if($(this).parent().css("display")=="block"){ 
		$(this).trigger("click");
	}
});

写过两棵树，尝试了后台封装数据和前台封装数据

     /**将业务数据转化为ace_tree数据*/

function channelsToTreeData(chs){
			var resultData = {};
			for(var i in chs){
				var pnode = {};
				var subchs = chs[i].subChannels;
				pnode.name = chs[i].name;
				pnode.id = chs[i].id;
				if(subchs.length==0){
					pnode.type = "item";
				}else{
					pnode.type = "folder";
					var children = {};
					for(var j in subchs){
						var lnode = {};
						lnode.name = subchs[j].name;
						lnode.type = "item";
						lnode.id = subchs[j].id;
						children[subchs[j].code]=lnode;
					}
					var additionalParameters = {};
					additionalParameters.children = children;
					pnode.additionalParameters = additionalParameters;
				}
				resultData[chs[i].code]=pnode;
			}
			return resultData;
		}

后台封装数据

public class AceTreeItem {
	
	
	public AceTreeItem(){}
	public AceTreeItem(Integer id,Integer pid,String code,String name,String type){
		this.setId(id);
		this.setPid(pid);
		this.setCode(code);
		this.setName(name);
		this.setType(type);
		
	}
	
	/** 
     * 节点的ID 
     */  
	private Integer id;
	
	/** 
     * 父节点的ID 
     */
	private Integer pid;
	
	/** 
     * 节点的编码（英文）
     */  
     private String code ;  
     /** 
     * 节点的名字 
     */  
     private String name ;  
      
     /** 
     * 节点的类型："item":文件  "folder":目录 
     */  
     private String type ;  
     
     /** 
      * 父节点的ID 
      */
 	 private Integer groupId;
     
	/** 
     * 子节点的信息 
     */  
     private AdditionalParameters additionalParameters ;  
  
    
     public String getType()  
    {  
          return type ;  
    }  
  
     public void setType(String type )  
    {  
          this .type = type;  
    }  
     
     public String getName() {
 		return name;
 	}


 	public void setName(String name) {
 		this.name = name;
 	}  
  
     public AdditionalParameters getAdditionalParameters()  
    {  
          return additionalParameters ;  
    }  
  
     public void setAdditionalParameters(AdditionalParameters additionalParameters )  
    {  
          this .additionalParameters = additionalParameters ;  
    }


	public Integer getId() {
		return id;
	}


	public void setId(Integer id) {
		this.id = id;
	}


	public Integer getPid() {
		return pid;
	}


	public void setPid(Integer pid) {
		this.pid = pid;
	}


	public String getCode() {
		return code;
	}


	public void setCode(String code) {
		this.code = code;
	}
	 public Integer getGroupId() {
		return groupId;
	}
	public void setGroupId(Integer groupId) {
		this.groupId = groupId;
	}
}

public class AdditionalParameters {
	
	public AdditionalParameters(){}
	public AdditionalParameters(Map<String,AceTreeItem> maps){
		this.setChildren(maps);
	}
	public AdditionalParameters(boolean itemSelected){
		this.setItemSelected(itemSelected);
	}
	 /** 
     * 子节点列表 
     */  
     private Map<String,AceTreeItem> children = new HashMap<String,AceTreeItem>();  
      
     /** 
     * 是否有选中属性 
     */  
     @JsonProperty( "item-selected" )  
     private boolean itemSelected ;  
  
    public boolean isItemSelected()  
    {  
          return itemSelected ;  
    }  
  
     public void setItemSelected( boolean itemSelected )  
    {  
          this.itemSelected = itemSelected;  
    }  
  
     public Map<String,AceTreeItem> getChildren()  
    {  
          return children ;  
    }  
  
     public void setChildren(Map<String,AceTreeItem> children )  
    {  
          this .children = children;  
    } 
}

查询出业务数据后，自己封装tree格式数据，业务简单，只有两层树结构

/**
     * 转换数据ACE-TREE格式
     * @param channelsMap
     * @param parentType
     * @return
     */
    private Map<String,AceTreeItem> mapTransform(List<Map<String,Object>> channelsMap,String parentType){
    	Map<String,AceTreeItem> resultMap = new HashMap<String,AceTreeItem>();
    	for(Map<String, Object> cm : channelsMap){
    		if(cm.containsKey("type") && parentType.equals(cm.get("type"))){
    			AceTreeItem aceTreeItem = this.map2AceTreeItem(cm);//父级菜单
    			Map<String,AceTreeItem> tempMap = new HashMap<String,AceTreeItem>();//子菜单集合
    			for(Map<String, Object> cmp : channelsMap){
    				if((Integer)cm.get("id") == (Integer)cmp.get("pid")){
    					AceTreeItem subItem = this.map2AceTreeItem(cmp);//子菜单
    					if(subItem.getGroupId()==0){//未分配给当前用户组
    						subItem.setAdditionalParameters(new AdditionalParameters(false));//未选中状态
    					}else{//已分配给当前用户组
    						subItem.setAdditionalParameters(new AdditionalParameters(true));//选中状态
    					}
    					subItem.setType("item");
    					tempMap.put(subItem.getCode(), subItem);
    				}
    			}
    			if(tempMap.size()>0){ 
    				aceTreeItem.setType("folder");
    				aceTreeItem.setAdditionalParameters(new AdditionalParameters(tempMap));
    			}else{	
    				aceTreeItem.setType("item");
    				aceTreeItem.setAdditionalParameters(new AdditionalParameters(false));//父级菜单默认不选中
    			}
    			resultMap.put(aceTreeItem.getCode(),aceTreeItem);
    		}
    	}
    	return resultMap;
    }