如何在jsTree中进行json ajax调用

发布于 2024-11-19 22:24:45 字数 3084 浏览 4 评论 0原文

我想进行 ajax 调用来获取 results 节点的数据。在我的示例代码中 (参见此处) 进行了 ajax 调用，但服务器没有返回任何内容（使用 firebug 进行测试）但是如果我在网络浏览器中使用相同的 url，我可以保存 json 文件。

我的问题是：

如何使 ajax 调用正常工作，以便返回值显示在 jsTree 中？它在此处工作得很好 - 搜索使用数据和数据ajax配置选项
如何传递ajax调用参数
- 其中一个是父/父名称（第一个结果节点的基本）
- 第二个是父节点的名称（第一个结果节点的登录）

请参阅下面的代码或使用 fiddle

<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 复制到 <一个href="http://jsfiddle.net/radek/G789k/1/" rel="noreferrer">jsfiddle 它不会工作。我想我在某个地方遗漏了一些东西......

原文

I want to make ajax call to get data for results nodes. In my sample code (see here) the ajax call is made but the server doesn't return any thing (tested using firebug) But if I use the same url in a web browser I can save the json file.

My questions are:

how to make the ajax call to work so the return values are displayed in jsTree? It works nicely here - search for 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 )
- second one would be the parent node's name ( login for the first results node)

See my code below or use the fiddle

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

Update 1

Even I copy the sample code from jstree.com into jsfiddle it won't work. I guess I am missing something somewhere....

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落在眉间の轻吻 2024-11-26 22:24:45

尽量不要从您的服务器向另一台服务器进行 Ajax 调用 - 这将导致跨域安全异常。有多种方法可以解决这个问题（JSONP），但从您自己的服务器请求数据更简单。

一旦您整理好 ajax 请求，您可能需要向“结果”节点添加一些属性，以便 ajax 具有可以挂钩的一些数据，例如 ID。例如：

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

Try not to make Ajax calls from your server to another server - this will result in a cross-domain security exception. There are ways around it (JSONP) but it is simpler to just request data from your own server.

Once you've sorted out your ajax request, you probably want to add some attributes to your "results" nodes so that the ajax has some data it can hook into, e.g. IDs. Something like:

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

Then you can add a handler for the ajax data option:

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

        };
    }
}

This should result in an Ajax request such as: http://myserver/my/local/json/?parent=login&grandparent=Basics&id=123

Hope that helps.

Edit: here's an updated JsFiddle for you: http://jsfiddle.net/robgallen/3uCX3/

回复收藏 0 原文

~没有更多了~