【问题标题】:jsTree unable to load root nodes from AJAX calljsTree 无法从 AJAX 调用加载根节点
【发布时间】:2016-08-28 05:49:16
【问题描述】:

我无法使用下面的 jsTree 加载初始根节点: 数据在服务器上,必须通过 AJAX 为每个选定的节点“购买”。我还想使用复选框并获取选定节点的所有父节点的值。

现在的主要问题是:我无法列出根节点......

//jsTree
    $('#testTree').jstree({
        'core' : {    
            'data' : {    
                'url' : function (node) {    
                    return node.id === '#' ?    
                    '/cgi-bin/test.pl'  //url for root nodes    
                    '/cgi-bin/test.pl?nodes-in-selected-heirarchy'; //url for children nodes    
            },    
                'data' : function (node) {    
                    console.log('node.id='+node.id);    
                    return { 'id' : node.id };    
                }    
            }    
        }    
    });

这显示的只是一个文件夹图标。

我从服务器获取的JSON 是:

{"5":"summer","8":"vacation","2":"2015","3":"2014","4":"2013","6":"winter","1":"2016","7":"birthday"}

它是key:value, 格式。

这是一个新的修改代码:即使这样也不行......

$('#test').jstree({
    'core': {
        'data':{                                //this is the data provided to the jsTree to draw the tree.
            'url': function( node ){
                if( node.id === '#' ){
                    console.log('1');
                    return "/cgi-bin/test.pl";
                } else {
                    console.log('2');
                    return "/cgi-bin/test.pl?jsTreeParentKey=" + node.data( "key" );
                }
            },
            'data': function(node) {            //the data sent to the server
                console.log('node.id='+node.id);
                return {
                    'id': node.id,
                    'xyz': 'value_xyz'          //extra set of param=value sent to server
                };
            },
            'success': function (retData) {
                data = [];
                for( indx in retData ){
                    var value = retData[indx]
                    console.log('indx=i'+indx+', value='+value);
                    node = {
                        'id' : 'i'+indx,
                        'text' : value,
                        'icon' : '/',
                        //'metadata' :  value,
                        'state' : {'opened' : false}                //'state' : 'closed'
                    }
                    data.push( node );
                }
                return data;
            }
            // "check_callback" : true                    
        }
    },
    "checkbox" : {
        "keep_selected_style" : false
    },
    "plugins" : [ "checkbox","json_data" ]
});

我在日志中得到了这个:

1  <---- from URL
node.id=# <----from param sent

indx=i1, value=2016
indx=i2, value=2015
indx=i3, value=2014
indx=i4, value=2013
indx=i5, value=summer
indx=i6, value=winter
indx=i7, value=birthday
indx=i8, value=vacation

【问题讨论】:

    标签: jquery ajax jstree


    【解决方案1】:

    您的数据格式(从服务器返回的 JSON)不是所需的 jsTree 格式。至少在每个节点上包含 text 属性。

    这里是详细的文档:
    https://github.com/vakata/jstree#the-required-json-format

    【讨论】:

    • 嗨伊万,非常感谢您的审阅!是的,我的数据(而且我更喜欢)以(键,值)对的形式出现。但我认为“成功”例程正在使用它,然后在将其作为“用于构建树的数据”处理给插件之前制作所需的数据格式。不是吗?因为我在“成功”例程中构建的数据数组与网站上对(任何)给定“节点”的要求相匹配。请建议如何处理来自服务器的数据(键,值对),然后再将其传递给插件?
    • 我在别处发现该插件不支持成功例程。所以我会尝试dataFilter,(这是一种'成功'????)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多