You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
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:
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)
tree.css
The text was updated successfully, but these errors were encountered: