aceadmin1.4框架treeview多选改造

有部分内容参考以下地址进行改造：

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

放一张我项目里的效果图：实现了自动展开、自动勾选已选择项，是不是挺漂亮？