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的子节点，但是当A第一次展开时，B只被添加到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);  
            }
        }
    });

如何在jsTree中展开时延迟加载节点？

1 个答案: