Как сделать вызов json ajax в jsTree

Я хочу сделать вызов ajax, чтобы получить данные для узлов results. В моем примере кода (см. здесь) выполняется вызов ajax, но сервер ничего не возвращает (проверено с помощью firebug) Но если я использую тот же URL-адрес в веб-браузере, я могу сохранить файл json.

Мои вопросы:

  • как заставить работать вызов ajax, чтобы возвращаемые значения отображались в jsTree? Это прекрасно работает здесь — найдите Using both the data & ajax config options
  • how to pass the ajax call parameters
    • one would be the parent/parent name ( basics for the first results node )
    • вторым будет имя родительского узла ( логин для первого узла результатов)

Посмотрите мой код ниже или используйте скрипту.

<html>
  <head>
    <title>jsTree & ajax</title>

<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>

    <script type='text/javascript'>
        data = [
                    {
                        "data" : "Basics",
                        "state" : "closed",
                                            "children" : [ {
                                                                "data" : "login",
                                                                    "state" : "closed",
                                                                    "children" : [ "login", {"data" : "results", "state" : "closed"} ]
                                                                    }   , 
                {
                "data" : "Basics",
                    "state" : "closed",
                    "children" : [ "login", "something",{"data" : "results", "state" : "closed"} ]
                    }    ]
                    },
                    {
                        "data" : "All",
                        "state" : "closed",
                "children" : [ {
                "data" : "AddCustomer",
                    "state" : "closed",
                    "children" : [ "login","Add", {"data" : "results", "state" : "closed"} ]
                    }   ]
                    }
                ]
$(function () {
        $("#jstree").jstree({
            "json_data" : {
                "data" : data ,
                "ajax" : { "url" : "http://www.jstree.com/static/v.1.0pre/_docs/_json_data.json" }
            },
            "plugins" : [ "themes", "json_data" ]
        });
    });
    </script>
  </head>
  <body>
<div id="jstree"></div>
  </body>
</html>

Обновление 1

Даже если я скопирую пример кода с jstree.com в jsfiddle, он не будет работать. Я видимо что-то где-то упускаю....


jquery jquery-plugins jstree
person Radek    schedule 15.07.2011    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Старайтесь не совершать Ajax-вызовы со своего сервера на другой сервер — это приведет к исключению междоменной безопасности. Есть способы обойти это (JSONP), но проще просто запросить данные с вашего собственного сервера.

После того, как вы разобрались со своим запросом ajax, вы, вероятно, захотите добавить некоторые атрибуты в свои узлы «результаты», чтобы у ajax были некоторые данные, к которым он мог бы подключиться, например. идентификаторы. Что-то вроде:

"data": "results", "state": "closed", "attr": { "id": "node-123" }

Затем вы можете добавить обработчик для параметра данных ajax:

"ajax": {
    "url": "/my/local/json/",
    "data": function(n) {
        // get parent / grandparent node
        var lists = $(n).parents('ul');
        var p = $(lists[0]).prev('a');
        var gp = $(lists[1]).prev('a');
        // the result is fed to the AJAX request 'data' option
        return {
            "parent": $.trim(p.text()),
            "grandparent": $.trim(gp.text()),
            "id": n.attr ? n.attr("id").replace("node-", "") : 1,

        };
    }
}

Это должно привести к запросу Ajax, например: http://myserver/my/local/json/?parent=login&grandparent=Basics&id=123

Надеюсь, это поможет.

Изменить: вот вам обновленный JsFiddle: http://jsfiddle.net/robgallen/3uCX3/

person Space Monkey    schedule 18.07.2011
comment
Есть идеи, почему, когда я использую jsTreeGrid, ваш код не дает мне имя родителя, бабушки и дедушки? jsfiddle.net/radek/Dax4D/1 - person Radek; 19.07.2011
comment
Это потому, что сетка добавляет несколько разделов между тегом A и тегом UL. Попробуйте использовать .siblings('a') вместо .prev('a') для двух переменных p и gp. - person Space Monkey; 19.07.2011
comment
Ты прав. Все работает как хотелось. Большое спасибо за вашу помощь. - person Radek; 20.07.2011
comment
Я не понимаю этого "id": n.attr ? n.attr("id").replace("node-", "") : 1,, не могли бы вы объяснить? Я думал, что вы проверяете, существует ли атрибут, а затем изменяете его, иначе установите значение 1. Но я не уверен в этом. - person Radek; 20.07.2011
comment
Да, этот код в основном с сайта jstree. Это поворотный ключ, поэтому вместо него можно было бы написать оператор if/else. Он просто проверяет, существует ли n.attr (как функция/свойство), прежде чем извлекать атрибут id и удалять из него node-, чтобы он имел только номер id. Это то, что отправляется в строке запроса. - person Space Monkey; 20.07.2011
comment
Но console.log(n.attr); возвращает текст function(), ничего похожего на истину, как я ожидал бы от условия. - person Radek; 21.07.2011
comment
Это не проверка логического значения, а проверка того, что n.attr не является нулевым или неопределенным, поэтому, пока он что-то возвращает (в данном случае функцию), он проходит условие. В основном это делается для того, чтобы убедиться, что при вызове n.attr(id) он не взорвется. - person Space Monkey; 21.07.2011
comment
as long as it returns something - вау. Спасибо за объяснение. - person Radek; 22.07.2011
comment
Обновленная ссылка на скрипку ничего не показывает в результатах. - person Yash Saraiya; 29.06.2016