diff --git a/README.md b/README.md index c0a724235..5f2a5b848 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ If you want to do more, here's the full node specification expanded: true, selected: true }, - tags: ['available'], + tags: [{text: 'available', class: 'badge-primary'}], nodes: [ {}, ... @@ -212,9 +212,18 @@ Whether or not a node is expanded i.e. open. Takes precedence over global optio Whether or not a node is selected. #### tags -`Array of Strings` `Optional` +`Array of Objects` `Optional` -Used in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](http://getbootstrap.com/components/#badges) +Used in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](https://getbootstrap.com/docs/4.4/components/badge/) + +The object must contain a `text` field and a `class` field naming the badge class, e.g. : + +```javascript +{ + text: 'available', + class: 'badge-primary' +} +``` ### Extendible diff --git a/src/js/bootstrap-treeview.js b/src/js/bootstrap-treeview.js index 7a82a2eeb..558c1361d 100644 --- a/src/js/bootstrap-treeview.js +++ b/src/js/bootstrap-treeview.js @@ -321,7 +321,7 @@ var target = $(event.target); var node = this.findNode(target); if (!node || node.state.disabled) return; - + var classList = target.attr('class') ? target.attr('class').split(' ') : []; if ((classList.indexOf('expand-icon') !== -1)) { @@ -329,12 +329,12 @@ this.render(); } else if ((classList.indexOf('check-icon') !== -1)) { - + this.toggleCheckedState(node, _default.options); this.render(); } else { - + if (node.selectable) { this.toggleSelectedState(node, _default.options); } else { @@ -516,7 +516,7 @@ .addClass(node.state.checked ? 'node-checked' : '') .addClass(node.state.disabled ? 'node-disabled': '') .addClass(node.state.selected ? 'node-selected' : '') - .addClass(node.searchResult ? 'search-result' : '') + .addClass(node.searchResult ? 'search-result' : '') .attr('data-nodeid', node.nodeId) .attr('style', _this.buildStyleOverride(node)); @@ -548,13 +548,13 @@ // Add node icon if (_this.options.showIcon) { - + var classList = ['node-icon']; classList.push(node.icon || _this.options.nodeIcon); if (node.state.selected) { classList.pop(); - classList.push(node.selectedIcon || _this.options.selectedIcon || + classList.push(node.selectedIcon || _this.options.selectedIcon || node.icon || _this.options.nodeIcon); } @@ -569,7 +569,7 @@ var classList = ['check-icon']; if (node.state.checked) { - classList.push(_this.options.checkedIcon); + classList.push(_this.options.checkedIcon); } else { classList.push(_this.options.uncheckedIcon); @@ -601,7 +601,7 @@ $.each(node.tags, function addTag(id, tag) { treeItem .append($(_this.template.badge) - .append(tag) + .append(tag.text).addClass(tag.class) ); }); } @@ -935,7 +935,7 @@ this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) { this.toggleExpandedState(node, options); }, this)); - + this.render(); }; @@ -1085,7 +1085,7 @@ $.each(identifiers, $.proxy(function (index, identifier) { callback(this.identifyNode(identifier), options); - }, this)); + }, this)); }; /* @@ -1156,9 +1156,9 @@ }); if (options.render) { - this.render(); + this.render(); } - + this.$element.trigger('searchCleared', $.extend(true, {}, results)); };