ace_tree總結。各類問題解決辦法匯集

首先講一下怎么使用，然后講一下出現的問題的解決辦法

1.引用js和css文件 ace-extra.min.js、ace.min.css、fuelux.tree.min.js、ace-elements.min.js、fuelux.tree-sample-demo-data.js（這個js是默認的數據，以及數據格式）

2.初始化ace_tree

　

<div class="widget-box widget-color-blue2">
   <div class="widget-body">
      <div class="widget-main padding-8">
         <div id="tree1" class="tree"></div>//id為tree1和下面一樣 這樣才能初始化
      </div>
   </div>
</div>

$('#tree1').ace_tree({
    dataSource: treeDataSource ,//這個是你要傳給他的數據，待會后面會講解這個數據格式
    multiSelect:true,
    folderSelect:true,
    cacheItems: true,
    loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
    'open-icon' : 'ace-icon tree-minus',
    'close-icon' : 'ace-icon tree-plus',
    'selectable' : true,
    'selected-icon' : 'ace-icon fa fa-check icon-ok',
    'unselected-icon' : 'ace-icon fa fa-times'
});

$('#tree1').on('updated', function(e, result) {
    
    //console.log(result.info[0].id);
    //result.info  >> an array containing selected items
    //result.item
    //result.eventType >> (selected or unselected)
}).on('selected', function(e,result) {
    //選中文件的方法
}).on('unselected', function(e) {
    //取消選擇的方法
}).on('opened', function(e, result) {
   //打開文件夾的方法
}).on('closed', function(e) {
　　//關閉文件夾的方法
});

//下面是數據格式

var tree_data = {
　　//'唯一標識'：{name：'要展示的名字',type:'folder是文件夾類型，item是文件類型',id：'這條數據的標識，比如點擊樹后需要用這條數據來查其他數據，在這里定義標識就可以獲取'}
   'for-sale' : {name: 'For Sale', type: 'folder'，id:id}    ,
   'vehicles' : {name: 'Vehicles', type: 'folder'}    ,
   'rentals' : {name: 'Rentals', type: 'folder'}  ,
   'real-estate' : {name: 'Real Estate', type: 'folder'}  ,
   'pets' : {name: 'Pets', type: 'folder'}    ,
   'tickets' : {name: 'Tickets', type: 'item'}    ,
   'services' : {name: 'Services', type: 'item'}  ,
   'personals' : {name: 'Personals', type: 'item','additionalParameters':{'item-selected': true}}
}
//這個是子集的格式
tree_data['for-sale']['additionalParameters'] = {
   'children' : { 
      'appliances' : {name: 'Appliances', type: 'item','additionalParameters':{'item-selected': true}},
      'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},
      'clothing' : {name: 'Clothing', type: 'item'},
      'computers' : {name: 'Computers', type: 'item'},
      'jewelry' : {name: 'Jewelry', type: 'item'},
      'office-business' : {name: 'Office & Business', type: 'item'},
      'sports-fitness' : {name: 'Sports & Fitness', type: 'item'}
   },
   'item-selected': true
   
}

var treeDataSource = new DataSourceTree({data: tree_data});//這一步很關鍵，把數據放進去

//不過我覺得這些數據在前台處理不太好處理，我建議在后台處理，以java為例，可以將這些數據放在實體類里面或者放在map里面

好了，使用的方法已經講完了。那么講一下經常出現的問題

1.默認選中文件

tree_data['for-sale']['additionalParameters'] = {
   'children' : { 
      'appliances' : {name: 'Appliances', type: 'item','additionalParameters':{'item-selected': true}},

　　　　'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},

   },
   'item-selected': true
}
這樣就會默認選中for-sale文件夾和他下面的appliances文件了

2.打開文件夾事件
如果默認選中了文件夾 他會自動執行

on('opened', function(e, result) {
   //打開文件夾的方法
})
所以我建議這個方法里面不要寫刷新頁面的方法，不然就會陷入死循環

3.選中的樣式問題

 　　'open-icon' : 'ace-icon tree-minus'，//選中文件夾的樣式
    'selected-icon' : 'ace-icon fa fa-check icon-ok',//選中文件的樣式