Не удается получить плагин jQuery jsTree для первоначального выбора узла - PullRequest
Новая
       7

Не удается получить плагин jQuery jsTree для первоначального выбора узла

6 голосов
/ 12 марта 2012

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

Вот мой JQuery: 

$(function () {
    $("#demo1").jstree({ 
        "plugins" : [ "themes","json_data","ui" ],
        "json_data" : {
            "ajax" : {
                "url" : "categorytreejson.asp"
            },
            "ui" : {
                "initially_select" : [ "root" ]
            },
        }
    });
});

Вот мой JSON из categorytreejson.asp, который проверяется с помощью JSONLint: 

{
  "data": "root",
  "attr": {
    "id": "root"
  },
  "children": [
    {
      "data": "Photography",
      "attr": {
        "id": "Photography"
      },
      "children": [
        {
          "data": "Lenses",
          "attr": {
            "id": "Lenses"
          },
          "children": [
            {
              "data": "Telephoto",
              "attr": {
                "id": "Telephoto"
              }
            },
            {
              "data": "Macro",
              "attr": {
                "id": "Macro"
              }
            },
            {
              "data": "Other",
              "attr": {
                "id": "Other"
              }
            }
          ]
        }
      ]
    }
  ]
}

Вот полученный HTML-код: 

<li class="jstree-last jstree-open" id="root"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>root</a>
    <ul style="">
        <li class="jstree-closed" id="Photography"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>Photography</a>
            <ul>
                <li class="jstree-last jstree-closed" id="Lenses"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Lenses</a>
                    <ul>
                        <li class="jstree-leaf" id="Telephoto"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Telephoto</a>
                        </li>
                        <li class="jstree-leaf" id="Macro"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Macro</a>
                        </li>
                        <li class="jstree-last jstree-leaf" id="Other"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Other</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
</li>
</ul>
</li>
</ul>
</li>

И полученный объект данных просматривается firebug: 

args: []
inst: Object { data={...}, get_settings=function(), _get_settings=function(), more...}
rlbk: false
rslt: undefined

Я предполагаю, что большая часть проблемы в том, что результат пуст, но я не уверен, почему?

Ответы [ 3 ]

4 голосов
/ 12 марта 2012

Вы помещаете конфигурацию плагина пользовательского интерфейса в конфигурацию плагина json_data.
Вам нужно вынуть ее, и она будет работать.

    "json_data" : {
        "ajax" : {
            "url" : "categorytreejson.asp"
        }
    },
    "ui" : {
        "initially_select" : [ "root" ]
    }
1 голос
/ 19 января 2016

В функции связывания jstree добавьте следующую строку, чтобы выбрать последний узел при загрузке дерева- 

$('#tree_id').jstree('select_node', 'ul > li:last');

Чтобы всегда выбирать первый узел, используйте- 

$('#tree_id').jstree('select_node', 'ul > li:first');

1007 * ПРИМЕР- * 

$('#tree_id').bind("loaded.jstree", function(e, data) {
    $(this).jstree("open_all");
    $('#tree_id').jstree('select_node', 'ul > li:last');
})
0 голосов
/ 29 декабря 2014

@ Ответ Жейлемана намного лучше моего, но я подумал, что было бы интересно поделиться другим способом решения этой проблемы:

на документе готово, я сделал это с использованием событий jstree: 

 var i = 0;
            $.each($("#container").jstree()._model.data, function (value, index) {
                if (i == 1) {
                    $("#container").jstree(true).select_node(value, false, false);
                    $("#container").jstree(true).open_node(value);
                    return false;
                }  
                i++;
            })
...