Question

我的页面上有一个js代码，它从服务器获取JSON层次结构并单独加载，并在页面上构建一个可视化的Fancytree层次结构（我从示例中留下了html页面部分）。

  $(function() {
    $("#tree").fancytree({
      source: {
        url: '/products/ftree/?format=json',
        cache: false,
        datatype: 'json',
      },
      checkbox: false,
    })

    sortProducts();
    console.log('sorted');
  });

  function sortProducts(){
    console.log('in sortProducts()');
    var tree = $("#tree").fancytree("getTree");
    tree.rootNode.sortChildren(null, true);
    tree.visit( function(node) {
      node.sortChildren(null, false);
      return true;
    });
    tree.render(true, true);
    console.log('end of sort func');
  }
 .
 .
 .
 <div id='tree' ></div>

每个节点都有像

这样的标题

   1 Fooo
   2 Bar
   3 FoooBar
   3-1 BarFooo
   3-1-1 foofoofoo
   3-1-2 barbarbar
   4 Buuu
   4-1 BuuuBooo
   4-1-1 bubobubub

等等。页面加载正常，它正确地呈现树，并且大部分节点的顺序正确，但在更深的部分4-2在4-1之前出现，依此类推。所以我尝试用 .sortChildren（null，true）等等对它们进行排序，但它并没有对它们进行排序。我得到了代码的形状，它没有给出任何错误，打印调试很好，但树没有正确排序。

请注意，代码段有两次尝试，通过 rootNode 和节点遍历，我已经单独尝试并一起尝试获得相同的部分未排序树。根据我的理解，sortChildren（）应该排序标题字符串而不覆盖默认的cmp函数。

知道这有什么问题吗？

Answer 1

此代码没问题

var node = $("#tree").fancytree("getRootNode");
node.sortChildren(null, true);

但问题是您尝试对空树进行排序，因为异步请求尚未返回一种解决方案是在init事件中调用它：

$("#tree").fancytree({
    ...
    init: function(event, data) {
      data.tree.getRootNode().sortChildren(null, true);
    },
    ...

按标题排序整个fancytree失败

1 个答案: