jQueryのDynaTree - 動的にノードを作成する方法

Question

私は、一連のファイルを表示するためにDynaTreeを使用していたユーザの検索を使用して見つかったことをウェブアプリ（jQueryを使って一緒にJSPとサーブレット）を持っています。もちろん、ユーザ缶が一致するファイルの異なるセットで、その結果、異なる値に入れます。

だから、私のQます：

ツリーは静的に私のJSPのJavaScriptにthusly符号化されていることを考えるます：

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

どのように私はプログラム的にこの構造体を作成するのですか？私はにaddChild（アノード）、またはそのようないくつかを使用し、次に作成したり、アクセスルートをとするいくつかの方法を想定するが、私は良い例/参照を見つけることができません。

誰もがこれをやっていますか？ありがとう！

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.