literyzjs-treeview/demo-test.html

286 lines
5.4 KiB
HTML
Raw Normal View History

2023-09-10 01:06:33 +00:00
<!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="" />
2023-09-10 15:59:33 +00:00
<!-- <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" /> -->
2023-09-10 01:06:33 +00:00
2023-09-10 15:59:33 +00:00
<!-- <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.min.js"></script>
2023-09-10 01:06:33 +00:00
<title></title>
</head>
<body>
<div class="column">
2023-09-10 01:06:33 +00:00
<div id="treeview1"></div>
2023-09-10 01:06:33 +00:00
</div>
<div class="column">
<div class="panel">
2023-09-10 01:06:33 +00:00
<p>Create demo treeview with checkboxes and selection enabled</p>
<button onclick="CreateTreeview()">Create Treeview</button>
2023-09-10 01:06:33 +00:00
</div>
<div class="panel">
2023-09-10 01:06:33 +00:00
<p>Clear treeview</p>
<button onclick="ClearTreeview()">Clear Treeview</button>
2023-09-10 01:06:33 +00:00
</div>
<div class="panel">
2023-09-10 01:06:33 +00:00
<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>
</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>
<style>
body {
padding: 20px;
2023-09-10 01:06:33 +00:00
}
.column {
width: 50%; min-height:400px; float: left
}
.panel {
border-color:black;
border-style: solid;
border-width: 0 0 1px 0;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
}
</style>
2023-09-10 01:06:33 +00:00
<script>
var treeview1 = new BBTreeview({
ID: "#treeview1",
ShowCheckbox: true,
ShowSelection: true
2023-09-10 01:06:33 +00:00
});
function CreateTreeview(){
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++) {
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++) {
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++) {
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++) {
treeview1.AddItem({
ID: "0_5_" + i,
ParentID: "0_5",
Name: folders15[i],
Value: folders15[i]
});
}
treeview1.AddItem({
ID: "0_2_3_0",
ParentID: "0_2_3",
Name: "en-GB",
Value: "en-GB",
Tag: { test: "hello momo" }
});
}
function ClearTreeview() {
treeview1.Clear();
}
function RemoveTreeNode() {
treeview1.Remove("0_2");
}
2023-09-10 01:06:33 +00:00
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);
}
2023-09-10 01:06:33 +00:00
</script>
</body>
</html>