example code not working #66

nutmix · 2023-04-06T16:29:44Z

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:

Fruit
Apple
Banana
Cherry

But it should be this:

 >Fruit
   >Apple
   >Banana
      >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)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Infinite Tree Example</title>
  <link rel="stylesheet" href="tree.css">
  <script src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
</head>
<body>
  <div id="tree"></div>
  
  
  <script>
    // Define the JSON data to display
const data = {
    id: 'fruit',
    name: 'Fruit',
    children: [{
        id: 'apple',
        name: 'Apple'
    }, {
        id: 'banana',
        name: 'Banana',
        children: [{
            id: 'cherry',
            name: 'Cherry',
            loadOnDemand: true
        }]
    }]
};
    // Create the Infinite Tree instance

      
      const tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: data,
    autoOpen: true, // Defaults to false
    droppable: { // Defaults to false
        hoverClass: 'infinite-tree-droppable-hover',
        accept: function(event, options) {
            return true;
        },
        drop: function(event, options) {
        }
    },
    shouldLoadNodes: function(parentNode) {
        if (!parentNode.hasChildren() && parentNode.loadOnDemand) {
            return true;
        }
        return false;
    },
    loadNodes: function(parentNode, next) {
        // Loading...
        const nodes = [];
        nodes.length = 1000;
        for (let i = 0; i < nodes.length; ++i) {
            nodes[i] = {
                id: `${parentNode.id}.${i}`,
                name: `${parentNode.name}.${i}`,
                loadOnDemand: true
            };
        }

        next(null, nodes, function() {
            // Completed
        });
    },
    nodeIdAttr: 'data-id', // the node id attribute
    rowRenderer: function(node, treeOptions) { // Customizable renderer
        return '<div data-id="<node-id>" class="infinite-tree-item">' + node.name + '</div>';
    },
    shouldSelectNode: function(node) { // Determine if the node is selectable
        if (!node || (node === tree.getSelectedNode())) {
            return false; // Prevent from deselecting the current node
        }
        return true;
    }
    });
  </script>
</body>
</html>

tree.css

.infinite-tree-scroll {
    overflow: auto;
    max-height: 400px; /* Change the height to suit your needs. */
  }
  .infinite-tree-table {
    width: 100%;
  }
  .infinite-tree-content {
    outline: 0;
    position: relative;
  }
  .infinite-tree-content .infinite-tree-selected.infinite-tree-item,
  .infinite-tree-content .infinite-tree-selected.infinite-tree-item:hover {
    background: #deecfd;
    border: 1px solid #06c;
  }
  .infinite-tree-content .infinite-tree-item {
    border: 1px solid transparent;
    cursor: default;
  }
  .infinite-tree-content .infinite-tree-item:hover {
    background: #f2fdff;
  }
  .infinite-tree-content .infinite-tree-item:disabled,
  .infinite-tree-content .infinite-tree-item[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .infinite-tree-content .infinite-tree-node {
    position: relative;
  }
  .infinite-tree-content .infinite-tree-toggler {
    color: #666;
    user-select: none;
  }
  .infinite-tree-content .infinite-tree-toggler:hover {
    color: #333;
    text-decoration: none;
  }
  .infinite-tree-content .infinite-tree-title {
    cursor: pointer;
    user-select: none;
  }
  .infinite-tree-no-data {
    text-align: center;
  }

The text was updated successfully, but these errors were encountered:

nutmix · 2023-04-06T16:34:59Z

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

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

Which doesnt show anything at all - just blank.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

example code not working #66

example code not working #66

nutmix commented Apr 6, 2023 •

edited

Loading

nutmix commented Apr 6, 2023

example code not working #66

example code not working #66

Comments

nutmix commented Apr 6, 2023 • edited Loading

nutmix commented Apr 6, 2023

nutmix commented Apr 6, 2023 •

edited

Loading