在 jstree 中只有 1 个文件夹被调用

Question

我目前正在尝试使用 jstree 在我的 Dropbox API 中列出我的文件夹，但是只显示了 1 个文件夹，但我必须在我的 Dropbox 中显示 2 个文件夹。但是当我控制函数时 console.log(entry); reposnse 是显示的 2 个文件夹，但是当我将函数放入 jstree 的数据时，只显示 1 个文件夹并且该文件夹是 console.log(entry);

中的最后一个 reposnse

var dbx = new Dropbox({ accessToken: access_token1 });
dbx.filesListFolder({ path: "" })
  .then(function(response) {

    response.entries.forEach(function(entry) {
      if (entry.tag == 'folder') {
        entry.parent = '#'
      }
      entry.text = entry.name
      console.log(entry);
      console.log(entry.name);

      $("#people").jstree({
        // generating tree from json data
        "json_data": {
          "data": {
            "data": entry.name,
            "state": "closed",
          },

        },
        // plugins used for this tree
        "plugins": ["json_data", "ui", "types", "crrm"]
      })

      .bind("loaded.jstree", function() {
          // do stuff when tree is loaded
          $("#people").addClass("jstree-sugar");
          $("#people > ul").addClass("list");
          $("#people > ul > li > a").addClass("jstree-clicked");
        })
        .bind("select_node.jstree", function(e, data) {
          // do stuff when a node is selected
          data.inst.toggle_node(data.rslt.obj);

        });
    })

    ///end of response
  })
  .catch(function(error) {
    console.log(error);
  });

Answer 1

您应该将 jsTree 生成移出响应迭代，否则您总是只能看到树中的最后一个文件夹。

如果您使用了 jsTree v3，我想您没有，您可以使用下面的代码。还要检查演示 - Fiddle Demo.

var dbx = new Dropbox({ accessToken: access_token1 });
dbx.filesListFolder({ path: "" })
  .then(function(response) {

    var nodes = []; // store the nodes

    response.entries.forEach(function(entry) {
      if (entry.tag == 'folder') {
        entry.parent = '#'
      }

      // add nodes to array - you will also need id for every node
      // to properly map files to folders in the tree
      nodes.push({
         id: entry.id,
         parent: entry.parent,
         text: entry.name
      });

      console.log(entry);
      console.log(entry.name);
    })

    // tree config out of the response iteration
    $("#people").jstree({
        // generating tree from json data
        "core": {
          "data": nodes   // pass nodes to tree config
          }
        },
        // plugins used for this tree
        "plugins": ["json_data", "ui", "types", "crrm"]
      })
      .on("loaded.jstree", function() {
        // do stuff when tree is loaded
        $("#people").addClass("jstree-sugar");
        $("#people > ul").addClass("list");
        $("#people > ul > li > a").addClass("jstree-clicked");
      })
      .on("select_node.jstree", function(e, data) {
        // do stuff when a node is selected
        data.inst.toggle_node(data.rslt.obj);

      });


    ///end of response
  })
  .catch(function(error) {
    console.log(error);

  });

在 jstree 中只有 1 个文件夹被调用

Only 1 folder called in jstree

javascript

jquery

jstree

dropbox-api