jQuery DynaTree - how dynamically create nodes

Question

I have a web app (JSPs and Servlets along with jQuery) that I am using a DynaTree to show a set of files found using a user search. The user can of course put in different values, resulting in a different set of matching files.

So, my Q:

Given that a tree is statically coded thusly in my JSP's JavaScript:

$("#tree").dynatree({
  ...
  children: [
    {title: "Folder 2", isFolder: true, key: "folder2",
      children: [
        {title: "Sub-item 2.1"},
        {title: "Sub-item 2.2"}
      ]
    },
    {title: "Item 3"}
  ]
...

How do I create this structure programmatically? I assume some way to create or access a root and then use addChild( aNode ) or some such, but I don't find a good example/reference.

Has anyone done this ? Thanks!

Answer 1

Got it to work. Here's the jQuery:

    $('#findFiles').click(function() {  // Locate HTML DOM element with ID "findFiless" and assign the following function to its "click" event...
    chosenSite = document.getElementById("siteName").value;
    searchVal = document.getElementById("searchFor").value;
    searchTyp = document.getElementById("searchType").value;
    $.get('FileSearchServlet', {siteName: chosenSite, searchFor: searchVal, searchType: searchTyp}, function(responseJson) {    // Execute Ajax GET request on URL of "FileSearchServlet" and execute the following function with Ajax response JSON...
        //-- toClient
        var resultsToClientNode = $("#tree").dynatree("getTree").selectKey("resultsToClient");
        resultsToClientNode.removeChildren();
        toClientFilenames = responseJson.toClient;  //0-N filenames
        $.each(responseJson.toClient, function() {
            resultsToClientNode.addChild({
              title: this
            });
        });         
       ...

Here's the JSON in the response (use Firebug > Net > XHR to see it):

fromClient
["O_TE015308_XX_343_182754070041.OLD", "O_TE015308_XX_343_182755030040.OLD", "O_TE015308_XX_353_131142014034.OLD"]

toLab
[]

fromLab
[]

toClient
["R_TE015308_XX_340_154659.OLD"]

Answer 2

I did it with Yii2, using json object. I used initAjax option which is used to initialize the tree structure:

<div id="tree"></div>

<script>
$("#tree").dynatree({
    initAjax: {url: global+"companyAdmin/roles-master/get-department-and-menus",},
    checkbox: true,       // Show checkboxes.
    icon:false,
    selectMode: 3,           //3:multi-hier            
});
</script>

And write function on server which generates a JSON object:

public function actionGetDepartmentAndMenus() {
    $responseData = array();
    $responseData['title']='ABC';
    $responseData['id']=1;
    $responseData['expand']=true;
    $responseData['children']['title']='ABC';
    $responseData['children']['id']=1;
    $responseData['children']['expand']=true;
    echo json_encode($responseData);
}

Reference

Answer 3

The children attribute on the dynatree plugin is a simple jSon structure. Hard to answer your question without more information. But you can create this jSon data on serverside before displaying the generated html or you can call something using ajax to get back this jSon data.

There are several ways to generate that, depending on what you want.

If this does not help you understanding that, please provide more explicit information when you want to dynamically create the nodes.