Added tags to treeview nodes
Separated treeviewnodes from treeview Added various methods
This commit is contained in:
parent
7355f906f4
commit
46b6d94abe
605
bbtreeview.js
605
bbtreeview.js
@ -40,106 +40,8 @@ BBTreeview.prototype.AddItem = function(options) {
|
|||||||
|
|
||||||
const node = a.Find(_options.ID);
|
const node = a.Find(_options.ID);
|
||||||
|
|
||||||
// Events
|
// Setup events
|
||||||
node.Node.addEventListener("click", function(e){
|
node.SetupEvents();
|
||||||
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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
@ -154,22 +56,9 @@ BBTreeview.prototype.Remove = function(id) {
|
|||||||
|
|
||||||
node.Remove();
|
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;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
BBTreeview.prototype.Default = function() {
|
BBTreeview.prototype.Default = function() {
|
||||||
return {
|
return {
|
||||||
TreeviewOptions: {
|
TreeviewOptions: {
|
||||||
@ -182,75 +71,52 @@ BBTreeview.prototype.Default = function() {
|
|||||||
ParentID: null,
|
ParentID: null,
|
||||||
Name: "",
|
Name: "",
|
||||||
Hint: "",
|
Hint: "",
|
||||||
Value: "hello",
|
Value: "",
|
||||||
Icon: "folder",
|
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() {
|
BBTreeview.prototype.Clear = function() {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
a.initialise(a.Options);
|
a.initialise(a.Options);
|
||||||
};
|
};
|
||||||
|
|
||||||
// BBTreeview.prototype.CollapseNode = function(node) {
|
BBTreeview.prototype.CollapseAll = function() {
|
||||||
// const a = this;
|
const a = this;
|
||||||
|
|
||||||
// node.Node.classList.remove("e");
|
a.GetAllNodes().forEach(function(e) {
|
||||||
// node.Node.classList.add("c");
|
e.Collapse();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// a.GetChildNodes(node.Node).forEach(function(e) {
|
BBTreeview.prototype.ExpandAll = function() {
|
||||||
// e.classList.add("hidden");
|
const a = this;
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// BBTreeview.prototype.ExpandNode = function(node) {
|
a.GetAllNodes().forEach(function(e) {
|
||||||
// const a = this;
|
e.Expand();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// node.Node.classList.remove("c");
|
BBTreeview.prototype.CheckAll = function(value) {
|
||||||
// node.Node.classList.add("e");
|
const a = this;
|
||||||
|
|
||||||
// a.GetChildNodes(node.Node).forEach(function(e) {
|
if (!a.Options.ShowCheckbox) {
|
||||||
// e.classList.remove("hidden");
|
return;
|
||||||
// });
|
}
|
||||||
// };
|
|
||||||
|
a.GetAllNodes().forEach(function(e) {
|
||||||
|
e.Check(value);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
BBTreeview.prototype.Find = function(id) {
|
BBTreeview.prototype.Find = function(id) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
|
const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
|
||||||
|
|
||||||
if (node.length <= 0) {
|
if (node.length <= 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -258,76 +124,107 @@ BBTreeview.prototype.Find = function(id) {
|
|||||||
let treenode = new BBTreeviewNode(this);
|
let treenode = new BBTreeviewNode(this);
|
||||||
treenode.Load(node[0]);
|
treenode.Load(node[0]);
|
||||||
|
|
||||||
console.log(treenode);
|
// console.log(treenode);
|
||||||
|
|
||||||
return 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) {
|
BBTreeview.prototype.FindByName = function(value) {
|
||||||
// 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) {
|
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
if (node.Node.classList.contains("c")) {
|
let response = [];
|
||||||
// a.ExpandNode(node);
|
a.GetAllNodes().forEach(function(e) {
|
||||||
node.Expand();
|
if (e.Name != value) {
|
||||||
} else if (node.Node.classList.contains("e")) {
|
return;
|
||||||
// a.CollapseNode(node);
|
}
|
||||||
node.Collapse();
|
|
||||||
} else {
|
response.push(e);
|
||||||
// do nothing
|
});
|
||||||
}
|
|
||||||
|
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) {
|
BBTreeview.prototype.initialise = function(options) {
|
||||||
var a = this;
|
var a = this;
|
||||||
@ -368,7 +265,12 @@ BBTreeview.prototype.generateID = function() {
|
|||||||
BBTreeview.prototype.generateNodeHtml = function(options) {
|
BBTreeview.prototype.generateNodeHtml = function(options) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
|
let tag = "";
|
||||||
|
if (!a.isNullOrWhitespace(options.Tag)) {
|
||||||
|
tag = encodeURIComponent(JSON.stringify(options.Tag));
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '" data-bbtv-tag="' + tag + '">';
|
||||||
html += '<div class="li">'
|
html += '<div class="li">'
|
||||||
|
|
||||||
if (a.Options.ShowCheckbox) {
|
if (a.Options.ShowCheckbox) {
|
||||||
@ -384,17 +286,6 @@ BBTreeview.prototype.generateNodeHtml = function(options) {
|
|||||||
return html;
|
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) {
|
BBTreeview.prototype.getNode = function(el) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
@ -418,10 +309,15 @@ BBTreeview.prototype.getOptions = function(options) {
|
|||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
let _options = Object.assign(a.Default().TreeNodeOptions, options);
|
let _options = Object.assign(a.Default().TreeNodeOptions, options);
|
||||||
|
|
||||||
if (_options.ID == null) {
|
if (_options.ID == null) {
|
||||||
_options.ID = a.generateID();
|
_options.ID = a.generateID();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (_options.Tag == null) {
|
||||||
|
_options.Tag = "";
|
||||||
|
}
|
||||||
|
|
||||||
return _options;
|
return _options;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -434,7 +330,7 @@ BBTreeview.prototype.isNullOrWhitespace = function(value) {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (value.trim().length <= 0);
|
return (value.toString().trim().length <= 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
BBTreeview.prototype.isTag = function(el, tagName) {
|
BBTreeview.prototype.isTag = function(el, tagName) {
|
||||||
@ -447,6 +343,10 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
|
|||||||
let node = el;
|
let node = el;
|
||||||
|
|
||||||
while (true) {
|
while (true) {
|
||||||
|
if (typeof(node.parentNode) == "undefined") {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
node = node.parentNode;
|
node = node.parentNode;
|
||||||
|
|
||||||
if (typeof(node) == "undefined") {
|
if (typeof(node) == "undefined") {
|
||||||
@ -466,236 +366,3 @@ BBTreeview.prototype.parentsUntilTagName = function(el, tagName) {
|
|||||||
|
|
||||||
return node;
|
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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
@ -2,3 +2,387 @@
|
|||||||
* BBTreeview
|
* BBTreeview
|
||||||
* @version v0.1.0.223 (2023/09/08 2027)
|
* @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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
127
demo-test.html
127
demo-test.html
@ -28,7 +28,7 @@
|
|||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<p>Create demo treeview with checkboxes</p>
|
<p>Create demo treeview with checkboxes and selection enabled</p>
|
||||||
<button onclick="CreateTreeview()">Create Treeview</button>
|
<button onclick="CreateTreeview()">Create Treeview</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -44,6 +44,42 @@
|
|||||||
<button onclick="RemoveTreeNode()">Remove Treenode</button>
|
<button onclick="RemoveTreeNode()">Remove Treenode</button>
|
||||||
|
|
||||||
</div>
|
</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>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
|
||||||
|
<p>Get treenodes</p>
|
||||||
|
<p>
|
||||||
|
<button onclick="GetAllTreeNodes()">Get All Treenodes</button>
|
||||||
|
<button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
|
||||||
|
<button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button onclick="GetCheckedValues()">Get Checked Values</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
|
||||||
|
<p>Various</p>
|
||||||
|
<p>
|
||||||
|
<button onclick="CollapseAll()">Collapse All</button>
|
||||||
|
<button onclick="ExpandAll()">Expand All</button>
|
||||||
|
<button onclick="CheckAll()">Check All</button>
|
||||||
|
<button onclick="UncheckAll()">Uncheck All</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -99,7 +135,8 @@ function CreateTreeview(){
|
|||||||
treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_" + i,
|
ID: "0_" + i,
|
||||||
ParentID: "root",
|
ParentID: "root",
|
||||||
Name: folders1[i]
|
Name: folders1[i],
|
||||||
|
Value: folders1[i]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,7 +152,8 @@ function CreateTreeview(){
|
|||||||
treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_2_" + i,
|
ID: "0_2_" + i,
|
||||||
ParentID: "0_2",
|
ParentID: "0_2",
|
||||||
Name: folders12[i]
|
Name: folders12[i],
|
||||||
|
Value: folders12[i]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -128,7 +166,8 @@ function CreateTreeview(){
|
|||||||
treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_3_" + i,
|
ID: "0_3_" + i,
|
||||||
ParentID: "0_3",
|
ParentID: "0_3",
|
||||||
Name: folders13[i]
|
Name: folders13[i],
|
||||||
|
Value: folders13[i]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -142,14 +181,17 @@ function CreateTreeview(){
|
|||||||
treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_5_" + i,
|
ID: "0_5_" + i,
|
||||||
ParentID: "0_5",
|
ParentID: "0_5",
|
||||||
Name: folders15[i]
|
Name: folders15[i],
|
||||||
|
Value: folders15[i]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_2_3_0",
|
ID: "0_2_3_0",
|
||||||
ParentID: "0_2_3",
|
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");
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user