有部分內容參考以下地址進行改造：
https://www.cnblogs.com/louis80/p/5093901.html
效果
改造前：
改造後：
tree.js文件
selectTreeNode: function selectItem(clickedElement, nodeType) {中的
if (nodeType === 'folder') {
// make the clicked.$element the container branch
clicked.$element = clicked.$element.closest('.tree-branch');
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-folder');
}
function styleNodeSelected (self, $element, $icon) {//ACE方法最後加入：
if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['unselected-icon']) ) {
$icon.removeClass(self.options['unselected-icon']).addClass(self.options['selected-icon']); //ACE
$element.find("li").addClass("tree-selected");
}
function styleNodeDeselected (self, $element, $icon) {//ACE方法最後加入：
if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['selected-icon']) ) {
$icon.removeClass(self.options['selected-icon']).addClass(self.options['unselected-icon']).removeClass("tree-selected"); //ACE
$element.find("li").removeClass("tree-selected");
}
elements.treeview.js文件
$.fn.aceTree = $.fn.ace_tree = function(options) { 下的
<div class="tree-branch-header">\
<span class="tree-branch-name">\
<i class="icon-folder '+$options['close-icon']+'"></i>\
<span class="tree-label"></span>\
</span>\
</div>\
改爲：
<div class="tree-branch-header">\
<span class="tree-branch-name">\
<i class="icon-folder '+$options['close-icon']+'"></i>\
'+($options['folderSelect'] ? ($options['unselected-icon'] == null ? '' : '<i class="icon-item '+$options['unselected-icon']+'"></i>') : '')+'\
<span class="tree-label"></span>\
</span>\
</div>\
ace.css文件：
.tree .icon-caret {
vertical-align: baseline !important;
}
註釋，改爲：
.tree .icon-caret {
/* vertical-align: baseline !important; */
}
在下面這段之後
.tree-container .tree::before {
margin-left: -1px;
}
插入：
.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);
}
效果頁：treeview.html文件：
$('#tree1').ace_tree({
dataSource: sampleData['dataSource1'],
multiSelect: true,
cacheItems: true,
'open-icon' : 'ace-icon tree-minus',
'close-icon' : 'ace-icon tree-plus',
'itemSelect' : true,
'folderSelect': false,
'selected-icon' : 'ace-icon fa fa-check',
'unselected-icon' : 'ace-icon fa fa-times',
loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
});
改爲：
$('#tree1').ace_tree({
dataSource: sampleData['dataSource1'],
multiSelect: true,
cacheItems: true,
'open-icon' : 'ace-icon tree-minus hide',
'close-icon' : 'ace-icon tree-plus hide',
'folderSelect': true,
'selectable' : true,
'selected-icon' : 'ace-icon fa fa-check',
'unselected-icon' : 'ace-icon fa fa-times',
'folder-open-icon' : 'ace-icon tree-plus',
'folder-close-icon' : 'ace-icon tree-minus',
loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
});
到此結束。
完整aceadmin1.4代碼請移步：https://download.csdn.net/download/ohaozy/10583828
放一張我項目裏的效果圖：實現了自動展開、自動勾選已選擇項，是不是挺漂亮？
