ace_tree总结。各类问题解决办法汇集

Posted 2020-10-13

首先讲一下怎么使用，然后讲一下出现的问题的解决办法

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‘,//选中文件的样式