jQuery的DynaTree - 如何动态地创建节点

Question

我有我使用的是DynaTree显示一组文件的使用用户搜索时发现的Web应用程序（JSP和Servlet和jQuery一起）。当然用户可以在放入不同的值，从而产生一组不同的匹配的文件。

所以，我的问：

由于树是静态在我的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"}
  ]
...

如何编程创建这个结构呢？我假定一些方法来创建或访问一个根，然后使用的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.