jquery-plugins – 如何在jsTree中调用json ajax

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

我的问题是：

>如何使ajax调用工作,以便返回值显示在jsTree中？它工作得很好here – 搜索使用数据和& 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","children" : [ "login",{"data" : "results","state" : "closed"} ]
                                                                    },{
                "data" : "Basics","something","state" : "closed"} ]
                    }    ]
                    },{
                        "data" : "All","children" : [ {
                "data" : "AddCustomer","Add","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也无法正常工作.我想我错过了什么……

解决方法

尽量不要从服务器到另一台服务器进行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/

jquery-plugins – 如何在jsTree中调用json ajax

解决方法

相关文章