javascript - jsTree扩展时如何延迟加载节点？

Question

我有这个 js 代码来使用 jsTree 插件创建一棵树。

    var n2 = {
          id          : "B", // will be autogenerated if omitted
          text        : "B", // node text
          icon        : undefined, // string for custom
          state       : {
            opened    : false,  // is the node open
            disabled  : false,  // is the node disabled
            selected  : false  // is the node selected
          },
          children    : [],  // array of strings or objects
          li_attr     : {},  // attributes for the generated LI node
          a_attr      : {},  // attributes for the generated A node 
        };
    var n1 = {
          id          : "A", // will be autogenerated if omitted
          text        : "A", // node text
          icon        : undefined, // string for custom
          state       : {
            opened    : false,  // is the node open
            disabled  : false,  // is the node disabled
            selected  : false  // is the node selected
          },
          children    : [n2],  // array of strings or objects
          li_attr     : {},  // attributes for the generated LI node
          a_attr      : {}  // attributes for the generated A node
        };


    $('#jstree_demo_div').jstree({ 
        'core' : {
            'data' : function (obj, cb) {
                console.log(obj);
                cb.call(this, [n1]);
            }
        }
    }); 

有2个节点，A和B。B是A的子节点。我想将其设置为B是A的子节点，但B仅在A第一次展开时添加到DOM中。

上面的代码不起作用，似乎总是在加载A时加载B。有谁知道该怎么做吗？

谢谢

Answer 1

我明白了。您只需将 children 设置为 true，这意味着它有子项，但它还不知道它们。实际的子项可以存储在 data 属性中。当节点展开时，您只需从 data 获取子节点并将其返回，即可渲染到 DOM 中。数据回调在初始加载时被调用，id将为#，这意味着您需要返回根元素数组。如果不是这样，那么您扩展了一个节点。

    var n2 = {
          id          : "B", // will be autogenerated if omitted
          text        : "B", // node text
          icon        : undefined, // string for custom
          state       : {
            opened    : false,  // is the node open
            disabled  : false,  // is the node disabled
            selected  : false  // is the node selected
          },
          children    : [],  // array of strings or objects
          li_attr     : {},  // attributes for the generated LI node
          a_attr      : {},  // attributes for the generated A node 
        };
    var n1 = {
          id          : "A", // will be autogenerated if omitted
          text        : "A", // node text
          icon        : undefined, // string for custom
          state       : {
            opened    : false,  // is the node open
            disabled  : false,  // is the node disabled
            selected  : false  // is the node selected
          },
          children    : true,  // array of strings or objects
          data : [n2],
          li_attr     : {},  // attributes for the generated LI node
          a_attr      : {}  // attributes for the generated A node
        };
    var root = [n1];

    $('#jstree_demo_div').jstree({ 
        'core' : {
            'data' : function (obj, cb) {
                cb.call(this, obj.id == "#" ? root : obj.data);  
            }
        }
    });