[原创]jsTree中的Ajax调用JSON数据方法,jQuery插件jsTree

2017-03-13Javascript4420

我用的jsTree版本是3.3.3

[原创]jsTree中的Ajax调用JSON数据方法,jQuery插件jsTree

这是官网的两个例子:

Using the alternative JSON format

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });


Using AJAX

$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});

第一个例子是用jsTree另外的一种数据格式。

这个格式的好处,不用你在后台转换,children数组的形式。

后台可以偷懒下,并且可以直接循环直接获取数据的id数组。


第二个例子是用AJAX调用数据格式的方法。

例子中只用到两个参数:url,data。

如果遇到比较复杂的JSON数据怎么处理呢?

比如我是用的是ThinkPHP框架,用

$this->success("这里是真正需要的jsTree JSON data");

那么返回的数据格式是{"info":"这里是真正需要的jsTree JSON data","status":1,url:""}

如果直接这样肯定是不行的,因为不符合jsTree的数据格式。

google了一下,发现可以用dataFilter参数。

这样改:

$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    },
    'dataFilter':function (data, type) {
        // 对Ajax返回的原始数据进行预处理
        return data  // 返回处理后的数据
    }
  }
});


看看是不是发现了什么,这不就是jQuery-AJAX的settings选项吗?

然后我试了其他的参数,果然可以。

以后遇到更复杂的数据都可以正确解析成jsTree需要的数据格式了。


分享:

支付宝

微信