Вопрос по jquery – Попытка перезагрузить / обновить dynatree новыми данными

4

Я видел этовопрос уже, и я попробовал данное решение (используйте tree.reload ()), но оно не работает для меня. У меня есть дерево, которое инициализируется при готовности документа с использованием initAjax (), и я пытаюсь перезагрузить дерево, используя разные значения, при изменении входных данных выбора. В основном это:

$(document).ready(function(){
    // global variables
    var myVal = 'initial value';

    // initialize tree
    $('#tree').dynatree({
        persist: false,
        initAjax: {
            url: 'getMyStuff.cfc',
            data: { myParam: myVal }
        },
        ... more params
    )};

    // select change handler
    $('#mySelect).change(function(){
        var tree = $('#tree').dynatree('getTree');
        myVal = $(this).find('option:selected').val();
        tree.reload();           
    )};
)};

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

Я пытался изменить область видимости переменных, я пытался поместить параметры dynatree в отдельную переменную, я пытался вызвать

$('#tree').children().remove();
$('#tree').dynatree(treeoptions);

внутри функции change () я пытался вызвать tree.initialize () (да, я знаю, что это конструктор sa), я пробовал tree.redraw (), я пытался установить опцию initAjax отдельно перед вызовом reload (), и я застрял.

Есть идеи?

В этот момент я решил, что единственное, что нужно сделать, это поместить инициализацию дерева в функцию, а при изменении опции выбора сдуть дерево (включая его родительский div) и перестроить его. Я буду удивлен, если это действительно так, что нет другого способа перестроить дерево с новыми данными, что противоречит моему опыту работы с другими виджетами.

Ваш Ответ

3   ответа
7

$('.tree').dynatree('destroy'); 
$('.tree').empty(); 

Здесьоригинальная ссылка.

У вас может не быть класса дерева в Dynatree DIV, поэтому лучше выбрать его по id $ ("# tree")
2

Я хотел инициализировать блок с помощью json по умолчанию, а затем по нажатию кнопки, я хотел обновить его с сервера, Это то, что я сделал. Intially,         var treeData = [{title: & quot; Демонстрация динамического дерева & quot ;, isFolder: false, подсказка: & quot; Вот ваше динамическое дерево! & quot; }];

jQuery(document).ready(function() {
    initReqActions(treeData);   
});

initReqActions= function(myTree){
    $("#dynaTree").dynatree({
        checkbox: false,            
        selectMode: 2,
         // create IDs for HTML elements that are generated
          generateIds: true, 
          cookie: {
              expires :-1  
          },    
        children: myTree,           
        onQuerySelect: function(select, node) {
            if( node.data.isFolder )
                return false;
        },
        onSelect: function(select, node) {
            // Display list of selected nodes
            var selNodes = node.tree.getSelectedNodes();
            // convert to title/key array
            //var selKeys = $.map(selNodes, function(node){
            //     return "[" + node.data.key + "]: '" + node.data.title + "'";
            //});
            //$("#echoSelection4").text(selKeys.join(", "));
        },
        onClick: function(node, event) {
            if( ! node.data.isFolder )
                node.toggleSelect();
        },
        onDblClick: function(node, event) {
            node.toggleExpand();
        },
        onKeydown: function(node, event) {
            if( event.which == 32 ) {
                node.toggleSelect();
                return false;
            }
        }

    });
}

Затем, когда кнопка нажата

        jQuery(document).ready(function() {
      $("#RefreshButton").click(function() {           
       $("#dynaTree").dynatree("option", "initAjax", {
          url: "refreshTree",
          dataType: "json"

       });

      $("#dynaTree").dynatree("option", "children", null);          
      $("#dynaTree").dynatree("getTree").reload();
     });

    });
10

как перезагрузить / обновить / переустановить DynaTree?

Мое решение не требует обходных путей, таких как empty (), destroy () и т. Д. Подумайте об этом:   Когда Dynatree создан, вы указываете словарь настроек, которые он должен использовать. Однако, поскольку это словарь конфигурации, он не будет переоценен, даже если некоторые параметры являются переменными и изменяются в результате щелчков и т. Д.  Поэтому, чтобы решить эту проблему и избежать дорогостоящих операций, таких как удаление DOM и воссоздание, мы делаем это так, как я думаю, разработчики Dynatree имеют это намерение (но не очень четко задокументировано в примере AJAX / JSON):

  //The HTML:
      <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
      <label id="mylabel"></label>

  $("#checkbox").click(function() {
    $("#mylabel").text($(this).is(":checked"))
    $("#tree").dynatree("option", "initAjax", {
             url: "myurl/myphp.php",
             data: {
                myparameter: $("#checkbox").is(":checked").toString()
             }
     });

    $("#tree").dynatree("getTree").reload();
  });

Этот пример устанавливает конфигурацию на #tree при каждом нажатии кнопки, а затем перезагружает дерево.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы