有部分內容參考以下地址進行改造：

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

放一張我項目里的效果圖：實現了自動展開、自動勾選已選擇項，是不是挺漂亮？

?

總結

以上是生活随笔為你收集整理的aceadmin1.4框架treeview多选改造的全部內容，希望文章能夠幫你解決所遇到的問題。

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