Treeview with folders only
basictreeview
Console
PMA.UI version: 2.43.3
Tree view example showing how to only show folders.
treeview_folders.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_folders.js"></script>
19 <link href="./css/treeview_folders.css" type="text/css" rel="stylesheet">
20
21 <title>Treeview with folders only</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_folders.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_folders.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var treeviewElementSelector = "#treeview";
6var caller = "DemoPortal";
7
8jQuery(function () {
9 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
10
11 // Create a context
12 var context = new PMA.UI.Components.Context({ caller: caller });
13
14 // Add an autologin authentication provider
15 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
16
17 // Create a tree view that will display the contents of PMA.core servers
18 var tree = new PMA.UI.Components.Tree(context, {
19 servers: [
20 {
21 name: "PMA.core v2.x",
22 url: serverUrl,
23 // Show only folders, no slides
24 showFiles: false,
25 }
26 ],
27 element: treeviewElementSelector,
28 });
29
30 // Alternative way to show only folders, no slides
31 tree.setFilesVisibility(serverUrl, false);
32
33 // Listen for the slide selected event by the tree view
34 tree.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
35 console.log("Slide selected");
36 console.log(args);
37 });
38
39 // Listen for the directory selected event by the tree view
40 tree.listen(PMA.UI.Components.Events.DirectorySelected, function (args) {
41 console.log("Directory selected");
42 console.log(args);
43 });
44
45 // Listen for the server selected event by the tree view
46 tree.listen(PMA.UI.Components.Events.ServerSelected, function (args) {
47 console.log("Server selected");
48 console.log(args);
49 });
50
51 // Listen for the multiple selected event by the tree view
52 tree.listen(PMA.UI.Components.Events.MultiSelectionChanged, function (args) {
53 console.log("Multiple selected");
54 console.log(args);
55 });
56
57 // Listen for the double click event by the tree view
58 tree.listen(PMA.UI.Components.Events.TreeNodeDoubleClicked, function (args) {
59 console.log("Double click on node");
60 console.log(args);
61 });
62
63 // Listen for the server expanded event by the tree view
64 tree.listen(PMA.UI.Components.Events.ServerExpanded, function (args) {
65 console.log("Server expanded");
66 console.log(args);
67 });
68
69 // Listen for the directory expanded event by the tree view
70 tree.listen(PMA.UI.Components.Events.DirectoryExpanded, function (args) {
71 console.log("Directory expanded");
72 console.log(args);
73 });
74
75 // Listen for the search finished event by the tree view
76 tree.listen(PMA.UI.Components.Events.SearchFinished, function (args) {
77 console.log("Search finished");
78 console.log(args);
79 });
80
81 // Listen for the search failed event by the tree view
82 tree.listen(PMA.UI.Components.Events.SearchFailed, function (args) {
83 console.log("Search failed");
84 console.log(args);
85 });
86});