jQuery DynaTree - come creare dinamicamente i nodi

Question

Ho una web app (JSP e Servlet con jQuery) che sto usando un DynaTree per mostrare un insieme di file trovati tramite una ricerca utente. L'utente può, ovviamente messo in valori diversi, risultando in un diverso insieme di file corrispondenti.

Quindi, la mia D:

Dato che un albero è staticamente codificato questa convenzione nel mio JSP 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"}
  ]
...

Come faccio a creare tale struttura di programmazione? Presumo un modo per creare o accedere una radice e quindi utilizzare addChild (anodo) o qualcosa del genere, ma non trovo un buon esempio / di riferimento.

Qualcuno ha fatto questo? Grazie!

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.