AdminACE ace_tree 使用实例

也是贼恶心的，搞了差不多一天的时间，各种查，把fuelux.tree.min.js玩了一遍。。。最后自己去写一个方法去实现。。。。写个文章安利一下

数据类型

1.搞个div

<div class="widget-body">
	<div class="widget-main padding-8">
		<div id="tree" class="tree"></div>
	</div>
</div>

2.引入js

<script src="<%=basePath %>static/assets/js/fuelux/fuelux.tree.min.js"></script>
<script src="<%=basePath %>static/assets/js/ace-elements.min.js"></script>
<script src="<%=basePath %>static/assets/js/ace.min.js"></script>

3.生成tree

$(function() {
    var DataSourceTree = function(options) {  
        this._data = options.data;  
        this._delay = options.delay;  
    }  
      
    DataSourceTree.prototype.data = function(options, callback) {  
   	 	var self = this;
	    if (options.search) {
	        callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page });
	    } else if (options.data) {
	        callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
	    } else {
	        callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
	    } 
	 }  
	  
	 var treeSource = new DataSourceTree({  
	    data: getTreeData()  
	 });  
		 
	 function getTreeData(){
		 var result = {}; 
		 $.ajax({  
		      url:  "http://www.baidu.com/ace_tree/tree", 
		      type: 'GET' ,
		      async : false, /* 注意一定不能异步，否则resultData获取不到数据 */
		      dataType:'json',  
		      success : function (response) {  
		           if (response.ret) {
		         	  result = response.data;                       	   
		           }
		      },  
		      error: function (response) {  
		           console.log(response.msg);
		           return null;
		      }  
		  });
		 return result;  
	 }
		
		 
	$('#tree').ace_tree({
		dataSource: treeSource,
	  	multiSelect: true,
           cacheItems: true,
           'open-icon': 'ace-icon tree-minus',
           'close-icon': 'ace-icon tree-plus',
           'selectable': true,
           'selected-icon': 'ace-icon fa fa-check',
           'unselected-icon': 'ace-icon fa fa-times',
           loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
	});
})

5.找到assets-> js -> fuelux -> fuelux.tree.min.js
6.找到方法添加的地方

selectedItems:function(){
	var f=this.$element.find(".tree-selected");
	var e=[];
	b.each(f,function(g,h){
		e.push(b(h).data())
	});
	return e},

7.在selectedItems前面添加下面方法（反正加进去没报错就行）

selectedItemsAndParents: function() {
	   //获取选中的子节点
	　　var $sel = this.$element.find(".tree-selected");
	   //用来返回选中的子节点即其父节点
	　　var data = [];
	　　$.each($sel, function(index, value) {
			//获取父节点元素，当前子节点的父节点的上一个兄弟 
	　　　　　　var $parent = $(value).parent(value).prev();
			//检测父节点的additionalParameters
			if(typeof($parent.data().additionalParameters) != "undefined"){
			　	//检测data中是否已经包含该父节点  --》$.inArray()方法类似于JavaScript的原生.indexOf()方法，没有找到匹配元素时它返回-1。如果数组第一个元素匹配value（参数） ，那么$.inArray()返回0。
				var result = $.inArray($parent.data(), data);
				//如果不存在，即添加到data中
	　　　　　　　　　if(result==-1){
	　　　　　　　　　	data.push($parent.data());
	　　　　　　　　　}
			}
			//把子节点添加到data中
			data.push($(value).data());
	　　});
	　　return data;
	},

8.前端js调用

function selectedItemsAndParents() {
				var output = '';
				var items = $('#tree').tree('selectedItemsAndParents');
				for(var i in items){
					if (items.hasOwnProperty(i)) {
						var item = items[i];
						output += item.additionalParameters['id'] + ":"+ item.name+"\n";
					}
				}
				console.log("output"+output);
	        }

数据结构类

import java.util.List;

import com.fasterxml.jackson.annotation.JsonProperty;

/**
 * 
* @ClassName: ItemDto 
* @Description: ZTree的元素
* @author  Administrator 849587534@qq.com
* @date 2017年12月24日 下午5:21:18 
*
 */
public class Item {

	class AdditionalParameters{
    	
		/**
		 * id
		 */
		private String id;

		/**
		 * 是否选中
		 */
		@JsonProperty(value="item-selected")  
		private boolean itemSelected ;  

		public boolean isItemSelected() {
			return itemSelected;
		}

		public void setItemSelected(boolean itemSelected) {
			this.itemSelected = itemSelected;
		}
		
		public String getId() {
			return id;
		}
		
		public void setId(String id) {
			this.id = id;
		}

		public AdditionalParameters(String id, boolean itemSelected) {
			this.id = id;
			this.itemSelected = itemSelected;
		}
		
    	
    }
	
	/** 
     * 名称 
     */  
    private String name;  
      
    /** 
     * 节点（父、子） 
     */  
    private String type;  
      
    /** 
     * node parameters info and subnode info 
     */  
    private AdditionalParameters additionalParameters;

    /**
     * 子权限
     */
    private List<Item> data;
    

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public AdditionalParameters getAdditionalParameters() {
		return additionalParameters;
	}

	public void setAdditionalParameters(String id, boolean itemSelected) {
		this.additionalParameters = new AdditionalParameters(id, itemSelected);
	}

	public List<Item> getData() {
		return data;
	}

	public void setData(List<Item> data) {
		this.data = data;
	}
    
    
    
}