JsTree Открыть узел, затем выбрать дочерний узел (используя json_result)

Question

У меня проблемы с JsTree, которое я использую в проекте MVC2.Я хотел бы создать функцию для отмены выбора / закрытия всех узлов в дереве.Затем откройте определенный узел и выберите определенный дочерний узел (у меня есть значения Id для обоих).

Проблема в том, что select_node всегда вызывается до завершения open_node, поэтому узел не выбирается, так какдерево еще не загрузило данные, а идентификатор узла не существует.

Сначала я попробовал эту функцию.

$('#demo3').jstree('deselect_all');
$('#demo3').jstree('close_all');
$('#demo3').jstree("open_node", $('#ParentId'), false, true); 
$('#demo3').jstree("select_node", $('#ChildId'));

Затем я попытался переместить код в привязки select_node и move_nodeдерева, но не повезло.В данный момент я застрял, используя setTimeout (), что является ужасным решением.

Кто-нибудь знает, как я могу сказать дереву выбирать узел только после завершения открытия?

Answer 1

Вы можете попробовать передать функцию, которая выбирает узел в качестве обратного вызова, например:

$('#demo3').jstree('open_node', '#ParentID', function(e, data) {
    $('#demo3').jstree('select_node', '#ChildId');
}, true);

Таким образом, select_node будет вызываться, когда open_node вернет успех.

Answer 2

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

каждый узел в нашей настройке похож на веб-страницу, поэтому на домашней странице панели мониторинга есть список недавно отредактированныхстраниц.

каждая из этих ссылок имеет этот javascript для выполнения

<a href="javascript: selectLeftNavNode(339);">Edit</a>

, где 339 - это идентификатор страницы, которую мы хотим редактировать

, и это функция, котораяраньше выполнялся

function selectLeftNavNode(node) {
        $('#demo').jstree('deselect_all');
        $('#demo').jstree('select_node', '#node_' + node);
}

проблема, которую мы недавно заметили, что если недавно отредактированная страница находится глубоко в дереве, более конкретно в разделе, который еще не был загружен, то это приведет к ошибке

thisВот почему я решил сделать ajax-запрос к серверу, чтобы получить приведенный ниже код родительского идентификатора

, в моем случае ajax вернет что-то вроде этого xml

<?xml version="1.0" encoding="UTF-8"?>
<response>
<paths>
<path>339</path>
<path>338</path>
<path>38</path>
</paths>
</response>

ифункция

function selectLeftNavNode(node) {
        $('#demo').jstree('deselect_all');
        if($('#demo').jstree('select_node', '#node_' + node) === false) 
        { 
            // if it is false means that the node is not yet rendered
            // so instead of loading we will require to get list of parent nodes to open in order, then it will become available
            // an ajax call should get us all the nodes
            $.ajax({
                type: "POST",
                dataType: "xml",
                url: your_url_to_php_script',
                data: {node_id:node},
                success: function(data)
                {
                    var remaining_nodes = new Array();
                    var paths_count = $(data).find('response').find('path').length;
                    for(var x=1;x<=paths_count;x++){
                       remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text(); 
                    }

                    open_nodes_step_by_step(remaining_nodes);
                }
            });
        }
    }

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

function open_nodes_step_by_step(remaining_nodes)
{
    var nodes = remaining_nodes.slice();
    tree = jQuery.jstree._focused();
    if(nodes.length > 1){
        var nodes_left = remaining_nodes.slice();
        nodes_left.pop();
        var to_open = nodes.length - 1;
         tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function () {
            open_nodes_step_by_step(nodes_left);
         });
    }
    else{
        tree.select_node('#node_' + nodes[0]); 
    }
} 

Я проверил свое решение с IE8, FF и Chrome, кажется, все работает нормально, наВдобавок ко всему, я использую jQuery v1.10.1 и jsTree 1.0-rc1 (к сожалению, поскольку код существует там уже много лет, и в нем есть вся эта база данных и другие интеграции, я решил не переходить на более новые версии, это работает)

надеюсь, что я кому-то помог

Том

Answer 3

В настоящее время я использую его в проекте MVC4.

если вы сконфигурируете функцию open_node для загрузки узла JSON (в плагине «core» вы устанавливаете load_open в значение true), то новый добавленный узел существует на стороне сервера, но его элемент DOM все еще не потому, что функция open_node не заканчивает свою работу. Поэтому вам нужно подождать или использовать второй параметр (успешный обратный вызов). При обратном вызове новый узел отображается в дереве DOM и его селектор действителен.

Пример конфигурации jsTree:

"core": {
   "open_parents": true,
   "load_open": true
 }

Мой рабочий код:

$("iframe#UploadTarget").load(function () {
  var result = jQuery.parseJSON($(this).contents().text());
  if (result.Result == true) {
     $("#uploadDialog").dialog("close");
     var tree = jQuery.jstree._focused();

     /* 
        open_node will open the parent, get the childs from the server 
        (controller) and renders the new item before the callback executed,
        so the jQuery selector will be valid 
     */

     tree.open_node(result.ParentId,/*CALLBACK*/ function () {
          var newNode = $("#" + result.Id);
          tree.select_node(newNode, false, null);
     });

   } else {
      alert(result.Result + ":" + result.ResultDescription);
   }

});//GOOD LUCK :-)