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: '
'
    });
})

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);
            }