初始化

要在页面上显示 To Do List，请按照以下步骤操作：

1. 在页面中引入 To Do List 源文件
2. 创建两个容器：一个用于 List，另一个用于 Toolbar
3. 初始化 List 和 Toolbar

引入源文件

下载 To Do List 安装包并解压到项目文件夹中。可从下载页面获取安装包。

在页面中引入以下源文件：

• todo.js
• todo.css

调整相对路径以匹配您的项目结构。以下示例从 dist 文件夹加载这两个文件：

index.html

<script type="text/javascript" src="./dist/todo.js"></script>
<link rel="stylesheet" href="./dist/todo.css">

创建容器

To Do List 组件由两个部分组成：List 和 Toolbar。

为 List 和 Toolbar 创建两个容器，并为其分配 ID（例如 "root" 和 "toolbar"）。以下代码片段声明了这两个容器：

index.html

<div id="toolbar"></div> <!-- Toolbar 容器（可选）-->
<div id="root"></div> <!-- List 容器 */}

初始化 To Do List

初始化 List

使用 new ToDo() 构造函数初始化 List。构造函数接受两个参数：

• 放置 List 的容器（即上面创建的容器）
• 包含配置属性的对象（完整列表请参阅 configs 概览）

以下代码片段在 #root 容器中创建一个 List：

index.js

const { ToDo, Toolbar } = todo; // 解构全局 todo 对象

// 创建 List
const list = new ToDo("#root", {
    // 配置属性
});

初始化 Toolbar

使用 new Toolbar() 构造函数初始化 Toolbar。构造函数接受两个参数：

• Toolbar 的容器（在上一步中创建）
• 包含配置属性的对象（完整列表请参阅工具栏属性）

信息

Toolbar 初始化是可选的。如果您的应用不需要 Toolbar，可以跳过此步骤。

以下代码片段创建 Toolbar 并通过 api 属性将其链接到 List：

index.js

const { ToDo, Toolbar } = todo; // 解构全局 todo 对象

// 创建 List
const list = new ToDo("#root", {
    // 配置属性
});

// 创建 Toolbar
const toolbar = new Toolbar("#toolbar", {
    api: list.api
});

注释

将 todo 全局对象解构为 ToDo 和 Toolbar 以直接使用它们。

如果您直接调用 new todo.ToDo() 和 new todo.Toolbar() 构造函数，则可以跳过此步骤。

向 To Do List 加载数据

数据加载文章介绍了如何向 DHTMLX To Do List 加载数据。

示例