标签: fancytree

我一直在我正在从事的一个项目中使用“Fancytree”，直到今天为止我对它非常满意。我需要在树中的某些节点上显示不同的图标，但到目前为止，还无法让它们显示在树上。

我在 JSON 字符串中指定自定义节点图标，我用它来加载树：

[{
    "title": "Inventory",
    "key": "DocFolders/1026",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}, {
    "title": "Telemetry",
    "key": "DocFolders/1027",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}, {
    "title": "Well Documents",
    "key": "DocFolders/1028",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    },
    "expanded": true,
    "children": [{
        "title": "4-13 Spectrum Core PG&E Data.xlsx",
        "key": "SpectrumDocs/961"
    }]
}, {
    "title": "Well Photos",
    "key": "DocFolders/1029",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}]

以下是加载树的 …

反正有禁用fancytree节点吗？我正在使用Select：2选项和Ajax调用来填充树。我从数据库获取数据，需要显示我的预选节点已选择并禁用，如下所示。

一种选择是将以下属性设置为：

hideCheckbox：true

已选择：true

但这会使复选框处于隐藏状态（如下面的绿色背景所示）

我不能只禁用节点本身（如第一个图片中所示）吗？类似以下选项的整个树的遍历。

禁用：false （禁用树）

更新

如果我使用unselectable true，那么我将取消选中复选框。（下面的屏幕）

不可选择：true

已选择：true

有没有办法既启用过滤又延迟加载fancytree中的节点？我期望这样的行为：

• 用户可以在树中行走，单击时加载每个节点。这是由延迟加载功能支持的
• 当用户将某些内容放入过滤器输入时，将执行对搜索服务器的 API 调用，并且 fancytree 会在树中接收元素及其父元素。Fancytree 正在渲染元素

我正在寻找一个javascript解决方案,它可以将列表无序排序到带有复选框的树视图.

到目前为止,我见过的最好的是Dynatree.然而,看着页面和小提琴,我了解到有一个名为Fancytree的指定继任者.

我计划在生产环境中实施该解决方案.

哪个是最好的库？

我正在使用Fancy树来填充树,以便了解代码

 var treeData = [{"title":"image_test","folder":true,"children":[{"title":"images5","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images4","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images3","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images2","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images1","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]}]}];


  $(function(){
    $("#tree3").fancytree({
//      extensions: ["select"],
      checkbox: true,
      selectMode: 3,
      source: treeData,
      select: function(event, data) {
        // Get a list of all selected nodes, and convert to a key array:
        var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
          return node.key;
        });
        $("#echoSelection3").text(selKeys.join(", "));

        // Get a list of all selected TOP nodes
        var selRootNodes = data.tree.getSelectedNodes(true);
        // ... and convert to a key array:
        var selRootKeys = $.map(selRootNodes, function(node){
          return node.key;
        });
        $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
        $("#echoSelectionRoots3").text(selRootNodes.join(", "));
      },
      dblclick: function(event, …

我正在与花式树合作。

在javascript中重新加载后如何打开节点（懒惰）？

代码：

node.load(forceReload = true);
node.setExpanded();

执行 node.setExpanded() 时出现“断言失败”错误。我认为问题是在 node.load() 执行之前执行 setExpanded() 指令。

谢谢你。

这是我的问题.我通过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 …

我如何才能node.setExpanded(true);将树扩展到某个级别？

我的意思是我有 6 个深度级别并且只想要扩展 5 个——应该排除最后一个。

我正在使用花式树查看器.https://github.com/mar10/fancytree

如何根据事件动态更改节点的图标.

我在我的网站上有一个奇特的树解决方案,我希望有一个触发特定节点的按钮.

我可以通过点击按钮激活特定节点或在加载花式树后触发它吗？

我的花哨代码:

  $("#tree").fancytree({ //Fancy Tree
        checkbox: false,
        selectMode: 3,
        extensions: ["dnd"],
        source: {
            url: "@(Url.Action("GetCategoryForFancyTree", "LinksDocuments"))" + '?time=' + timestamp,
                success: function(data){

                    console.log(data);
                },
                cache: true
            }
     });

我看到这个代码可能我可以使用,但我不知道节点的节点密钥,我怎么能检索密钥？

$("#tree").fancytree("getTree").getNodeByKey("id4.3.2").setActive();