Wunderbaum 开源项目教程

芮奕滢Kirby

于 2024-06-10 09:49:50 发布

阅读量274

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00068/article/details/139572201

版权

Wunderbaum 开源项目教程

wunderbaum A modern tree/treegrid control for the web 项目地址: https://gitcode.com/gh_mirrors/wu/wunderbaum

1. 项目介绍

Wunderbaum 是一个现代的树/树形网格控件，专为 Web 开发设计。它是 Fancytree 的指定继任者，目前处于 beta 阶段，API、标记、样式表等仍在不断变化中。Wunderbaum 支持拖放、编辑、过滤、排序和多选功能，使用 TypeScript 编写，并转译为 ES6 (esm & umd)。它具有高性能，能够处理大数据结构，并提供面向对象的 API。Wunderbaum 是框架无关的，零依赖，并支持键盘操作。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 Wunderbaum：

npm install wunderbaum

引入和使用

在你的项目中引入 Wunderbaum，并初始化一个树形控件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wunderbaum 示例</title>
    <link rel="stylesheet" href="node_modules/wunderbaum/dist/wunderbaum.css">
</head>
<body>
    <div id="tree"></div>
    <script src="node_modules/wunderbaum/dist/wunderbaum.js"></script>
    <script>
        const data = [
            {title: "节点 1", children: [
                {title: "子节点 1.1"},
                {title: "子节点 1.2"}
            ]},
            {title: "节点 2", children: [
                {title: "子节点 2.1"},
                {title: "子节点 2.2"}
            ]}
        ];

        new Wunderbaum({
            element: document.getElementById("tree"),
            data: data
        });
    </script>
</body>
</html>