ACE fuelux.tree树形选择控件增强目录选择功能

【起因】树形选择控件，支持目录选择的并不多。在权限与资源关系的配置页面中，因为父节点也是资源，也需要选中功能，因此需要目录节点也有选中的效果。故，对ACE的树形控件fuelux.tree进行了功能增强。步骤如下：

1、ace-elements.min.js文件解密后，增加如下红色代码：

e.html('<div class = "tree-folder" style="display:none;"> <div class="tree-folder-header"> <i class="' + c["close-icon"] + '"></i> ' + (c["folderSelect"]?(c['unselected-icon'] == null ? '' : '<i class="icon-item '+c['unselected-icon'] + '"></i>') : '') + ' <div class="tree-folder-name"></div> </div> <div class="tree-folder-content"></div> <div class="tree-loader" style="display:none"></div> </div> <div class="tree-item" style="display:none;"> ' + (c["unselected-icon"] == null ? "" : '<i class="' + c["unselected-icon"] + '"></i>') + ' <div class="tree-item-name"></div> </div>');

此操作可在目录节点上增加一个选择图标

2、fuelux.tree.min.js文件解密后，修改下面红色代码：

selectItem: function(e) {

if (this.options.selectable == false) {

return

}

var d = a(e);

var g = this.$element.find(".tree-selected");

var f = [];

if (this.options.multiSelect) {

a.each(g, function(i, j) {

var h = a(j);

if (h[0] !== d[0]) {

f.push(a(j).data())

}

})

} else {

if (g[0] !== d[0]) {

g.removeClass("tree-selected").find("i").removeClass(this.options["selected-icon"]).addClass(this.options["unselected-icon"]);

f.push(d.data())

}

}

if (d.hasClass("tree-selected")) {

d.removeClass("tree-selected");

d.find("i").removeClass(this.options["selected-icon"]).addClass(this.options["unselected-icon"]) ;

this.$element.trigger("deselected", {

info: f

});

} else {

d.addClass("tree-selected");

d.find("i").removeClass(this.options["unselected-icon"]).addClass(this.options["selected-icon"]);

if (this.options.multiSelect) {

f.push(d.data())

}

if (f.length) {

this.$element.trigger("selected", {

info: f

});

}

}

if (f.length) {

this.$element.trigger("selected", {

info: f

})

}

},

selectFolder: function(e) {

var d = a(e);

var f = d.parent();

if (d.find("." + this.options["close-icon"]).length) {

if (f.find(".tree-folder-content").children().length) {

f.find(".tree-folder-content:eq(0)").show()

} else {

this.populate(d)

}

f.find("." + this.options["close-icon"] + ":eq(0)").removeClass(this.options["close-icon"]).addClass(this.options["open-icon"]);

f.find(".tree-folder-header i:eq(1)").removeClass(this.options["unselected-icon"]).addClass(this.options["selected-icon"]);

f.find(".tree-folder-header:eq(0)").addClass("tree-folder-selected");

this.$element.trigger("opened", d.data());

} else {

if (this.options.cacheItems) {

f.find(".tree-folder-content:eq(0)").hide()

} else {

f.find(".tree-folder-content:eq(0)").empty()

}

f.find("." + this.options["open-icon"] + ":eq(0)").removeClass(this.options["open-icon"]).addClass(this.options["close-icon"]);

f.find(".tree-folder-header i:eq(1)").removeClass(this.options["selected-icon"]).addClass(this.options["unselected-icon"]);

f.find(".tree-folder-header:eq(0)").removeClass("tree-folder-selected");

this.$element.trigger("closed", d.data());

}

},

selectedItems: function() {

var treeFolderSelected = "";

if(this.options["folderSelect"]){

treeFolderSelected = ".tree-folder-selected,";

}

var e = this.$element.find( treeFolderSelected + ".tree-selected");

var d = [];

a.each(e, function(f, g) {

d.push(a(g).data())

});

return d

}

3、修改样式文件ace.min.css，增加以下样式

.tree .tree-folder-header>[class*="icon-"]:nth-child(2) {

color: #f9e8ce;

width: 13px;

height: 13px;

line-height: 13px;

font-size: 11px;

text-align: center;

border-radius: 3px;

background-color: #fafafa;

border: 1px solid #CCC;

box-shadow: 0 1px 2px rgba(0,0,0,0.05);

box-sizing: content-box

}

.tree .tree-folder-selected>[class*="icon-"]:nth-child(2) {

background-color: #f9a021;

border-color: #f9a021;

color: #FFF

}

最终效果：