英文:
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:
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;
}
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.
英文:
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:
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;
}
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.
答案1
得分: 1
这只是示例中自定义的rowRenderer导致的。我同意这作为第一个示例可能会让人感到困惑。你可以将其注释掉以获得常规的行渲染器。
// rowRenderer: function (node, treeOptions) {
// // 自定义渲染器
// return (
// '<div data-id="' + node.id + '" class="infinite-tree-item">' +
// node.name +
// '</div>'
// );
// },
请注意，这是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 -->
const data = {
id: 'fruit',
name: 'Fruit',
children: [
{
id: 'apple',
name: 'Apple',
},
{
id: 'banana',
name: 'Banana',
children: [
{
id: 'cherry',
name: 'Cherry',
loadOnDemand: true,
},
],
},
],
};
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;
},
});
<!-- language: lang-html -->
<script id="test" src="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/infinite-tree@1.17.1/dist/infinite-tree.css"></style>
<div id="tree"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论