infinite-tree
infinite-tree copied to clipboard
Published
20 hours ago •
cheton
cheton
example code not working
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/[email protected]/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;
}
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.