JQuery DynaTree - как динамически создавать узлы - PullRequest
Новая
       3

JQuery DynaTree - как динамически создавать узлы

0 голосов
/ 12 января 2012

У меня есть веб-приложение (JSP и сервлеты вместе с jQuery), которое я использую DynaTree, чтобы показать набор файлов, найденных с помощью пользовательского поиска. Пользователь, конечно, может ввести разные значения, что приведет к другому набору подходящих файлов.

Итак, мой вопрос:

Учитывая, что дерево статически кодируется таким образом в JavaScript моего JSP: 

$("#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) или что-то подобное, но я не могу найти хороший пример / ссылку.

Кто-нибудь делал это? Спасибо!

Ответы [ 3 ]

2 голосов
/ 28 августа 2017

Я сделал это с 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);
}

Ссылка

1 голос
/ 18 января 2012

Получил это на работу. Вот 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> Net> 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"]
0 голосов
/ 12 января 2012

Атрибут children в плагине dynatree представляет собой простую структуру jSon.Трудно ответить на ваш вопрос без дополнительной информации.Но вы можете создать эти данные jSon на стороне сервера перед отображением сгенерированного html или вы можете вызвать что-нибудь, используя ajax, чтобы получить эти данные jSon.

Существует несколько способов генерировать их в зависимости от того, что вы хотите.

Если это не поможет вам понять это, пожалуйста, предоставьте более точную информацию, если вы хотите динамически создавать узлы.

...