bbtreeview.js

@@ -1,6 +1,6 @@
 /**
  * BBTreeview
- * @version v0.1.0.223 (2023/09/08 2027)
+ * @version v0.1.0.244 (2023/09/11 2327)
  */
 function BBTreeview(options)
 {
@@ -64,7 +64,8 @@ BBTreeview.prototype.Default = function() {
     TreeviewOptions: {
       ID: null,
       ShowCheckbox: false,
-      ShowSelection: true
+      ShowSelection: true,
+      EnablePullUp: false
     },
     TreeNodeOptions: {
       ID: null,
@@ -116,6 +117,11 @@ BBTreeview.prototype.CheckAll = function(value) {
 BBTreeview.prototype.Find = function(id) {
   const a = this;
 
+  if (a.Container == null){
+    console.log("BBTreeview container not found");
+    return;
+  }
+
   const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
   if (node.length <= 0) {
     return null;
@@ -211,6 +217,18 @@ BBTreeview.prototype.GetCheckedValues = function() {
   return response;
 };
 
+
+BBTreeview.prototype.GetCheckedTags = function() {
+  const a = this;
+
+  let response = [];
+  a.GetCheckedNodes().map(function(e) {
+    response.push(e.Tag);
+  });
+
+  return response;
+};
+
 BBTreeview.prototype.GetSelectedNode = function() {
   const a = this;
 

bbtreeviewnode.js

@@ -1,6 +1,6 @@
 /**
  * BBTreeview
- * @version v0.1.0.223 (2023/09/08 2027)
+ * @version v0.1.0.244 (2023/09/11 2327)
  */
 function BBTreeviewNode(treeview)
 {
@@ -43,9 +43,29 @@ BBTreeviewNode.prototype.Check = function(value) {
   });
 
   // Update parent state
-  if (a.GetParentNode() != null) {
+  let parentNode = a.GetParentNode();
+  if (parentNode == null) {
+    return;
+  }
+
+  // Handle pull-ups
+  if (a.Treeview.Options.EnablePullUp) {
+    while (true) {
+      const parentChecked = (parentNode.querySelectorAll("li.x").length > 0);
+
+      a.setCheckbox(parentNode, parentChecked);
+
+      parentNode = a.Treeview.getNode(parentNode);
+      parentNode = parentNode.GetParentNode();
+
+      if (parentNode == null) {
+        break;
+      }
+    }
+  } else {
     let uncheckedCount = 0;
-    a.GetParentNode().querySelectorAll("li").forEach(function(e) {
+
+    parentNode.querySelectorAll("li").forEach(function(e) {
       if (e.classList.contains("x")) {
         return;
       }
@@ -53,7 +73,7 @@ BBTreeviewNode.prototype.Check = function(value) {
       uncheckedCount++;
     });
 
-    a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
+    a.setCheckbox(parentNode, (uncheckedCount <= 0));
   }
 };
 

demo-test.html

@@ -11,10 +11,9 @@
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
   <!-- <link href="src/bbtreeview.css" rel="stylesheet" /> -->
-  <!-- <script src="src/bbtreeview.js"></script> -->
-  <!-- <script src="src/bbtreeviewnode.js"></script> -->
-
   <link href="bbtreeview.min.css" rel="stylesheet" />
+  <!-- <script src="bbtreeview.js"></script> -->
+  <!-- <script src="bbtreeviewnode.js"></script> -->
   <script src="bbtreeview.min.js"></script>
 
   <title></title>
@@ -31,26 +30,30 @@
   <div class="column">
     <div class="panel">
 
-      <p>Create demo treeview with checkboxes and selection enabled</p>
+      <p>Create demo treeview</p>
-      <button onclick="CreateTreeview()">Create Treeview</button>
+      <p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
+      <p><button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Enable Pull-Ups)</button></p>
+      <p><button onclick="CreateTreeview(3)">Create Treeview (No Checkbox, Selection)</button></p>
+
+    </div>
+    <div class="panel">
+
+      <p>Load sample nodes</p>
+      <button onclick="LoadTreeview()">Load Treeview</button>
 
     </div>
     <div class="panel">
 
       <p>Clear treeview</p>
-      <button onclick="ClearTreeview()">Clear Treeview</button>
+      <p>
-
+        <button onclick="ClearTreeview()">Clear Treeview</button>
-    </div>
+        <button onclick="RemoveTreeNode()">Remove Treenode</button>
-    <div class="panel">
+      </p>
-
-      <p>Remove the "Program Files" treenode</p>
-      <button onclick="RemoveTreeNode()">Remove Treenode</button>
 
     </div>
     <div class="panel">
 
       <p>Find a treenode</p>
-      <p>
         <button onclick="FindTreeNode()">Find Treenode By ID</button>
         <button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
         <button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
@@ -64,6 +67,7 @@
         <button onclick="GetAllTreeNodes()">Get All Treenodes</button>
         <button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
         <button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
+        <button onclick="GetCheckedTags()">Get Checked Treenode Tags</button>
       </p>
       <p>
         <button onclick="GetCheckedValues()">Get Checked Values</button>
@@ -111,16 +115,46 @@ body {
 
   <script>
 
-var treeview1 = new BBTreeview({
+CreateTreeview(1);
-  ID: "#treeview1",
+LoadTreeview();
-  ShowCheckbox: true,
-  ShowSelection: true
-});
 
 
-function CreateTreeview(){
+function CreateTreeview(value){
+  switch (value) {
+    case 1:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: true,
+        ShowSelection: true
+      });
 
-  treeview1.AddItem({
+      break;
+    case 2:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: true,
+        ShowSelection: false,
+        EnablePullUp: true
+      });
+
+      break;
+    case 3:
+      window.treeview1 = new BBTreeview({
+        ID: "#treeview1",
+        ShowCheckbox: false,
+        ShowSelection: true,
+        EnablePullUp: false
+      });
+
+      break;
+    default:
+      break;
+  }
+}
+
+function LoadTreeview(){
+
+  window.treeview1.AddItem({
     ID: "root",
     Name: "C:\\"
   });
@@ -135,7 +169,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders1.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_" + i,
       ParentID: "root",
       Name: folders1[i],
@@ -152,7 +186,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders12.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_2_" + i,
       ParentID: "0_2",
       Name: folders12[i],
@@ -166,7 +200,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders13.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_3_" + i,
       ParentID: "0_3",
       Name: folders13[i],
@@ -181,7 +215,7 @@ function CreateTreeview(){
   ];
 
   for (let i=0; i<folders15.length; i++) {
-      treeview1.AddItem({
+    window.treeview1.AddItem({
       ID: "0_5_" + i,
       ParentID: "0_5",
       Name: folders15[i],
@@ -189,7 +223,7 @@ function CreateTreeview(){
     });
   }
 
-  treeview1.AddItem({
+  window.treeview1.AddItem({
     ID: "0_2_3_0",
     ParentID: "0_2_3",
     Name: "en-GB",
@@ -199,15 +233,15 @@ function CreateTreeview(){
 }
 
 function ClearTreeview() {
-  treeview1.Clear();
+  window.treeview1.Clear();
 }
 
 function RemoveTreeNode() {
-  treeview1.Remove("0_2");
+  window.treeview1.Remove("0_2");
 }
 
 function FindTreeNode() {
-  let treenode = treeview1.Find("0_5");
+  let treenode = window.treeview1.Find("0_5");
 
   console.log(treenode);
 
@@ -215,7 +249,7 @@ function FindTreeNode() {
 }
 
 function FindTreeNodesByName() {
-  let treenodes = treeview1.FindByName("Common Files");
+  let treenodes = window.treeview1.FindByName("Common Files");
 
   console.log(treenodes);
 
@@ -223,7 +257,7 @@ function FindTreeNodesByName() {
 }
 
 function FindTreeNodesByValue() {
-  let treenodes = treeview1.FindByValue("Internet Explorer");
+  let treenodes = window.treeview1.FindByValue("Internet Explorer");
 
   console.log(treenodes);
 
@@ -231,7 +265,7 @@ function FindTreeNodesByValue() {
 }
 
 function GetSelectedTreeNode() {
-  let treenode = treeview1.GetSelectedNode();
+  let treenode = window.treeview1.GetSelectedNode();
 
   console.log(treenode);
 
@@ -239,7 +273,15 @@ function GetSelectedTreeNode() {
 }
 
 function GetCheckedTreeNodes() {
-  let treenodes = treeview1.GetCheckedNodes();
+  let treenodes = window.treeview1.GetCheckedNodes();
+
+  console.log(treenodes);
+
+  alert(JSON.stringify(treenodes));
+}
+
+function GetCheckedTags() {
+  let treenodes = window.treeview1.GetCheckedTags();
 
   console.log(treenodes);
 
@@ -247,7 +289,7 @@ function GetCheckedTreeNodes() {
 }
 
 function GetAllTreeNodes() {
-  let treenodes = treeview1.GetAllNodes();
+  let treenodes = window.treeview1.GetAllNodes();
 
   console.log(treenodes);
 
@@ -255,7 +297,7 @@ function GetAllTreeNodes() {
 }
 
 function GetCheckedValues() {
-  let treenodes = treeview1.GetCheckedValues();
+  let treenodes = window.treeview1.GetCheckedValues();
 
   console.log(treenodes);
 
@@ -263,19 +305,19 @@ function GetCheckedValues() {
 }
 
 function CollapseAll() {
-  treeview1.CollapseAll();
+  window.treeview1.CollapseAll();
 }
 
 function ExpandAll() {
-  treeview1.ExpandAll();
+  window.treeview1.ExpandAll();
 }
 
 function CheckAll() {
-  treeview1.CheckAll(true);
+  window.treeview1.CheckAll(true);
 }
 
 function UncheckAll() {
-  treeview1.CheckAll(false);
+  window.treeview1.CheckAll(false);
 }