改造 Ace Admin 模板的 ace_tree 組件的 folderSelect 樣式

*注：我用的Ace Admin版本為1.3.4 

Ace Admin 是一個輕量，功能豐富，HTML5、響應式、支持手機及平板電腦上瀏覽的優秀管理后台模板。

關於tree的使用,html文件夾下treeview.html給了靜態數據的例子，examples下treeview.html給了動態PHP語言的例子。

但是exmaple下的那個treeview,當參數“folderSelect=true”時：如圖:

當點開 后，如圖：

都不能再收起來，而我想改造成 folder點擊選擇，也象item樣式一樣，如圖：

改造如下：1. 首先 修正 treeview.html,  找到$('#treeview').ace_tree,修正如下：

$('#treeview').ace_tree({
    dataSource: remoteDateSource ,
    multiSelect: true,
    loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
    'open-icon' : 'ace-icon tree-minus hide',
    'close-icon' : 'ace-icon tree-plus hide',
    'selectable' : true,
    'selected-icon' : 'ace-icon fa fa-check',
    'unselected-icon' : 'ace-icon fa fa-times',
    'cacheItems': true,
    'folderSelect': true,
    'folder-open-icon' : 'ace-icon tree-plus',
    'folder-close-icon' : 'ace-icon tree-minus'
});

 

接下去，找到關聯的js文件ace-elements.js，打開后找到acetree相關的部分，在

<i class="icon-folder '+$options['close-icon']+'"></i>\

后插入一行

'+($options['folderSelect'] ? ($options['unselected-icon'] == null ? '' : '<i class="icon-item '+$options['unselected-icon']+'"></i>') : '')+'\

 

然后， 打開“/fuelux/fuelux.tree.js”，找到selectTreeNode 屬性，將

if (nodeType === 'folder') {
    // make the clicked.$element the container branch
    clicked.$element = clicked.$element.closest('.tree-branch');
    clicked.$icon = clicked.$element.find('.icon-folder');
}
else {
    clicked.$icon = clicked.$element.find('.icon-item');
}

改成

if (nodeType === 'folder') {
    // make the clicked.$element the container branch
    clicked.$element = clicked.$element.closest('.tree-branch');
    clicked.$icon = clicked.$element.find('.icon-item');
}
else {
    clicked.$icon = clicked.$element.find('.icon-item');
}

找到styleNodeSelected方法，在方法中加入

if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['unselected-icon']) ) {
    //$icon.removeClass('fueluxicon-bullet').addClass('glyphicon-ok'); // make checkmark
    $icon.removeClass(self.options['unselected-icon']).addClass(self.options['selected-icon']); //ACE
}

找到styleNodeDeselected方法，在方法中加入

if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['selected-icon']) ) {
    //$icon.removeClass('fueluxicon-bullet').addClass('glyphicon-ok'); // make checkmark
    $icon.removeClass(self.options['selected-icon']).addClass(self.options['unselected-icon']); //ACE
}

 

如此，jquery代碼就改好了，最后在treeview.html加入css就行了

.tree .tree-branch > .tree-branch-header > .tree-branch-name > .icon-item {
  color: #F9E8CE;
  width: 13px;
  height: 13px;
  line-height: 13px;
  font-size: 11px;
  text-align: center;
  border-radius: 3px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-color: #FAFAFA;
  border: 1px solid #CCC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tree .tree-selected > .tree-branch-header > .tree-branch-name > .icon-item {
  background-color: #F9A021;
  border-color: #F9A021;
  color: #FFF;
}

如此就能變成漂亮的多選樹型菜單