Treeview with checkboxes
basictreeview
Console
PMA.UI version: 2.43.3
Tree view example showing how to show checkboxes.
treeview_checkboxes.html
1<!doctype >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries downloaded or from CDN -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include PMA.UI script & css -->
14 <script src="./pma.ui/pma.ui.js"></script>
15 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17 <!-- Include custom script & css -->
18 <script src="./js/treeview_checkboxes.js"></script>
19 <link href="./css/treeview_checkboxes.css" type="text/css" rel="stylesheet">
20
21 <title>Treeview with checkboxes</title>
22</head>
23
24<body>
25 <!-- The element that will host the treeview -->
26 <div id="treeview"></div>
27</body>
28
29</html>treeview_checkboxes.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#treeview
10{
11 height: calc(100vh - 6px);
12}
treeview_checkboxes.js
1// Initial declarations
2var serverName = "PMA.core v2.x";
3var serverUrl = "https://host.pathomation.com/pma.core.2/";
4var serverUsername = "PMA_UI_demo";
5var serverPassword = "PMA_UI_demo";
6var treeviewElementSelector = "#treeview";
7var caller = "DemoPortal";
8var tree = null;
9var initialPath = "Reference/Aperio";
10
11jQuery(function () {
12 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
13
14 // Create a context
15 var context = new PMA.UI.Components.Context({ caller: caller });
16
17 // Add an autologin authentication provider
18 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
19
20 // Create a tree view that will display the contents of PMA.core servers
21 tree = new PMA.UI.Components.Tree(context, {
22 servers: [
23 {
24 name: serverName,
25 url: serverUrl,
26 }
27 ],
28 element: treeviewElementSelector,
29 // Allow multi selection of files with checkboxes
30 checkboxes: true,
31 });
32
33 tree.navigateTo(serverName + "/" + initialPath);
34
35 // Listen for the slide selected event by the tree view
36 tree.listen(PMA.UI.Components.Events.SlideSelected, function () {
37 console.log("Slide selected");
38 console.log(tree.getSelectedSlide());
39 });
40
41 // Listen for the directory selected event by the tree view
42 tree.listen(PMA.UI.Components.Events.DirectorySelected, function () {
43 console.log("Directory selected");
44 console.log(tree.getSelectedDirectory());
45 });
46
47 // Listen for the server selected event by the tree view
48 tree.listen(PMA.UI.Components.Events.ServerSelected, function () {
49 console.log("Server selected");
50 console.log(args);
51 });
52
53 // Listen for the multiple selected event by the tree view
54 tree.listen(PMA.UI.Components.Events.MultiSelectionChanged, function () {
55 console.log("Multiple selected");
56 console.log(tree.getMultiSelection());
57 });
58
59 // Listen for the double click event by the tree view
60 tree.listen(PMA.UI.Components.Events.TreeNodeDoubleClicked, function (args) {
61 console.log("Double click on node");
62 console.log(args);
63 });
64
65 // Listen for the server expanded event by the tree view
66 tree.listen(PMA.UI.Components.Events.ServerExpanded, function (args) {
67 console.log("Server expanded");
68 console.log(args);
69 });
70
71 // Listen for the directory expanded event by the tree view
72 tree.listen(PMA.UI.Components.Events.DirectoryExpanded, function (args) {
73 console.log("Directory expanded");
74 console.log(args);
75 });
76
77 // Listen for the search finished event by the tree view
78 tree.listen(PMA.UI.Components.Events.SearchFinished, function (args) {
79 console.log("Search finished");
80 console.log(args);
81 });
82
83 // Listen for the search failed event by the tree view
84 tree.listen(PMA.UI.Components.Events.SearchFailed, function (args) {
85 console.log("Search failed");
86 console.log(args);
87 });
88});