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

Question

ユーザー検索を使用して見つかった一連のファイルを表示するためにDynaTreeを使用しているWebアプリケーション（JSPおよびサーブレットとjQuery）があります。もちろん、ユーザーはさまざまな値を入力することができ、その結果一致するファイルのセットが異なります。

だから、私の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（aNode）などを使用する方法を想定していますが、良い例/参考文献は見つかりません。

これを行った人はいますか？ありがとう！

Answer 1

これは機能しています。ここでは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 
      }); 
     });   
     ... 

ここでJSONは（それを見るためにFirebugの>ネット> XHRを使用）応答である：

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

dynatreeプラグインのchildren属性は単純なjSon構造です。 詳細情報なしであなたの質問に答えるのは難しいです。しかし、生成されたhtmlを表示する前にこのjSonデータをサーバサイドで作成するか、ajaxを使用してこのjSonデータを取得することができます。

これを生成するには、目的に応じていくつかの方法があります。

これが理解できない場合は、ノードを動的に作成するときに、より明示的な情報を提供してください。

Answer 3

私はJSONオブジェクトを使用して、Yii2でそれをやりました。サーバー上の

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

と書き込み機能JSONオブジェクトを生成します：

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