infinite-tree example code not working, how do I fix?

huangapple
go评论111阅读模式
英文:

infinite-tree example code not working, how do I fix?

问题

你想翻译的内容如下：

https://github.com/cheton/infinite-tree/

I have tried to get the supplied example code to work, but it only produces a plain list of names, there is no indentation or option to open/close nodes. Whats going wrong?

The output is this:

  1. Fruit
  2. Apple
  3. Banana
  4. Cherry

But it should be this:

  1. >Fruit
  2.    >Apple
  3.    >Banana
  4.       >Cherry

The code is this:

(Note, i found the js at unpkg, but I could not find the css, so I downloaded the css from the "dist" dir)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Infinite Tree Example</title>
  6.   <link rel="stylesheet" href="tree.css">
  7.   <script src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
  8. </head>
  9. <body>
  10.   <div id="tree"></div>
  13.   <script>
  14.     // Define the JSON data to display
  15. const data = {
  16.     id: 'fruit',
  17.     name: 'Fruit',
  18.     children: [{
  19.         id: 'apple',
  20.         name: 'Apple'
  21.     }, {
  22.         id: 'banana',
  23.         name: 'Banana',
  24.         children: [{
  25.             id: 'cherry',
  26.             name: 'Cherry',
  27.             loadOnDemand: true
  28.         }]
  29.     }]
  30. };
  31.     // Create the Infinite Tree instance
  34.       const tree = new InfiniteTree({
  35.     el: document.querySelector('#tree'),
  36.     data: data,
  37.     autoOpen: true, // Defaults to false
  38.     droppable: { // Defaults to false
  39.         hoverClass: 'infinite-tree-droppable-hover',
  40.         accept: function(event, options) {
  41.             return true;
  42.         },
  43.         drop: function(event, options) {
  44.         }
  45.     },
  46.     shouldLoadNodes: function(parentNode) {
  47.         if (!parentNode.hasChildren() && parentNode.loadOnDemand) {
  48.             return true;
  49.         }
  50.         return false;
  51.     },
  52.     loadNodes: function(parentNode, next) {
  53.         // Loading...
  54.         const nodes = [];
  55.         nodes.length = 1000;
  56.         for (let i = 0; i < nodes.length; ++i) {
  57.             nodes[i] = {
  58.                 id: `${parentNode.id}.${i}`,
  59.                 name: `${parentNode.name}.${i}`,
  60.                 loadOnDemand: true
  61.             };
  62.         }
  64.         next(null, nodes, function() {
  65.             // Completed
  66.         });
  67.     },
  68.     nodeIdAttr: 'data-id', // the node id attribute
  69.     rowRenderer: function(node, treeOptions) { // Customizable renderer
  70.         return '<div data-id="<node-id>" class="infinite-tree-item">' + node.name + '</div>';
  71.     },
  72.     shouldSelectNode: function(node) { // Determine if the node is selectable
  73.         if (!node || (node === tree.getSelectedNode())) {
  74.             return false; // Prevent from deselecting the current node
  75.         }
  76.         return true;
  77.     }
  78.     });
  79.   </script>
  80. </body>
  81. </html>

tree.css

  1. .infinite-tree-scroll {
  2.     overflow: auto;
  3.     max-height: 400px; /* Change the height to suit your needs. */
  4.   }
  5.   .infinite-tree-table {
  6.     width: 100%;
  7.   }
  8.   .infinite-tree-content {
  9.     outline: 0;
  10.     position: relative;
  11.   }
  12.   .infinite-tree-content .infinite-tree-selected.infinite-tree-item,
  13.   .infinite-tree-content .infinite-tree-selected.infinite-tree-item:hover {
  14.     background: #deecfd;
  15.     border: 1px solid #06c;
  16.   }
  17.   .infinite-tree-content .infinite-tree-item {
  18.     border: 1px solid transparent;
  19.     cursor: default;
  20.   }
  21.   .infinite-tree-content .infinite-tree-item:hover {
  22.     background: #f2fdff;
  23.   }
  24.   .infinite-tree-content .infinite-tree-item:disabled,
  25.   .infinite-tree-content .infinite-tree-item[disabled] {
  26.     cursor: not-allowed;
  27.     opacity: 0.5;
  28.   }
  29.   .infinite-tree-content .infinite-tree-node {
  30.     position: relative;
  31.   }
  32.   .infinite-tree-content .infinite-tree-toggler {
  33.     color: #666;
  34.     user-select: none;
  35.   }
  36.   .infinite-tree-content .infinite-tree-toggler:hover {
  37.     color: #333;
  38.     text-decoration: none;
  39.   }
  40.   .infinite-tree-content .infinite-tree-title {
  41.     cursor: pointer;
  42.     user-select: none;
  43.   }
  44.   .infinite-tree-no-data {
  45.     text-align: center;
  46.   }

I also tried to get chatgpt to create a working version of infinite-tree. It came up with:

  1. const tree = new InfiniteTree("#tree", {
  2.   data: data,
  3.   loadChildren: function(node, done) {
  4.     done(node.children || []);
  5.   }
  6. });

Which doesnt show anything at all - just blank.

英文:

https://github.com/cheton/infinite-tree/

I have tried to get the supplied example code to work, but it only produces a plain list of names, there is no indentation or option to open/close nodes. Whats going wrong?

The output is this:

  1. Fruit
  2. Apple
  3. Banana
  4. Cherry

But it should be this:

  1.  >Fruit
  2.    >Apple
  3.    >Banana
  4.       >Cherry

The code is this:

(Note, i found the js at unpkg, but I could not find the css, so I downloaded the css from the "dist" dir)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Infinite Tree Example</title>
  6.   <link rel="stylesheet" href="tree.css">
  7.   <script src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
  8. </head>
  9. <body>
  10.   <div id="tree"></div>
  13.   <script>
  14.     // Define the JSON data to display
  15. const data = {
  16.     id: 'fruit',
  17.     name: 'Fruit',
  18.     children: [{
  19.         id: 'apple',
  20.         name: 'Apple'
  21.     }, {
  22.         id: 'banana',
  23.         name: 'Banana',
  24.         children: [{
  25.             id: 'cherry',
  26.             name: 'Cherry',
  27.             loadOnDemand: true
  28.         }]
  29.     }]
  30. };
  31.     // Create the Infinite Tree instance
  34.       const tree = new InfiniteTree({
  35.     el: document.querySelector('#tree'),
  36.     data: data,
  37.     autoOpen: true, // Defaults to false
  38.     droppable: { // Defaults to false
  39.         hoverClass: 'infinite-tree-droppable-hover',
  40.         accept: function(event, options) {
  41.             return true;
  42.         },
  43.         drop: function(event, options) {
  44.         }
  45.     },
  46.     shouldLoadNodes: function(parentNode) {
  47.         if (!parentNode.hasChildren() && parentNode.loadOnDemand) {
  48.             return true;
  49.         }
  50.         return false;
  51.     },
  52.     loadNodes: function(parentNode, next) {
  53.         // Loading...
  54.         const nodes = [];
  55.         nodes.length = 1000;
  56.         for (let i = 0; i < nodes.length; ++i) {
  57.             nodes[i] = {
  58.                 id: `${parentNode.id}.${i}`,
  59.                 name: `${parentNode.name}.${i}`,
  60.                 loadOnDemand: true
  61.             };
  62.         }
  64.         next(null, nodes, function() {
  65.             // Completed
  66.         });
  67.     },
  68.     nodeIdAttr: 'data-id', // the node id attribute
  69.     rowRenderer: function(node, treeOptions) { // Customizable renderer
  70.         return '<div data-id="<node-id>" class="infinite-tree-item">' + node.name + '</div>';
  71.     },
  72.     shouldSelectNode: function(node) { // Determine if the node is selectable
  73.         if (!node || (node === tree.getSelectedNode())) {
  74.             return false; // Prevent from deselecting the current node
  75.         }
  76.         return true;
  77.     }
  78.     });
  79.   </script>
  80. </body>
  81. </html>

tree.css

  1. .infinite-tree-scroll {
  2.     overflow: auto;
  3.     max-height: 400px; /* Change the height to suit your needs. */
  4.   }
  5.   .infinite-tree-table {
  6.     width: 100%;
  7.   }
  8.   .infinite-tree-content {
  9.     outline: 0;
  10.     position: relative;
  11.   }
  12.   .infinite-tree-content .infinite-tree-selected.infinite-tree-item,
  13.   .infinite-tree-content .infinite-tree-selected.infinite-tree-item:hover {
  14.     background: #deecfd;
  15.     border: 1px solid #06c;
  16.   }
  17.   .infinite-tree-content .infinite-tree-item {
  18.     border: 1px solid transparent;
  19.     cursor: default;
  20.   }
  21.   .infinite-tree-content .infinite-tree-item:hover {
  22.     background: #f2fdff;
  23.   }
  24.   .infinite-tree-content .infinite-tree-item:disabled,
  25.   .infinite-tree-content .infinite-tree-item[disabled] {
  26.     cursor: not-allowed;
  27.     opacity: 0.5;
  28.   }
  29.   .infinite-tree-content .infinite-tree-node {
  30.     position: relative;
  31.   }
  32.   .infinite-tree-content .infinite-tree-toggler {
  33.     color: #666;
  34.     user-select: none;
  35.   }
  36.   .infinite-tree-content .infinite-tree-toggler:hover {
  37.     color: #333;
  38.     text-decoration: none;
  39.   }
  40.   .infinite-tree-content .infinite-tree-title {
  41.     cursor: pointer;
  42.     user-select: none;
  43.   }
  44.   .infinite-tree-no-data {
  45.     text-align: center;
  46.   }

I also tried to get chatgpt to create a working version of infinite-tree. It came up with:

  1.     const tree = new InfiniteTree("#tree", {
  2.       data: data,
  3.       loadChildren: function(node, done) {
  4.         done(node.children || []);
  5.       }
  6.     });

Which doesnt show anything at all - just blank.

答案1

得分: 1

这只是示例中自定义的rowRenderer导致的。我同意这作为第一个示例可能会让人感到困惑。你可以将其注释掉以获得常规的行渲染器。

  1. // rowRenderer: function (node, treeOptions) {
  2. //   // 自定义渲染器
  3. //   return (
  4. //     '<div data-id="' + node.id + '" class="infinite-tree-item">' +
  5. //     node.name +
  6. //     '</div>'
  7. //   );
  8. // },

请注意，这是JavaScript代码的一部分，不需要进行翻译。

英文:

That's just due to the custom rowRenderer in the example. I agree it's pretty confusing to have that as the first example. You can comment it out to get the regular row renderer.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const data = {
  2.   id: &#39;fruit&#39;,
  3.   name: &#39;Fruit&#39;,
  4.   children: [
  5.     {
  6.       id: &#39;apple&#39;,
  7.       name: &#39;Apple&#39;,
  8.     },
  9.     {
  10.       id: &#39;banana&#39;,
  11.       name: &#39;Banana&#39;,
  12.       children: [
  13.         {
  14.           id: &#39;cherry&#39;,
  15.           name: &#39;Cherry&#39;,
  16.           loadOnDemand: true,
  17.         },
  18.       ],
  19.     },
  20.   ],
  21. };
  23. const tree = new InfiniteTree({
  24.   el: document.querySelector(&#39;#tree&#39;),
  25.   data: data,
  26.   autoOpen: true, // Defaults to false
  27.   droppable: {
  28.     // Defaults to false
  29.     hoverClass: &#39;infinite-tree-droppable-hover&#39;,
  30.     accept: function (event, options) {
  31.       return true;
  32.     },
  33.     drop: function (event, options) {},
  34.   },
  35.   shouldLoadNodes: function (parentNode) {
  36.     if (!parentNode.hasChildren() &amp;&amp; parentNode.loadOnDemand) {
  37.       return true;
  38.     }
  39.     return false;
  40.   },
  41.   loadNodes: function (parentNode, next) {
  42.     // Loading...
  43.     const nodes = [];
  44.     nodes.length = 1000;
  45.     for (let i = 0; i &lt; nodes.length; ++i) {
  46.       nodes[i] = {
  47.         id: `${parentNode.id}.${i}`,
  48.         name: `${parentNode.name}.${i}`,
  49.         loadOnDemand: true,
  50.       };
  51.     }
  53.     next(null, nodes, function () {
  54.       // Completed
  55.     });
  56.   },
  57.   nodeIdAttr: &#39;data-id&#39;, // the node id attribute
  58.   // rowRenderer: function (node, treeOptions) {
  59.   //   // Customizable renderer
  60.   //   return (
  61.   //     &#39;&lt;div data-id=&quot;&lt;node-id&gt;&quot; class=&quot;infinite-tree-item&quot;&gt;&#39; +
  62.   //     node.name +
  63.   //     &#39;&lt;/div&gt;&#39;
  64.   //   );
  65.   // },
  66.   shouldSelectNode: function (node) {
  67.     // Determine if the node is selectable
  68.     if (!node || node === tree.getSelectedNode()) {
  69.       return false; // Prevent from deselecting the current node
  70.     }
  71.     return true;
  72.   },
  73. });

<!-- language: lang-html -->

  1. &lt;script id=&quot;test&quot; src=&quot;https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.css&quot;&gt;&lt;/style&gt;
  4. &lt;div id=&quot;tree&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月7日 01:12:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/75952096.html
  • javascript
  • tree
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定