339 lines
7.0 KiB
HTML
339 lines
7.0 KiB
HTML
<!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" /> -->
|
|
<link href="src/treeview.css" rel="stylesheet" />
|
|
|
|
<script src="dist/treeview.dist.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>
|
|
<input type="checkbox" id="checkbox1" checked>
|
|
<label for="checkbox1">Show checkbox</label>
|
|
<br>
|
|
|
|
<input type="checkbox" id="checkbox2" checked>
|
|
<label for="checkbox2">Show selection</label>
|
|
<br>
|
|
|
|
<input type="checkbox" id="checkbox3" checked>
|
|
<label for="checkbox3">Show icon</label>
|
|
<br>
|
|
|
|
<input type="checkbox" id="checkbox4">
|
|
<label for="checkbox4">Enable guardian behaviour (a child checks its parent)</label>
|
|
<br>
|
|
|
|
<input type="checkbox" id="checkbox5" checked>
|
|
<label for="checkbox5">Enable cascade checking (check parent when all its children are checked)</label>
|
|
<br>
|
|
|
|
</p>
|
|
<p><button onclick="CreateTreeview()">Create Treeview</button></p>
|
|
|
|
</div>
|
|
<div class="panel">
|
|
|
|
<p>Load sample nodes</p>
|
|
<p></p><button onclick="LoadTreeview()">Load Treeview</button></p>
|
|
|
|
</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();
|
|
LoadTreeview();
|
|
|
|
|
|
function CreateTreeview(){
|
|
|
|
const checkbox1 = document.getElementById("checkbox1").checked;
|
|
const checkbox2 = document.getElementById("checkbox2").checked;
|
|
const checkbox3 = document.getElementById("checkbox3").checked;
|
|
const checkbox4 = document.getElementById("checkbox4").checked;
|
|
const checkbox5 = document.getElementById("checkbox5").checked;
|
|
|
|
window.treeview1 = new LiteRyzJS.Treeview({
|
|
ID: "#treeview1",
|
|
ShowCheckbox: checkbox1,
|
|
ShowSelection: checkbox2,
|
|
ShowIcon: checkbox3,
|
|
EnableGuardian: checkbox4,
|
|
EnableCascade: checkbox5
|
|
});
|
|
|
|
LoadTreeview();
|
|
|
|
window.treeview1.ExpandAll();
|
|
}
|
|
|
|
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> |