jstree,json,ajax:递归搜索和选择

时间:2012-02-03 21:41:20

标签: javascript jquery ajax jstree

我有jstree设置通过ajax和json加载所有内容。脚本是否有可能执行我的ajax / json url并尽可能保持子搜索,如果它发现它打开所有子节点直到它可见并选择它(.jstree-clicked)。内置这样的功能,如果不知道我可以从哪里开始?我不是最流利的javascript。 这是我的设置:

$("#jstFormMirror").jstree({
    "types" : { 
        "types" : { 
            "default" : { 
                "select_node" : function(e) {
                    this.toggle_node(e);
                    return true;
                } 
            }
        } 
    },
    "ui" : {
        "select_limit" : 1,
        "selected_parent_close" : "select_parent"
    },      
    "json_data" : {
        "progressive_unload" : true,
        "ajax" : {
            "url" : "/back-end/json/categories.json",
            "data" : function (n) {
                return { id : n.attr ? n.attr("id") : 0 }; 
            }
        }
    },
    "plugins" : [ "themes", "json_data", "types", "ui" ],
    "core": {
        "animation": 100
    }
}).bind("select_node.jstree", function(event, data) { 
    $("#category").val($(".jstree-clicked").parent().attr("rel"));
})

当脚本加载节点时,他是典型的json响应:

[
    {
        "attr": {
            "id": "87"
        },
        "data": {
            "title": "Bevel Clusters-Over 350 Designs",
            "attr": {
                "href": "#",
                "rel": "658"
            }
        },
        "state": "closed"
    },
    {
        "attr": {
            "id": "394"
        },
        "data": {
            "title": "Bevels, Straight Lines-Over 210 Shapes & Sizes",
            "attr": {
                "href": "#",
                "rel": "321"
            }
        },
        "state": "closed"
    }
]

我想执行:

$("#jstFormCategories").jstree("search", ID_HERE);

1 个答案:

答案 0 :(得分:0)

为此,DefiantJS非常出色(http://defiantjs.com)。 此lib使用方法“search”扩展全局对象JSON,并使您能够使用XPath表达式搜索JSON结构。

要了解XPath(标准化查询语言)的简易程度,请查看此工具; http://www.defiantjs.com/#xpath_evaluator

这是一个工作小提琴;
http://jsfiddle.net/hbi99/vV43F/

var data = [
     {
        "attr": {
           "id": "87"
        },
        "data": {
           "title": "Bevel Clusters-Over 350 Designs",
           "attr": {
              "href": "#",
              "rel": "658"
           }
        },
        "state": "closed"
     },
     {
        "attr": {
           "id": "394"
        },
        "data": {
           "title": "Bevels, Straight Lines-Over 210 Shapes & Sizes",
           "attr": {
              "href": "#",
              "rel": "321"
           }
        },
        "state": "closed"
     }
  ],
  res = JSON.search( data, '//*[id=394]/../data' );

console.log( res[0].title );
相关问题