From 46b6d94abefb7f6af11e3edaeba852af41ece1b6 Mon Sep 17 00:00:00 2001 From: Ray Date: Sun, 10 Sep 2023 15:53:41 +0100 Subject: [PATCH] Added tags to treeview nodes Separated treeviewnodes from treeview Added various methods --- bbtreeview.js | 605 +++++++++++----------------------------------- bbtreeviewnode.js | 384 +++++++++++++++++++++++++++++ demo-test.html | 127 +++++++++- 3 files changed, 641 insertions(+), 475 deletions(-) diff --git a/bbtreeview.js b/bbtreeview.js index cd4c78d..bdc8a3e 100644 --- a/bbtreeview.js +++ b/bbtreeview.js @@ -40,106 +40,8 @@ BBTreeview.prototype.AddItem = function(options) { const node = a.Find(_options.ID); - // Events - node.Node.addEventListener("click", function(e){ - e.stopPropagation(); - e.preventDefault(); - - if (!a.isTag(e.target, "li")) { - return; - } - - if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) { - return; - } - - const myNode = a.getNode(e.target); - if (myNode == null) { - return; - } - - a.Toggle(myNode); - }); - - // Setup checkbox events - if (a.Options.ShowCheckbox) { - node.GetCheckbox().addEventListener("mousedown", function(e){ - e.stopPropagation(); - e.preventDefault(); - - // node.Checked = !node.Checked; - - // a.CheckNode(node, node.Checked); - node.Check(!node.IsChecked()); - }); - - node.GetCheckbox().addEventListener("click", function(e){ - e.stopPropagation(); - e.preventDefault(); - - // do nothing - }); - - node.GetCheckbox().addEventListener("dblclick", function(e){ - e.stopPropagation(); - e.preventDefault(); - - // do nothing - }); - } - - // node.Label.addEventListener("click", function(e){ - // e.stopPropagation(); - // e.preventDefault(); - - // }); - - // Highlighting - node.Container.addEventListener("mousedown", function(e){ - e.stopPropagation(); - e.preventDefault(); - - const myNode = a.getNode(e.target); - if (myNode == null) { - return; - } - - a.Container.querySelectorAll("div.highlighted").forEach(function(e) { - e.classList.remove("highlighted"); - }); - - // Don't show selection - if (!a.Options.ShowSelection) { - return; - } - - myNode.Container.classList.add("highlighted"); - }); - - // Toggle - node.Container.addEventListener("dblclick", function(e){ - e.stopPropagation(); - e.preventDefault(); - - const myNode = a.getNode(e.target); - if (myNode == null) { - return; - } - - a.Toggle(myNode); - }); - - // Invalidate state - if (node.GetParentNode() != null) { - if (node.GetParentNode().classList.contains("c")) { - node.Node.classList.add("hidden"); - } else if (node.GetParentNode().classList.contains("e")) { - node.Node.classList.remove("hidden"); - } else { - node.GetParentNode().classList.add("e"); - node.Node.classList.remove("hidden"); - } - } + // Setup events + node.SetupEvents(); return true; }; @@ -154,22 +56,9 @@ BBTreeview.prototype.Remove = function(id) { node.Remove(); - // node.Node.parentNode.removeChild(node.Node); - - // if (node.GetParentNode() != null) { - // if (node.GetParentNode().classList.contains("e")) { - // node.GetParentNode().classList.remove("e"); - // } - - // if (node.GetParentNode().classList.contains("c")) { - // node.GetParentNode().classList.remove("c"); - // } - // } - return true; }; - BBTreeview.prototype.Default = function() { return { TreeviewOptions: { @@ -182,75 +71,52 @@ BBTreeview.prototype.Default = function() { ParentID: null, Name: "", Hint: "", - Value: "hello", + Value: "", Icon: "folder", - Checked: false + Checked: false, + Tag: null } }; }; - -// BBTreeview.prototype.CheckNode = function(node, value) { -// const a = this; - -// a.setNodeCheckbox(node.Node, value); - -// // Update children -// node.Node.querySelectorAll("li").forEach(function(e) { -// a.setNodeCheckbox(e, value); -// }); - -// // Invalidate ParentNode -// // node.ParentNode = a.GetParentNode(node.Node); - -// // Update parent state -// if (node.GetParentNode() != null) { -// let uncheckedCount = 0; -// node.GetParentNode().querySelectorAll("li").forEach(function(e) { -// if (e.classList.contains("x")) { -// return; -// } - -// uncheckedCount++; -// }); - -// a.setNodeCheckbox(node.GetParentNode(), (uncheckedCount <= 0)); -// } -// }; - BBTreeview.prototype.Clear = function() { const a = this; a.initialise(a.Options); }; -// BBTreeview.prototype.CollapseNode = function(node) { -// const a = this; +BBTreeview.prototype.CollapseAll = function() { + const a = this; -// node.Node.classList.remove("e"); -// node.Node.classList.add("c"); + a.GetAllNodes().forEach(function(e) { + e.Collapse(); + }); +}; -// a.GetChildNodes(node.Node).forEach(function(e) { -// e.classList.add("hidden"); -// }); -// }; +BBTreeview.prototype.ExpandAll = function() { + const a = this; -// BBTreeview.prototype.ExpandNode = function(node) { -// const a = this; + a.GetAllNodes().forEach(function(e) { + e.Expand(); + }); +}; -// node.Node.classList.remove("c"); -// node.Node.classList.add("e"); +BBTreeview.prototype.CheckAll = function(value) { + const a = this; -// a.GetChildNodes(node.Node).forEach(function(e) { -// e.classList.remove("hidden"); -// }); -// }; + if (!a.Options.ShowCheckbox) { + return; + } + + a.GetAllNodes().forEach(function(e) { + e.Check(value); + }); +}; BBTreeview.prototype.Find = function(id) { const a = this; const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']"); - if (node.length <= 0) { return null; } @@ -258,76 +124,107 @@ BBTreeview.prototype.Find = function(id) { let treenode = new BBTreeviewNode(this); treenode.Load(node[0]); - console.log(treenode); + // console.log(treenode); return treenode; - - // let response = { - // ID: id, - // Node: node[0], - // ParentNode: a.GetParentNode(node[0]), - // ChildNode: a.getChildNode(node[0]), - // Container: node[0].querySelectorAll("div.li")[0], - // Label: node[0].querySelectorAll("span")[0], - // Checked: node[0].classList.contains("x"), - // Checkbox: (a.Options.ShowCheckbox ? node[0].querySelectorAll("div.icon.checkbox")[0] : null), - // Value: node[0].getAttribute("data-bbtv-value") - // }; - - // // console.log(response); - - // return response; }; -// BBTreeview.prototype.GetChildNodes = function(node) { -// const a = this; - -// const childNode = a.getChildNode(node); -// if (childNode == null) { -// return []; -// } - -// let nodes = childNode.querySelectorAll("li"); -// if (nodes.length <= 0) { -// return []; -// } - -// let result = []; -// nodes.forEach(function(e) { -// if (typeof(e.parentNode) == "undefined") { -// return; -// } - -// if (e.parentNode != childNode) { -// return; -// } - -// result.push(e); -// }); - -// return result; -// }; - -// BBTreeview.prototype.GetParentNode = function(node) { -// const a = this; - -// return a.parentsUntilTagName(node, "li"); -// }; - -BBTreeview.prototype.Toggle = function(node) { +BBTreeview.prototype.FindByName = function(value) { const a = this; - if (node.Node.classList.contains("c")) { - // a.ExpandNode(node); - node.Expand(); - } else if (node.Node.classList.contains("e")) { - // a.CollapseNode(node); - node.Collapse(); - } else { - // do nothing - } + let response = []; + a.GetAllNodes().forEach(function(e) { + if (e.Name != value) { + return; + } + + response.push(e); + }); + + return response; }; +BBTreeview.prototype.FindByValue = function(value) { + const a = this; + + let response = []; + a.GetAllNodes().forEach(function(e) { + if (e.Value != value) { + return; + } + + response.push(e); + }); + + return response; +}; + +BBTreeview.prototype.GetAllNodes = function() { + const a = this; + + const node = a.Container.querySelectorAll("li"); + if (node.length <= 0) { + return []; + } + + let response = []; + node.forEach(function(e) { + const id = e.getAttribute("data-bbtv-id"); + if (a.isNullOrWhitespace(id)) { + return; + } + + const myNode = a.Find(id); + if (myNode == null) { + return; + } + + response.push(myNode); + }); + + return response; +}; + +BBTreeview.prototype.GetCheckedNodes = function() { + const a = this; + + let response = []; + a.GetAllNodes().forEach(function(e) { + if (!e.Checked) { + return; + } + + response.push(e); + }); + + return response; +}; + +BBTreeview.prototype.GetCheckedValues = function() { + const a = this; + + let response = []; + a.GetCheckedNodes().map(function(e) { + response.push(e.Value); + }); + + return response; +}; + +BBTreeview.prototype.GetSelectedNode = function() { + const a = this; + + let response = null; + a.GetAllNodes().forEach(function(e) { + if (e.Highlighted) { + response = e; + + return false; + } + }); + + return response; +}; BBTreeview.prototype.initialise = function(options) { var a = this; @@ -368,7 +265,12 @@ BBTreeview.prototype.generateID = function() { BBTreeview.prototype.generateNodeHtml = function(options) { const a = this; - let html = '
  • '; + let tag = ""; + if (!a.isNullOrWhitespace(options.Tag)) { + tag = encodeURIComponent(JSON.stringify(options.Tag)); + } + + let html = '
  • '; html += '
    ' if (a.Options.ShowCheckbox) { @@ -384,17 +286,6 @@ BBTreeview.prototype.generateNodeHtml = function(options) { return html; }; -// BBTreeview.prototype.getChildNode = function(node) { -// const a = this; - -// let result = node.querySelectorAll("ul"); -// if (result.length <= 0) { -// return null; -// } - -// return result[0]; -// }; - BBTreeview.prototype.getNode = function(el) { const a = this; @@ -418,10 +309,15 @@ BBTreeview.prototype.getOptions = function(options) { const a = this; let _options = Object.assign(a.Default().TreeNodeOptions, options); + if (_options.ID == null) { _options.ID = a.generateID(); } + if (_options.Tag == null) { + _options.Tag = ""; + } + return _options; }; @@ -434,7 +330,7 @@ BBTreeview.prototype.isNullOrWhitespace = function(value) { return true; } - return (value.trim().length <= 0); + return (value.toString().trim().length <= 0); }; BBTreeview.prototype.isTag = function(el, tagName) { @@ -447,6 +343,10 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) { let node = el; while (true) { + if (typeof(node.parentNode) == "undefined") { + break; + } + node = node.parentNode; if (typeof(node) == "undefined") { @@ -466,236 +366,3 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) { return node; }; - -// BBTreeview.prototype.setNodeCheckbox = function(el, value) { -// const a = this; - -// if (value) { -// if (!el.classList.contains("x")) { -// el.classList.add("x"); -// } -// } else { -// if (el.classList.contains("x")) { -// el.classList.remove("x"); -// } -// } -// }; - - - - - - -function BBTreeviewNode(treeview) -{ - const a = this; - - a.Treeview = treeview; - - a.initialise(); -}; - -BBTreeviewNode.prototype.Load = function(node) { - const a = this; - - a.ID = node.getAttribute("data-bbtv-id"); - a.Node = node; - - // a.ParentNode: a.GetParentNode(node[0]); - // a.ChildNode: a.getChildNode(node[0]); - - a.Container = node.querySelectorAll("div.li")[0]; - a.Label = node.querySelectorAll("span")[0]; - // a.Checked = a.IsChecked(); - // a.Checkbox = a.GetCheckbox(); - a.Value = node.getAttribute("data-bbtv-value"); -}; - - -BBTreeviewNode.prototype.Check = function(value) { - const a = this; - - a.setCheckbox(a.Node, value); - - // Update children - a.Node.querySelectorAll("li").forEach(function(e) { - a.setCheckbox(e, value); - }); - - // Update parent state - if (a.GetParentNode() != null) { - let uncheckedCount = 0; - a.GetParentNode().querySelectorAll("li").forEach(function(e) { - if (e.classList.contains("x")) { - return; - } - - uncheckedCount++; - }); - - a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0)); - } -}; - -BBTreeviewNode.prototype.Collapse = function() { - const a = this; - - a.Node.classList.remove("e"); - a.Node.classList.add("c"); - - a.GetChildNodes().forEach(function(e) { - e.classList.add("hidden"); - }); -}; - -BBTreeviewNode.prototype.Expand = function() { - const a = this; - - a.Node.classList.remove("c"); - a.Node.classList.add("e"); - - a.GetChildNodes().forEach(function(e) { - e.classList.remove("hidden"); - }); -}; - -BBTreeviewNode.prototype.GetCheckbox = function() { - const a = this; - - if (!a.Treeview.Options.ShowCheckbox) { - return null; - } - - const checkboxes = a.Node.querySelectorAll("div.icon.checkbox"); - if (typeof(checkboxes) == "undefined") { - return null; - } - - return checkboxes[0]; -}; - -BBTreeviewNode.prototype.GetChildNode = function() { - const a = this; - - let result = a.Node.querySelectorAll("ul"); - if (result.length <= 0) { - return null; - } - - return result[0]; -}; - -BBTreeviewNode.prototype.GetChildNodes = function() { - const a = this; - - const childNode = a.GetChildNode(); - if (childNode == null) { - return []; - } - - let nodes = childNode.querySelectorAll("li"); - if (nodes.length <= 0) { - return []; - } - - let result = []; - nodes.forEach(function(e) { - if (typeof(e.parentNode) == "undefined") { - return; - } - - if (e.parentNode != childNode) { - return; - } - - result.push(e); - }); - - return result; -}; - -BBTreeviewNode.prototype.GetParentNode = function() { - const a = this; - - return a.parentsUntilTagName(a.Node, "li"); -}; - -BBTreeviewNode.prototype.IsChecked = function() { - const a = this; - - if (!a.Treeview.Options.ShowCheckbox) { - return false; - } - - return a.Node.classList.contains("x"); -}; - -BBTreeviewNode.prototype.Remove = function() { - const a = this; - - if (a.GetParentNode() != null) { - if (a.GetParentNode().classList.contains("e")) { - a.GetParentNode().classList.remove("e"); - } - - if (a.GetParentNode().classList.contains("c")) { - a.GetParentNode().classList.remove("c"); - } - } - - a.Node.parentNode.removeChild(a.Node); -}; - -BBTreeviewNode.prototype.initialise = function() { - const a = this; - - a.ID = null; - a.ParentID = null; - a.Name = ""; - a.Hint = ""; - a.Value = ""; - a.Icon = "folder"; - a.Checked = false; -}; - -BBTreeviewNode.prototype.isTag = function(el, tagName) { - return (el.tagName.toLowerCase() == tagName); -}; - -BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) { - const a = this; - - let node = el; - - while (true) { - node = node.parentNode; - - if (typeof(node) == "undefined") { - break; - } - - if (a.isTag(node, "ul")) { - if (node.classList.contains("bbtreeview")) { - return null; - } - } - - if (a.isTag(node, tagName)) { - break; - } - } - - return node; -}; - -BBTreeviewNode.prototype.setCheckbox = function(el, value) { - if (value) { - if (!el.classList.contains("x")) { - el.classList.add("x"); - } - } else { - if (el.classList.contains("x")) { - el.classList.remove("x"); - } - } -}; diff --git a/bbtreeviewnode.js b/bbtreeviewnode.js index 5e41c02..46fcf68 100644 --- a/bbtreeviewnode.js +++ b/bbtreeviewnode.js @@ -2,3 +2,387 @@ * BBTreeview * @version v0.1.0.223 (2023/09/08 2027) */ +function BBTreeviewNode(treeview) +{ + const a = this; + + a.Treeview = treeview; + + a.initialise(); +}; + + +BBTreeviewNode.prototype.Load = function(node) { + const a = this; + + a.ID = node.getAttribute("data-bbtv-id"); + a.Node = node; + + a.Container = node.querySelectorAll("div.li")[0]; + a.Label = node.querySelectorAll("span")[0]; + a.Value = node.getAttribute("data-bbtv-value"); + + a.Name = a.Label.textContent; + a.Hint = a.Label.getAttribute("title"); + + a.ParentID = a.GetParentID(); + a.Checked = a.IsChecked(); + a.Highlighted = a.IsHighlighted(); + a.Tag = a.GetTag(); +}; + + +BBTreeviewNode.prototype.Check = function(value) { + const a = this; + + a.setCheckbox(a.Node, value); + + // Update children + a.Node.querySelectorAll("li").forEach(function(e) { + a.setCheckbox(e, value); + }); + + // Update parent state + if (a.GetParentNode() != null) { + let uncheckedCount = 0; + a.GetParentNode().querySelectorAll("li").forEach(function(e) { + if (e.classList.contains("x")) { + return; + } + + uncheckedCount++; + }); + + a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0)); + } +}; + +BBTreeviewNode.prototype.Collapse = function() { + const a = this; + + if (a.Node.classList.contains("e")) { + a.Node.classList.remove("e"); + a.Node.classList.add("c"); + } + + a.GetChildNodes().forEach(function(e) { + e.classList.add("hidden"); + }); +}; + +BBTreeviewNode.prototype.Expand = function() { + const a = this; + + if (a.Node.classList.contains("c")) { + a.Node.classList.remove("c"); + a.Node.classList.add("e"); + } + + a.GetChildNodes().forEach(function(e) { + e.classList.remove("hidden"); + }); +}; + +BBTreeviewNode.prototype.GetCheckbox = function() { + const a = this; + + if (!a.Treeview.Options.ShowCheckbox) { + return null; + } + + const checkboxes = a.Node.querySelectorAll("div.icon.checkbox"); + if (typeof(checkboxes) == "undefined") { + return null; + } + + return checkboxes[0]; +}; + +BBTreeviewNode.prototype.GetChildNode = function() { + const a = this; + + let result = a.Node.querySelectorAll("ul"); + if (result.length <= 0) { + return null; + } + + return result[0]; +}; + +BBTreeviewNode.prototype.GetChildNodes = function() { + const a = this; + + const childNode = a.GetChildNode(); + if (childNode == null) { + return []; + } + + let nodes = childNode.querySelectorAll("li"); + if (nodes.length <= 0) { + return []; + } + + let result = []; + nodes.forEach(function(e) { + if (typeof(e.parentNode) == "undefined") { + return; + } + + if (e.parentNode != childNode) { + return; + } + + result.push(e); + }); + + return result; +}; + +BBTreeviewNode.prototype.GetTag = function() { + const a = this; + + let tag = a.Node.getAttribute("data-bbtv-tag"); + if (a.Treeview.isNullOrWhitespace(tag)) { + return null; + } + + return JSON.parse(decodeURIComponent(tag)); +}; +BBTreeviewNode.prototype.GetParentID = function() { + const a = this; + + const parentNode = a.GetParentNode(); + if (parentNode == null) { + return null; + } + + return parentNode.getAttribute("data-bbtv-id"); +}; + +BBTreeviewNode.prototype.GetParentNode = function() { + const a = this; + + return a.parentsUntilTagName(a.Node, "li"); +}; + +BBTreeviewNode.prototype.IsChecked = function() { + const a = this; + + if (!a.Treeview.Options.ShowCheckbox) { + return false; + } + + return a.Node.classList.contains("x"); +}; + +BBTreeviewNode.prototype.IsExpanded = function() { + const a = this; + + if (a.Node.classList.contains("e")) { + return true; + } + + if (a.Node.classList.contains("c")) { + return false; + } + + return null; +}; + +BBTreeviewNode.prototype.IsHighlighted = function() { + const a = this; + + return (a.Container.classList.contains("highlighted")); +}; + +BBTreeviewNode.prototype.Remove = function() { + const a = this; + + if (a.GetParentNode() != null) { + if (a.GetParentNode().classList.contains("e")) { + a.GetParentNode().classList.remove("e"); + } + + if (a.GetParentNode().classList.contains("c")) { + a.GetParentNode().classList.remove("c"); + } + } + + a.Node.parentNode.removeChild(a.Node); +}; + +BBTreeviewNode.prototype.SetupEvents = function() { + const a = this; + + // collapsible icon behaviour + a.Node.addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + + if (!a.isTag(e.target, "li")) { + return; + } + + if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) { + return; + } + + const myNode = a.Treeview.getNode(e.target); + if (myNode == null) { + return; + } + + myNode.Toggle(); + }); + + // collapsible label behaviour + a.Container.addEventListener("dblclick", function(e){ + e.stopPropagation(); + e.preventDefault(); + + const myNode = a.Treeview.getNode(e.target); + if (myNode == null) { + return; + } + + myNode.Toggle(); + }); + + // checkbox behaviour + if (a.Treeview.Options.ShowCheckbox) { + a.GetCheckbox().addEventListener("mousedown", function(e){ + e.stopPropagation(); + e.preventDefault(); + + a.Check(!a.IsChecked()); + }); + + a.GetCheckbox().addEventListener("click", function(e){ + e.stopPropagation(); + e.preventDefault(); + + // do nothing + }); + + a.GetCheckbox().addEventListener("dblclick", function(e){ + e.stopPropagation(); + e.preventDefault(); + + // do nothing + }); + } + + // highlighting + a.Container.addEventListener("mousedown", function(e){ + e.stopPropagation(); + e.preventDefault(); + + const myNode = a.Treeview.getNode(e.target); + if (myNode == null) { + return; + } + + a.Treeview.Container.querySelectorAll("div.highlighted").forEach(function(e) { + e.classList.remove("highlighted"); + }); + + // Don't show selection + if (!a.Treeview.Options.ShowSelection) { + return; + } + + myNode.Container.classList.add("highlighted"); + }); + + a.invalidateCollapsible(); +}; + +BBTreeviewNode.prototype.Toggle = function() { + const a = this; + + switch (a.IsExpanded()) { + case true: + a.Collapse(); + break; + case false: + a.Expand(); + break; + default: break; + } +}; + +BBTreeviewNode.prototype.initialise = function() { + const a = this; + +// a.ID = null; +// a.ParentID = null; +// a.Name = ""; +// a.Hint = ""; +// a.Value = ""; +// a.Icon = "folder"; +// a.Checked = false; +}; + +BBTreeviewNode.prototype.invalidateCollapsible = function() { + const a = this; + + // Invalidate state + if (a.GetParentNode() == null) { + return; + } + + if (a.GetParentNode().classList.contains("c")) { + a.Node.classList.add("hidden"); + } else if (a.GetParentNode().classList.contains("e")) { + a.Node.classList.remove("hidden"); + } else { + a.GetParentNode().classList.add("e"); + a.Node.classList.remove("hidden"); + } +}; + +BBTreeviewNode.prototype.isTag = function(el, tagName) { + return (el.tagName.toLowerCase() == tagName); +}; + +BBTreeviewNode.prototype.parentsUntilTagName = function(el, tagName) { + const a = this; + + let node = el; + + while (true) { + if (typeof(node.parentNode) == "undefined") { + break; + } + + node = node.parentNode; + + if (typeof(node) == "undefined") { + break; + } + + if (a.isTag(node, "ul")) { + if (node.classList.contains("bbtreeview")) { + return null; + } + } + + if (a.isTag(node, tagName)) { + break; + } + } + + return node; +}; + +BBTreeviewNode.prototype.setCheckbox = function(el, value) { + if (value) { + if (!el.classList.contains("x")) { + el.classList.add("x"); + } + } else { + if (el.classList.contains("x")) { + el.classList.remove("x"); + } + } +}; \ No newline at end of file diff --git a/demo-test.html b/demo-test.html index 84b0ec9..a600979 100644 --- a/demo-test.html +++ b/demo-test.html @@ -28,7 +28,7 @@
    -

    Create demo treeview with checkboxes

    +

    Create demo treeview with checkboxes and selection enabled

    @@ -44,6 +44,42 @@
    +
    + +

    Find a treenode

    +

    + + + +

    + +
    +
    + +

    Get treenodes

    +

    + + + +

    +

    + +

    + +
    +
    + +

    Various

    +

    + + + + +

    + +
    + +
    @@ -99,7 +135,8 @@ function CreateTreeview(){ treeview1.AddItem({ ID: "0_" + i, ParentID: "root", - Name: folders1[i] + Name: folders1[i], + Value: folders1[i] }); } @@ -115,7 +152,8 @@ function CreateTreeview(){ treeview1.AddItem({ ID: "0_2_" + i, ParentID: "0_2", - Name: folders12[i] + Name: folders12[i], + Value: folders12[i] }); } @@ -128,7 +166,8 @@ function CreateTreeview(){ treeview1.AddItem({ ID: "0_3_" + i, ParentID: "0_3", - Name: folders13[i] + Name: folders13[i], + Value: folders13[i] }); } @@ -142,14 +181,17 @@ function CreateTreeview(){ treeview1.AddItem({ ID: "0_5_" + i, ParentID: "0_5", - Name: folders15[i] + Name: folders15[i], + Value: folders15[i] }); } treeview1.AddItem({ ID: "0_2_3_0", ParentID: "0_2_3", - Name: "en-GB" + Name: "en-GB", + Value: "en-GB", + Tag: { test: "hello momo" } }); } @@ -161,6 +203,79 @@ function RemoveTreeNode() { treeview1.Remove("0_2"); } +function FindTreeNode() { + let treenode = treeview1.Find("0_5"); + + console.log(treenode); + + alert(JSON.stringify(treenode)); +} + +function FindTreeNodesByName() { + let treenodes = treeview1.FindByName("Common Files"); + + console.log(treenodes); + + alert(JSON.stringify(treenodes)); +} + +function FindTreeNodesByValue() { + let treenodes = treeview1.FindByValue("Internet Explorer"); + + console.log(treenodes); + + alert(JSON.stringify(treenodes)); +} + +function GetSelectedTreeNode() { + let treenode = treeview1.GetSelectedNode(); + + console.log(treenode); + + alert(JSON.stringify(treenode)); +} + +function GetCheckedTreeNodes() { + let treenodes = treeview1.GetCheckedNodes(); + + console.log(treenodes); + + alert(JSON.stringify(treenodes)); +} + +function GetAllTreeNodes() { + let treenodes = treeview1.GetAllNodes(); + + console.log(treenodes); + + alert(JSON.stringify(treenodes)); +} + +function GetCheckedValues() { + let treenodes = treeview1.GetCheckedValues(); + + console.log(treenodes); + + alert(JSON.stringify(treenodes)); +} + +function CollapseAll() { + treeview1.CollapseAll(); +} + +function ExpandAll() { + treeview1.ExpandAll(); +} + +function CheckAll() { + treeview1.CheckAll(true); +} + +function UncheckAll() { + treeview1.CheckAll(false); +} + +