標簽：

*注：我用的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:‘

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

\

后插入一行

‘+($options[‘folderSelect‘] ? ($options[‘unselected-icon‘] == null ? ‘‘ : ‘‘) : ‘‘)+‘\

然后， 打開“/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;

}

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

標簽：

總結

以上是生活随笔為你收集整理的ace treeview.php,改造 Ace Admin 模板的 ace_tree 组件的 folderSelect 样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。