<!doctype html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- <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="bbtreeview.css" rel="stylesheet" /> -->
<link href="build/bbtreeview.min.css" rel="stylesheet" />
<!-- <script src="bbtreeview.min.js"></script> -->
<script src="src/bbtreeview.js"></script>
<script src="src/bbtreeviewnode.js"></script>
<title></title>
</head>
<body>
<div class="column">
<div id="treeview1"></div>
</div>
<div class="column">
<div class="panel">
<p>Create demo treeview</p>
<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>
<p><button onclick="CreateTreeview(4)">Create Treeview (No Checkbox, No Icons, 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>
<p>
<button onclick="ClearTreeview()">Clear Treeview</button>
<button onclick="RemoveTreeNode()">Remove Treenode</button>
</p>
</div>
<div class="panel">
<p>Find a treenode</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>
<button onclick="GetCheckedTags()">Get Checked Treenode Tags</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>
<style>
body {
padding: 10px;
}
.column {
float: left;
min-height: 400px;
width: 50%;
}
.panel {
border-color:black;
border-style: solid;
border-width: 0 0 1px 0;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
}
</style>
<script>
CreateTreeview(1);
LoadTreeview();
function CreateTreeview(value){
switch (value) {
case 1:
window.treeview1 = new BBTreeview({
ID: "#treeview1",
ShowCheckbox: true,
ShowSelection: true
});
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;
case 4:
window.treeview1 = new BBTreeview({
ID: "#treeview1",
ShowCheckbox: false,
ShowSelection: true,
EnablePullUp: false,
ShowIcon: false
});
break;
default:
break;
}
LoadTreeview();
}
function LoadTreeview(){
window.treeview1.AddItem({
ID: "root",
Name: "C:\\"
});
let folders1 = [
"AndroidSDK",
"Game Files",
"Program Files",
"Program Files (x86)",
"Users",
"Windows"
];
for (let i=0; i<folders1.length; i++) {
window.treeview1.AddItem({
ID: "0_" + i,
ParentID: "root",
Name: folders1[i],
Value: folders1[i]
});
}
let folders12 = [
"7-Zip",
"Common Files",
"Git",
"Internet Explorer",
"MSBuild"
];
for (let i=0; i<folders12.length; i++) {
window.treeview1.AddItem({
ID: "0_2_" + i,
ParentID: "0_2",
Name: folders12[i],
Value: folders12[i]
});
}
let folders13 = [
"Common Files",
"Internet Explorer"
];
for (let i=0; i<folders13.length; i++) {
window.treeview1.AddItem({
ID: "0_3_" + i,
ParentID: "0_3",
Name: folders13[i],
Value: folders13[i]
});
}
let folders15 = [
"System",
"System32",
"Temp"
];
for (let i=0; i<folders15.length; i++) {
window.treeview1.AddItem({
ID: "0_5_" + i,
ParentID: "0_5",
Name: folders15[i],
Value: folders15[i]
});
}
window.treeview1.AddItem({
ID: "0_2_3_0",
ParentID: "0_2_3",
Name: "en-GB",
Value: "en-GB",
Tag: { test: "hello momo" }
});
}
function ClearTreeview() {
window.treeview1.Clear();
}
function RemoveTreeNode() {
window.treeview1.Remove("0_2");
}
function FindTreeNode() {
let treenode = window.treeview1.Find("0_5");
console.log(treenode);
alert(JSON.stringify(treenode));
}
function FindTreeNodesByName() {
let treenodes = window.treeview1.FindByName("Common Files");
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function FindTreeNodesByValue() {
let treenodes = window.treeview1.FindByValue("Internet Explorer");
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function GetSelectedTreeNode() {
let treenode = window.treeview1.GetSelectedNode();
console.log(treenode);
alert(JSON.stringify(treenode));
}
function GetCheckedTreeNodes() {
let treenodes = window.treeview1.GetCheckedNodes();
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function GetCheckedTags() {
let treenodes = window.treeview1.GetCheckedTags();
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function GetAllTreeNodes() {
let treenodes = window.treeview1.GetAllNodes();
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function GetCheckedValues() {
let treenodes = window.treeview1.GetCheckedValues();
console.log(treenodes);
alert(JSON.stringify(treenodes));
}
function CollapseAll() {
window.treeview1.CollapseAll();
}
function ExpandAll() {
window.treeview1.ExpandAll();
}
function CheckAll() {
window.treeview1.CheckAll(true);
}
function UncheckAll() {
window.treeview1.CheckAll(false);
}
</script>
</body>
</html>