无限树示例代码不起作用，我该如何修复

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

我试图让提供的示例代码发挥作用，但它只生成一个简单的名称列表，没有缩进或打开/关闭节点的选项。出了什么问题？

输出是这样的：

Fruit
Apple
Banana
Cherry

但应该是这样的：

>Fruit
>Apple
>Banana
>Cherry

代码是这样的：

(注意，我在unpkg找到了js，但找不到css，所以我从"dist"目录下载了css)

<!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;
}

我还试图让chatgpt创建一个无限树的工作版本。它想出了：

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

它根本没有显示任何内容——只是空白。

这只是由于示例中的自定义rowRenderer。我同意把它作为第一个例子是非常令人困惑的。您可以注释它以获得常规的行渲染器。

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;
},
});

<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>

相关内容

最新更新

热门标签：