有部分内容参考以下地址进行改造:
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
放一张我项目里的效果图:实现了自动展开、自动勾选已选择项,是不是挺漂亮?