### jQuery UI DynaTree Plugin

The jQuery UI DynaTree plugin provides a powerfull TreeView.
Information:
Home: http://wwwendt.de/tech/dynatree
Samples: http://wwwendt.de/tech/dynatree/doc/samples.html
To get started, read the notes and take a look at the examples first - select view source.
Install (Status 01-May-2014 = look up for any changes since!
Download the latest version (as zip file)
Create for the following sub folders www/jquery and www.src
Copy the from the zip file the folders jquery and src to the www/jquery and www/src folders
The jquery and src folders are referenced in the index.html as below
(again these might have changed, so check the home page and the source examples)
<!-- //DynaTree includes -->
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
The DocType must be to strict as the first line of the HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...
Examples using DynaTree with B4J as WebServer based on WebSockets.
Index.html
Define the dynatree selector
Define the script functions
The data is loaded in a script section by $( document ).ready().
There are various options to load data. Some examples are:
Option 1 Load tree data using a var with JSON structure
var treedata = '['
treedata += '{ "title": "Node 1", "key": "k1"},'
treedata += '{ "title": "Node 2", "key": "k2"},'
treedata += '{ "title": "Folder 1", "isFolder": "true", "key": "f1", "children": [ {"title": "Sub-item 1.1"}, {"title": "Sub-item 1.2"} ]},'
treedata += '{ "title": "Node 3", "key": "k3"},'
treedata += '{ "title": "Folder 2", "isFolder": "true", "key": "f2", "children": [ {"title": "Sub-item 2.1"}, {"title": "Sub-item 2.2"} ]}'
treedata += ']';
$( document ).ready(function() {
$("#tree").dynatree({
// LOad the data
children: jQuery.parseJSON(treedata),
// When clicking on a node, fetch the data and do something with it in b4j
onActivate: function(node) {
// The params map has two keys "title" and "key"
b4j_raiseEvent("treenode_event", {"title": node.data.title, "key": node.data.key});
}
});
// Connect to the B4Jserver
b4j_connect("/ws");
});
Option 2 Load tree data from a local JSON file.
The JSON file is stored in the www folder.
$( document ).ready(function() {
$("#tree").dynatree({
initAjax: {
type: 'GET',
url: 'treedata.json', // this works when the json file is stored in the www folder
},
// When clicking on a node, fetch the data and do something with it in b4j
onActivate: function(node) {
// The params map has two keys "title" and "key"
b4j_raiseEvent("treenode_event", {"title": node.data.title, "key": node.data.key});
}
});
// Connect to the B4JServer
b4j_connect("/ws");
});
In B4J
' Define the Sub for handling the result of the TreeNode click event
' The params map holds two keys "title" and "key" (see also how the JSON file is build up
`Sub TreeNode_Event(Params As Map)
' Show the title and the key in the table content cell
Log("Title:" & Params.Get("title") & ", Key: " & Params.Get("key"))
End Sub`
Additional examples for loading data via TreeNode_Event:
' Option 1
' Add one node
' Build the jquery code and execute using Eval method
Dim sb1 As StringBuilder
sb1.Initialize
sb1.Append("var rootNode = $(""#tree"").dynatree(""getRoot"");")
sb1.Append("var childNode = rootNode.addChild({ ")
sb1.Append(" title: ""Programatically addded nodes 2"",")
sb1.Append("});")
Log(sb1.ToString)
ws.Eval(sb1.ToString, Null)
' Option 2
' Add one folders with two nodes
' Build the jquery code and execute using Eval method
Dim sb2 As StringBuilder
sb2.Initialize
sb2.Append("var rootNode = $(""#tree"").dynatree(""getRoot"");")
' Add new Folder
sb2.Append("var childNode = rootNode.addChild({ ")
sb2.Append(" title: ""Folder X"",")
sb2.Append(" isFolder: true")
sb2.Append("});")
' Add the child nodes
sb2.Append("childNode.addChild({")
sb2.Append(" title: ""Note 1 of Folder X""")
sb2.Append("});")
sb2.Append("childNode.addChild({")
sb2.Append(" title: ""Note 2 of Folder X""")
sb2.Append("});")
Log(sb2.ToString)
ws.Eval(sb2.ToString, Null)
' Option 3
' Add json data from the json file
Dim tr As TextReader
Try
tr.Initialize(File.OpenInput(File.DirApp & "/www/", gstrJSONFile) )
Dim jsonobj As String = tr.ReadAll
Catch
Log("Error loading form from file:" & LastException.Message)
End Try
Dim sb3 As StringBuilder
sb3.Initialize
sb3.Append("var jsonobj = " & jsonobj & ";")
sb3.Append(CRLF)
sb3.Append("$(""#tree"").dynatree(""getRoot"").addChild(jsonobj);")
Database Example

Changed: , Category: WebApps jQuery, File: T6C280M2102.htm, ID: 2102