在jstree中只调用了一个文件夹

时间:2017-02-21 03:56:12

标签: javascript jquery dropbox-api jstree

我目前正在尝试使用jstree在我的Dropbox API中列出我的文件夹,但是只显示了一个文件夹,但我的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);
  });

1 个答案:

答案 0 :(得分: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);

  });