如何在jsTree中调用json ajax

Question

如何在jsTree中调用json ajax

Rad*_*dek 6 jquery jquery-plugins jstree

我想进行ajax调用以获取results节点的数据.在我的示例代码(见这里)中进行了ajax调用,但服务器没有返回任何东西(使用firebug测试)但是如果我在Web浏览器中使用相同的url,我可以保存json文件.

我的问题是:

如何使ajax调用工作,以便返回值显示在jsTree中？它在这里很好用- 搜索Using both the data & ajax config options
如何传递ajax调用参数
- 一个将是父/母名(基本为所述第一结果节点)
- 第二个是父节点的名称(第一个结果节点的登录名)

请参阅下面的代码或使用小提琴

<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>

Run Code Online (Sandbox Code Playgroud)

更新1

即使我将示例代码从jstree.com复制到jsfiddle也无法正常工作.我想我错过了什么......

Answer 1

Spa*_*key 12

尽量不要从服务器到另一台服务器进行Ajax调用 - 这将导致跨域安全性异常.有很多方法(JSONP),但只是从您自己的服务器请求数据更简单.

一旦你整理了你的ajax请求,你可能想要为你的"结果"节点添加一些属性,以便ajax有一些可以挂钩的数据,例如ID.就像是:

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

Run Code Online (Sandbox Code Playgroud)

然后,您可以为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,

        };
    }
}

Run Code Online (Sandbox Code Playgroud)

这应该导致Ajax请求,例如:http:// myserver/my/local/json /？parent = login&grandparent = Basics&id = 123

希望有所帮助.

编辑:这是一个更新的JsFiddle给你:http://jsfiddle.net/robgallen/3uCX3/

这是因为网格在A标签和UL标签之间添加了一些div.尝试使用.siblings('a')而不是.prev('a')来表示两个变量p&gp. (2认同)
它不是测试布尔值,而是测试n.attr不是null或未定义,所以只要它返回一些东西(在这种情况下是一个函数)它就会传递条件.基本上是确保当你调用n.attr("id")时它不会爆炸. (2认同)

归档时间：	14 年，6 月前
查看次数：	16402 次
最近记录：	14 年，6 月前