Question

这是我的问题。我通过ajax使用复选框和延迟加载。但是，如果要检查父项而不扩展它，则没有任何子节点已加载，因此不会检查它们。如何在父项下加载所有子节点和嵌套子节点，并在检查父节点时全部检查它们？谢谢，这就是我到目前为止所做的事情

$(function () {
    // Create the tree inside the <div id="tree"> element.
    $("#tree").fancytree({
        source: { url: "/Home/GetData", cache: true }
        , checkbox: true
        , icons: false
        , cache: true
        , lazyLoad: function (event, data) {
            var node = data.node;
            data.result = {
                url: "/Home/GetTreeViewData/" + node.key
                , data: { mode: "children", parent: node.key }
                , cache: true
            };
        }
        , selectMode: 3
        , select: function (event, data) { //here's where I need to load the children and any sub children for that node, if it has them, so they can be set to checked

        }
        , strings: {
            loading: "Grabbing places and events…",
            loadError: "Load error!"
        },
    })
});

更新我需要拉这些客户端的原因是因为这是一个将加载谷歌地图标记的树视图。所以，如果我有一个像

这样的结构

Parent1
- ＆GT; child1-1
- ＆GT; - ＆GT; child1-1-1
- ＆GT; child1-2

所有这些子节点加载延迟。但是，如果他们要检查父节点1，那么我需要为所有这些子节点加载标记。这就是为什么我正在寻找一种递归方式让所有孩子都能得到的方法。因为如果我不加载树视图项目并选中复选框，就很难跟踪已添加的标记。有意义吗？

Answer 1

我认为你可以使用select事件：

select: function(event, data) {
    var node = data.node;

    if (node.isSelected()) {
        if (node.isUndefined()) {
            // Load and select all child nodes
            node.load().done(function() {
                node.visit(function(childNode) {
                    childNode.setSelected(true);
                });
            });
        } else {
            // Select all child nodes
            node.visit(function(childNode) {
                childNode.setSelected(true);
            });
        }
    }
}

这样，如果子节点尚未加载，则会在此之后加载并选择它们。

Answer 2

首先：也许你甚至不需要加载所有子节点。

在selectMode：3中，选定的父级表示“所有子项都被选中”，因此如果将最顶层选定的父节点发布到服务器，则后端可以相应地处理它。 tree.getSelectedNodes方法的stopOnParent参数也支持这一点。

另一种选择是修复子节点的选择状态在加载一个懒惰的父级之后：

$("#tree").fancytree({
  checkbox: true,
  selectMode: 3,
  source: { url: "/getTreeData", cache: false },
  lazyLoad: function(event, data) {
      data.result = {
          url: "/getTreeData",
          data: {mode: "children", parent: node.key},
          cache: false
      };
  },
  loadChildren: function(event, data) {
    // Apply parent's state to new child nodes:
    data.node.fixSelection3AfterClick();
  },

<强>更新

如果确实需要在选择父节点时加载延迟子节点，则可以尝试使用上述代码（另）

$("#tree").fancytree({
  ...
  select: function(event, data) {
    if( data.node.isUndefined() ) {
      data.node.load(); // triggers lazyLoad to load children
      // alternative:  node.expand()
    }
  },

Answer 3

添加取消选择选项，安德鲁的代码为：

    if (node.isSelected()) {
            if (node.isUndefined()) {
            // Load and select all child nodes
            node.load().done(function() {
                    node.visit(function(childNode) {
                    childNode.setSelected(true);
                    });
            });
            } else {
            // Select all child nodes
            node.visit(function(childNode) {
                    childNode.setSelected(true);
            });
            }
    }
    else{
            if (node.isUndefined()) {
            // Load and unselect all child nodes
            node.load().done(function() {
                    node.visit(function(childNode) {
                    childNode.setSelected(false);
                    });
            });
            } else {
            // Select all child nodes
            node.visit(function(childNode) {
                    childNode.setSelected(false);
            });
            }
    }

FancyTree在select上加载所有嵌套的子项

3 个答案: