4

这是我的问题。我正在通过 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!"
        },
    })
});

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


父母1- >孩子1-1
->->孩子1-1-1- >
孩子1-2

所有这些子节点都加载惰性。但是，如果他们要检查父节点 1，那么我需要为所有这些子节点加载标记。这就是为什么我正在寻找一种方法来递归地获取所有孩子。因为如果我不只是加载树视图项目并选中复选框，那么很难跟踪已添加/未添加哪些标记。有道理？

4

3 回答 3

7

我认为您可以使用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);
            });
        }
    }
}

这样，如果子节点尚未加载，它们将在之后加载和选择。

于 2014-08-19T13:04:08.593 回答
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()
    }
  },
于 2014-08-19T07:34:47.440 回答
0

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

    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);
            });
            }
    }
于 2019-04-26T09:41:54.210 回答