168 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			168 lines
		
	
	
		
			2.9 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" />
 | 
						|
  <script src="bbtreeview.js"></script>
 | 
						|
  <script 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 with checkboxes</p>
 | 
						|
      <button onclick="CreateTreeview()">Create Treeview</button>
 | 
						|
 | 
						|
    </div>
 | 
						|
    <div class="panel">
 | 
						|
 | 
						|
      <p>Clear treeview</p>
 | 
						|
      <button onclick="ClearTreeview()">Clear Treeview</button>
 | 
						|
 | 
						|
    </div>
 | 
						|
    <div class="panel">
 | 
						|
 | 
						|
      <p>Remove the "Program Files" treenode</p>
 | 
						|
      <button onclick="RemoveTreeNode()">Remove Treenode</button>
 | 
						|
 | 
						|
    </div>
 | 
						|
 | 
						|
 | 
						|
  </div>
 | 
						|
 | 
						|
  <style>
 | 
						|
 | 
						|
body {
 | 
						|
  padding: 20px;
 | 
						|
}
 | 
						|
 | 
						|
.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>
 | 
						|
 | 
						|
 | 
						|
 | 
						|
  <script>
 | 
						|
 | 
						|
var treeview1 = new BBTreeview({
 | 
						|
  ID: "#treeview1",
 | 
						|
  ShowCheckbox: true,
 | 
						|
  ShowSelection: true
 | 
						|
});
 | 
						|
 | 
						|
 | 
						|
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]
 | 
						|
    });
 | 
						|
  }
 | 
						|
 | 
						|
  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]
 | 
						|
    });
 | 
						|
  }
 | 
						|
 | 
						|
  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]
 | 
						|
    });
 | 
						|
  }
 | 
						|
 | 
						|
  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]
 | 
						|
    });
 | 
						|
  }
 | 
						|
 | 
						|
  treeview1.AddItem({
 | 
						|
    ID: "0_2_3_0",
 | 
						|
    ParentID: "0_2_3",
 | 
						|
    Name: "en-GB"
 | 
						|
  });
 | 
						|
}
 | 
						|
 | 
						|
function ClearTreeview() {
 | 
						|
  treeview1.Clear();
 | 
						|
}
 | 
						|
 | 
						|
function RemoveTreeNode() {
 | 
						|
  treeview1.Remove("0_2");
 | 
						|
}
 | 
						|
 | 
						|
  </script>
 | 
						|
 | 
						|
 | 
						|
</body>
 | 
						|
</html> |