Question

我有一个Web应用程序（JSP和Servlet以及jQuery），我使用DynaTree来显示使用用户搜索找到的一组文件。用户当然可以输入不同的值，从而产生不同的匹配文件集。

所以，我的问：

鉴于树在我的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（aNode）或其他一些，但我找不到一个好的示例/参考。

有人这样做过吗？谢谢！

Answer 1

我是用Yii2做的，使用了json对象。我使用了initAjax选项来初始化树结构：

<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

Answer 2

让它发挥作用。这是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＆gt; Net＆gt; 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 3

children插件上的dynatree属性是一个简单的jSon结构。没有更多信息，很难回答你的问题。但是您可以在显示生成的html之前在服务器端创建此jSon数据，或者您可以使用ajax调用某些内容来获取此jSon数据。

根据您的需要，有几种方法可以生成它。

如果这对您无法理解，请在动态创建节点时提供更明确的信息。

jQuery DynaTree - 如何动态创建节点

3 个答案: