Compare commits
No commits in common. "5e64b15f2564ac2800757b6fd9a447ff25ed8a7e" and "163e224ebda2ae146c112a81f0e9a42cb8fc8d98" have entirely different histories.
5e64b15f25
...
163e224ebd
6
bbtreeview.min.js
vendored
6
bbtreeview.min.js
vendored
File diff suppressed because one or more lines are too long
106
demo-test.html
106
demo-test.html
@ -11,9 +11,10 @@
|
|||||||
<!-- <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="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" /> -->
|
<!-- <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" />
|
<link href="bbtreeview.min.css" rel="stylesheet" />
|
||||||
<!-- <script src="bbtreeview.js"></script> -->
|
|
||||||
<!-- <script src="bbtreeviewnode.js"></script> -->
|
|
||||||
<script src="bbtreeview.min.js"></script>
|
<script src="bbtreeview.min.js"></script>
|
||||||
|
|
||||||
<title></title>
|
<title></title>
|
||||||
@ -30,30 +31,26 @@
|
|||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<p>Create demo treeview</p>
|
<p>Create demo treeview with checkboxes and selection enabled</p>
|
||||||
<p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
|
<button onclick="CreateTreeview()">Create Treeview</button>
|
||||||
<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>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<p>Clear treeview</p>
|
<p>Clear treeview</p>
|
||||||
<p>
|
|
||||||
<button onclick="ClearTreeview()">Clear Treeview</button>
|
<button onclick="ClearTreeview()">Clear Treeview</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
|
||||||
|
<p>Remove the "Program Files" treenode</p>
|
||||||
<button onclick="RemoveTreeNode()">Remove Treenode</button>
|
<button onclick="RemoveTreeNode()">Remove Treenode</button>
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
|
|
||||||
<p>Find a treenode</p>
|
<p>Find a treenode</p>
|
||||||
|
<p>
|
||||||
<button onclick="FindTreeNode()">Find Treenode By ID</button>
|
<button onclick="FindTreeNode()">Find Treenode By ID</button>
|
||||||
<button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
|
<button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
|
||||||
<button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
|
<button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
|
||||||
@ -67,7 +64,6 @@
|
|||||||
<button onclick="GetAllTreeNodes()">Get All Treenodes</button>
|
<button onclick="GetAllTreeNodes()">Get All Treenodes</button>
|
||||||
<button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
|
<button onclick="GetSelectedTreeNode()">Get Highlighted Treenode</button>
|
||||||
<button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
|
<button onclick="GetCheckedTreeNodes()">Get Checked Treenodes</button>
|
||||||
<button onclick="GetCheckedTags()">Get Checked Treenode Tags</button>
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<button onclick="GetCheckedValues()">Get Checked Values</button>
|
<button onclick="GetCheckedValues()">Get Checked Values</button>
|
||||||
@ -115,46 +111,16 @@ body {
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
CreateTreeview(1);
|
var treeview1 = new BBTreeview({
|
||||||
LoadTreeview();
|
|
||||||
|
|
||||||
|
|
||||||
function CreateTreeview(value){
|
|
||||||
switch (value) {
|
|
||||||
case 1:
|
|
||||||
window.treeview1 = new BBTreeview({
|
|
||||||
ID: "#treeview1",
|
ID: "#treeview1",
|
||||||
ShowCheckbox: true,
|
ShowCheckbox: true,
|
||||||
ShowSelection: true
|
ShowSelection: true
|
||||||
});
|
});
|
||||||
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
window.treeview1 = new BBTreeview({
|
|
||||||
ID: "#treeview1",
|
|
||||||
ShowCheckbox: true,
|
|
||||||
ShowSelection: false,
|
|
||||||
EnablePullUp: true
|
|
||||||
});
|
|
||||||
|
|
||||||
break;
|
function CreateTreeview(){
|
||||||
case 3:
|
|
||||||
window.treeview1 = new BBTreeview({
|
|
||||||
ID: "#treeview1",
|
|
||||||
ShowCheckbox: false,
|
|
||||||
ShowSelection: true,
|
|
||||||
EnablePullUp: false
|
|
||||||
});
|
|
||||||
|
|
||||||
break;
|
treeview1.AddItem({
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function LoadTreeview(){
|
|
||||||
|
|
||||||
window.treeview1.AddItem({
|
|
||||||
ID: "root",
|
ID: "root",
|
||||||
Name: "C:\\"
|
Name: "C:\\"
|
||||||
});
|
});
|
||||||
@ -169,7 +135,7 @@ function LoadTreeview(){
|
|||||||
];
|
];
|
||||||
|
|
||||||
for (let i=0; i<folders1.length; i++) {
|
for (let i=0; i<folders1.length; i++) {
|
||||||
window.treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_" + i,
|
ID: "0_" + i,
|
||||||
ParentID: "root",
|
ParentID: "root",
|
||||||
Name: folders1[i],
|
Name: folders1[i],
|
||||||
@ -186,7 +152,7 @@ function LoadTreeview(){
|
|||||||
];
|
];
|
||||||
|
|
||||||
for (let i=0; i<folders12.length; i++) {
|
for (let i=0; i<folders12.length; i++) {
|
||||||
window.treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_2_" + i,
|
ID: "0_2_" + i,
|
||||||
ParentID: "0_2",
|
ParentID: "0_2",
|
||||||
Name: folders12[i],
|
Name: folders12[i],
|
||||||
@ -200,7 +166,7 @@ function LoadTreeview(){
|
|||||||
];
|
];
|
||||||
|
|
||||||
for (let i=0; i<folders13.length; i++) {
|
for (let i=0; i<folders13.length; i++) {
|
||||||
window.treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_3_" + i,
|
ID: "0_3_" + i,
|
||||||
ParentID: "0_3",
|
ParentID: "0_3",
|
||||||
Name: folders13[i],
|
Name: folders13[i],
|
||||||
@ -215,7 +181,7 @@ function LoadTreeview(){
|
|||||||
];
|
];
|
||||||
|
|
||||||
for (let i=0; i<folders15.length; i++) {
|
for (let i=0; i<folders15.length; i++) {
|
||||||
window.treeview1.AddItem({
|
treeview1.AddItem({
|
||||||
ID: "0_5_" + i,
|
ID: "0_5_" + i,
|
||||||
ParentID: "0_5",
|
ParentID: "0_5",
|
||||||
Name: folders15[i],
|
Name: folders15[i],
|
||||||
@ -223,7 +189,7 @@ function LoadTreeview(){
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.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",
|
||||||
@ -233,15 +199,15 @@ function LoadTreeview(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ClearTreeview() {
|
function ClearTreeview() {
|
||||||
window.treeview1.Clear();
|
treeview1.Clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
function RemoveTreeNode() {
|
function RemoveTreeNode() {
|
||||||
window.treeview1.Remove("0_2");
|
treeview1.Remove("0_2");
|
||||||
}
|
}
|
||||||
|
|
||||||
function FindTreeNode() {
|
function FindTreeNode() {
|
||||||
let treenode = window.treeview1.Find("0_5");
|
let treenode = treeview1.Find("0_5");
|
||||||
|
|
||||||
console.log(treenode);
|
console.log(treenode);
|
||||||
|
|
||||||
@ -249,7 +215,7 @@ function FindTreeNode() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function FindTreeNodesByName() {
|
function FindTreeNodesByName() {
|
||||||
let treenodes = window.treeview1.FindByName("Common Files");
|
let treenodes = treeview1.FindByName("Common Files");
|
||||||
|
|
||||||
console.log(treenodes);
|
console.log(treenodes);
|
||||||
|
|
||||||
@ -257,7 +223,7 @@ function FindTreeNodesByName() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function FindTreeNodesByValue() {
|
function FindTreeNodesByValue() {
|
||||||
let treenodes = window.treeview1.FindByValue("Internet Explorer");
|
let treenodes = treeview1.FindByValue("Internet Explorer");
|
||||||
|
|
||||||
console.log(treenodes);
|
console.log(treenodes);
|
||||||
|
|
||||||
@ -265,7 +231,7 @@ function FindTreeNodesByValue() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GetSelectedTreeNode() {
|
function GetSelectedTreeNode() {
|
||||||
let treenode = window.treeview1.GetSelectedNode();
|
let treenode = treeview1.GetSelectedNode();
|
||||||
|
|
||||||
console.log(treenode);
|
console.log(treenode);
|
||||||
|
|
||||||
@ -273,15 +239,7 @@ function GetSelectedTreeNode() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GetCheckedTreeNodes() {
|
function GetCheckedTreeNodes() {
|
||||||
let treenodes = window.treeview1.GetCheckedNodes();
|
let treenodes = treeview1.GetCheckedNodes();
|
||||||
|
|
||||||
console.log(treenodes);
|
|
||||||
|
|
||||||
alert(JSON.stringify(treenodes));
|
|
||||||
}
|
|
||||||
|
|
||||||
function GetCheckedTags() {
|
|
||||||
let treenodes = window.treeview1.GetCheckedTags();
|
|
||||||
|
|
||||||
console.log(treenodes);
|
console.log(treenodes);
|
||||||
|
|
||||||
@ -289,7 +247,7 @@ function GetCheckedTags() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GetAllTreeNodes() {
|
function GetAllTreeNodes() {
|
||||||
let treenodes = window.treeview1.GetAllNodes();
|
let treenodes = treeview1.GetAllNodes();
|
||||||
|
|
||||||
console.log(treenodes);
|
console.log(treenodes);
|
||||||
|
|
||||||
@ -297,7 +255,7 @@ function GetAllTreeNodes() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function GetCheckedValues() {
|
function GetCheckedValues() {
|
||||||
let treenodes = window.treeview1.GetCheckedValues();
|
let treenodes = treeview1.GetCheckedValues();
|
||||||
|
|
||||||
console.log(treenodes);
|
console.log(treenodes);
|
||||||
|
|
||||||
@ -305,19 +263,19 @@ function GetCheckedValues() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function CollapseAll() {
|
function CollapseAll() {
|
||||||
window.treeview1.CollapseAll();
|
treeview1.CollapseAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
function ExpandAll() {
|
function ExpandAll() {
|
||||||
window.treeview1.ExpandAll();
|
treeview1.ExpandAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
function CheckAll() {
|
function CheckAll() {
|
||||||
window.treeview1.CheckAll(true);
|
treeview1.CheckAll(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function UncheckAll() {
|
function UncheckAll() {
|
||||||
window.treeview1.CheckAll(false);
|
treeview1.CheckAll(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* BBTreeview
|
* BBTreeview
|
||||||
* @version v0.1.0.244 (2023/09/11 2327)
|
* @version v0.1.0.223 (2023/09/08 2027)
|
||||||
*/
|
*/
|
||||||
function BBTreeview(options)
|
function BBTreeview(options)
|
||||||
{
|
{
|
||||||
@ -64,8 +64,7 @@ BBTreeview.prototype.Default = function() {
|
|||||||
TreeviewOptions: {
|
TreeviewOptions: {
|
||||||
ID: null,
|
ID: null,
|
||||||
ShowCheckbox: false,
|
ShowCheckbox: false,
|
||||||
ShowSelection: true,
|
ShowSelection: true
|
||||||
EnablePullUp: false
|
|
||||||
},
|
},
|
||||||
TreeNodeOptions: {
|
TreeNodeOptions: {
|
||||||
ID: null,
|
ID: null,
|
||||||
@ -117,11 +116,6 @@ BBTreeview.prototype.CheckAll = function(value) {
|
|||||||
BBTreeview.prototype.Find = function(id) {
|
BBTreeview.prototype.Find = function(id) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
if (a.Container == null){
|
|
||||||
console.log("BBTreeview container not found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
||||||
@ -217,18 +211,6 @@ BBTreeview.prototype.GetCheckedValues = function() {
|
|||||||
return response;
|
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() {
|
BBTreeview.prototype.GetSelectedNode = function() {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* BBTreeview
|
* BBTreeview
|
||||||
* @version v0.1.0.244 (2023/09/11 2327)
|
* @version v0.1.0.223 (2023/09/08 2027)
|
||||||
*/
|
*/
|
||||||
function BBTreeviewNode(treeview)
|
function BBTreeviewNode(treeview)
|
||||||
{
|
{
|
||||||
@ -43,29 +43,9 @@ BBTreeviewNode.prototype.Check = function(value) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Update parent state
|
// Update parent state
|
||||||
let parentNode = a.GetParentNode();
|
if (a.GetParentNode() != null) {
|
||||||
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;
|
let uncheckedCount = 0;
|
||||||
|
a.GetParentNode().querySelectorAll("li").forEach(function(e) {
|
||||||
parentNode.querySelectorAll("li").forEach(function(e) {
|
|
||||||
if (e.classList.contains("x")) {
|
if (e.classList.contains("x")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -73,7 +53,7 @@ BBTreeviewNode.prototype.Check = function(value) {
|
|||||||
uncheckedCount++;
|
uncheckedCount++;
|
||||||
});
|
});
|
||||||
|
|
||||||
a.setCheckbox(parentNode, (uncheckedCount <= 0));
|
a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user