jQuery DynaTree - wie dynamisch Knoten erstellen

Question

Ich habe einen Web-App (JSPs und Servlets zusammen mit jQuery), dass ich ein DynaTree bin mit einem Satz von Dateien zu dem gefundenen einer Benutzer-Suche. Der Benutzer kann natürlich in verschiedenen Werten setzen, was zu einem anderen Satz von passenden Dateien.

Also, meine Frage:

Da ein Baum statisch thusly in meinem JSP JavaScript codiert:

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

Wie kann ich diese Struktur programmatisch erstellen? Ich gehe davon aus irgendeiner Weise eine Wurzel zu erstellen oder den Zugriff und verwenden Sie dann addChild (Anode) oder so, aber ich habe kein gutes Beispiel / Referenz finden.

Hat jemand dies getan? Dank!

Answer 1

Got es an die Arbeit. Hier ist die 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
            });
        });         
       ...

Hier ist die JSON in der Antwort (Verwendung Firebug> Net> XHR es sehen):

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

Ich habe es mit Yii2, Json-Objekt. Ich benutzen initAjax Option, die verwendet wird, um die Baumstruktur zu initialisieren:

<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>

Und Schreibfunktion auf dem Server, die ein JSON-Objekt erzeugt:

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);
}

Referenz

Answer 3

Das children Attribut auf dem dynatree Plugin ist eine einfache JSon Struktur. Hart Ihre Frage ohne weitere Informationen zu beantworten. Aber Sie können diese JSON-Daten auf server erstellen, bevor die Anzeige der generierten HTML oder Sie können etwas mit ajax nennen diese JSON-Daten zurück zu erhalten.

Es gibt mehrere Möglichkeiten, das zu erzeugen, je nachdem, was Sie wollen.

Wenn dies nicht hilft, dass das Verständnis, geben Sie bitte explizite Informationen, wenn Sie wollen die Knoten dynamisch erstellen.