Updated selectNode + unselectNode to accept node or node id, plus add…

…ed toggleNodeSelected #54
mmm8955405 · Mar 21, 2015 · 2bb67b2 · 2bb67b2
1 parent d21c277
commit 2bb67b2
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -374,15 +374,15 @@ $('#tree').treeview('search', [ 'Parent', {
 
 Triggers `searchComplete` event
 
-### selectNode(nodeId)
+### selectNode(node | nodeId, options)
 
-Set a node's state to selected
+Selects a given tree node, accepts node or nodeId.
 
 ```javascript
-$('#tree').treeview('selectNode', nodeId);
+$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
 ```
 
-Triggers `nodeSelected` event
+Triggers `nodeSelected` event; pass silent to suppress events.
 
 ### toggleNodeExpanded(node | nodeId, options)
 
@@ -394,15 +394,25 @@ $('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);
 
 Triggers either `nodeExpanded` or `nodeCollapsed` event; pass silent to suppress events.
 
-### unselectNode(nodeId)
+### toggleNodeSelected(node | nodeId, options)
 
-Set a node's state to unselected
+Toggles a node selected state; selecting if unselected, unselecting if selected.
 
 ```javascript
-$('#tree').treeview('unselectNode', nodeId);
+$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);
 ```
 
-Triggers `nodeUnselected` event
+Triggers either `nodeSelected` or `nodeUnselected` event; pass silent to suppress events.
+
+### unselectNode(node | nodeId, options)
+
+Unselects a given tree node, accepts node or nodeId.
+
+```javascript
+$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);
+```
+
+Triggers `nodeUnselected` event; pass silent to suppress events.
 
 ## Events
 

diff --git a/dist/bootstrap-treeview.min.js b/dist/bootstrap-treeview.min.js
diff --git a/public/index.html b/public/index.html
@@ -114,6 +114,32 @@ <h2>Results</h2>
           <div id="search-output"></div>
         </div>
       </div>
+      <div class="row">
+        <hr>
+        <h2>Select / Unselect Methods</h2>
+        <div class="col-sm-4">
+          <h2>Input</h2>
+          <div class="form-group">
+            <label for="input-select-node" class="sr-only">Search Tree:</label>
+            <input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
+          </div>
+          <div class="form-group">
+              <button type="button" class="btn btn-success select-node" id="btn-select-node">Select Node</button>
+          </div>
+          <div class="form-group">
+            <button type="button" class="btn btn-danger select-node" id="btn-unselect-node">Unselect Node</button>
+          </div>
+          <div class="form-group">
+            <button type="button" class="btn btn-primary select-node" id="btn-toggle-selected">Toggle Node</button>
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h2>Tree</h2>
+          <div id="treeview-selectable" class=""></div>
+        </div>
+        <div class="col-sm-4">
+        </div>
+      </div>
       <div class="row">
         <hr>
         <h2>Expand / Collapse Methods</h2>
@@ -138,7 +164,7 @@ <h2>Input</h2>
             <button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">Collapse Node</button>
           </div>
           <div class="form-group">
-            <button type="button" class="btn btn-primary expand-node" id="btn-toggle-node">Toggle Node</button>
+            <button type="button" class="btn btn-primary expand-node" id="btn-toggle-expanded">Toggle Node</button>
           </div>
           <hr>
           <div class="form-group row">
@@ -425,6 +451,7 @@ <h2></h2>
         });
 
 
+
         var $searchTree = $('#treeview-search').treeview({
           data: defaultData,
         });
@@ -455,6 +482,35 @@ <h2></h2>
 
 
 
+        var $selectableTree = $('#treeview-selectable').treeview({
+          data: defaultData
+        });
+
+        var findSelectableNode = function() {
+          return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: true } ]);
+        };
+        var selectableNode = findSelectableNode();
+
+        // Select/unselect/toggle nodes
+        $('#input-select-node').on('keyup', function (e) {
+          selectableNode = findSelectableNode();
+          $('.select-node').prop('disabled', !(selectableNode.length === 1));
+        });
+
+        $('#btn-select-node.select-node').on('click', function (e) {
+          $selectableTree.treeview('selectNode', selectableNode[0]);
+        });
+
+        $('#btn-unselect-node.select-node').on('click', function (e) {
+          $selectableTree.treeview('unselectNode', selectableNode[0]);
+        });
+
+        $('#btn-toggle-selected.select-node').on('click', function (e) {
+          $selectableTree.treeview('toggleNodeSelected', selectableNode[0]);
+        });
+
+
+
         var $expandibleTree = $('#treeview-expandible').treeview({
           data: defaultData
         });
@@ -479,7 +535,7 @@ <h2></h2>
           $expandibleTree.treeview('collapseNode', expandibleNode[0]);
         });
 
-        $('#btn-toggle-node.expand-node').on('click', function (e) {
+        $('#btn-toggle-expanded.expand-node').on('click', function (e) {
           $expandibleTree.treeview('toggleNodeExpanded', expandibleNode[0]);
         });
 

diff --git a/public/js/bootstrap-treeview.js b/public/js/bootstrap-treeview.js
@@ -84,6 +84,7 @@
 			// Select methods
 			selectNode: $.proxy(this.selectNode, this),
 			unselectNode: $.proxy(this.unselectNode, this),
+			toggleNodeSelected: $.proxy(this.toggleNodeSelected, this),
 
 			// Expand / collapse methods
 			collapseAll: $.proxy(this.collapseAll, this),
@@ -307,20 +308,25 @@
 		}
 	};
 
-	Tree.prototype.toggleSelectedState = function (node) {
-
+	Tree.prototype.toggleSelectedState = function (node, silent) {
 		if (!node) { return; }
+		this.setSelectedState(node, !node.states.selected, silent);
+		this.render();
+	};
 
-		if (node.states.selected) {
-			node.states.selected = false;
-			this.$element.trigger('nodeUnselected', $.extend(true, {}, node) );
+	Tree.prototype.setSelectedState = function (node, state, silent) {
+		if (state) {
+			node.states.selected = true;
+			if (!silent) {
+				this.$element.trigger('nodeSelected', $.extend(true, {}, node) );
+			}
 		}
 		else {
-			node.states.selected = true;
-			this.$element.trigger('nodeSelected', $.extend(true, {}, node) );
+			node.states.selected = false;
+			if (!silent) {
+				this.$element.trigger('nodeUnselected', $.extend(true, {}, node) );
+			}
 		}
-
-		this.render();
 	};
 
 	Tree.prototype.render = function () {
@@ -542,6 +548,39 @@
 	};
 
 
+	/**
+		Set a node state to selected
+		@param {Object|Number} identifier - A valid node or node id
+		@param {optional Object} options
+	*/
+	Tree.prototype.selectNode = function (identifier, options) {
+		var silent = this.isSilent(options);
+		this.setSelectedState(this.identifyNode(identifier), true, silent);
+		this.render();
+	};
+
+	/**
+		Set a node state to unselected
+		@param {Object|Number} identifier - A valid node or node id
+		@param {optional Object} options
+	*/
+	Tree.prototype.unselectNode = function (identifier, options) {
+		var silent = this.isSilent(options);
+		this.setSelectedState(this.identifyNode(identifier), false, silent);
+		this.render();
+	};
+
+	/**
+		Toggles a node selected state; selecting if unselected, unselecting if selected.
+		@param {Object|Number} identifier - A valid node or node id
+		@param {optional Object} options
+	*/
+	Tree.prototype.toggleNodeSelected = function (identifier, options) {
+		this.toggleSelectedState(this.identifyNode(identifier),
+															this.isSilent(options));
+	};
+
+
 	/**
 		Collapse all tree nodes
 		@param {optional Object} options
@@ -611,7 +650,7 @@
 				this.expandLevels(node.nodes, level-1, silent);
 			}
 		}, this));
-	}
+	};
 
 	/**
 		Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
@@ -621,37 +660,18 @@
 	Tree.prototype.toggleNodeExpanded = function (identifier, options) {
 		this.toggleExpandedState(this.identifyNode(identifier),
 															this.isSilent(options));
-	}
+	};
 
 	Tree.prototype.identifyNode = function (identifier) {
 		return ((typeof identifier) === 'number') ?
 						this.nodes[identifier] :
 						identifier;
-	}
+	};
 
 	Tree.prototype.isSilent = function (options) {
 		return (options && options.hasOwnProperty('silent')) ?
 						options.silent :
 						false;
-	}
-
-
-	/**
-		Set a node state to selected
-		@param {Number} nodeId - A node's unique identifier
-	*/
-	Tree.prototype.selectNode = function (nodeId) {
-		this.nodes[nodeId].states.selected = true;
-		this.render();
-	};
-
-	/**
-		Set a node state to unselected
-		@param {Number} nodeId - A node's unique identifier
-	*/
-	Tree.prototype.unselectNode = function (nodeId) {
-		this.nodes[nodeId].states.selected = false;
-		this.render();
 	};