跳至主要内容

配置

调整 DHTMLX To Do List 的设置以满足您的需求。可用的配置选项包括：

提示

若要在初始化后动态更改配置参数，请使用 setConfig() 方法。该方法会销毁当前组件并使用合并后的设置重新创建。之后调用对应的 Toolbar setConfig() 以将工具栏重新绑定到新的 API。

任务​

已完成子任务计数器​

更改显示已完成子任务数量的计数器类型。

counter

默认情况下，每个父任务以已完成子任务数与子任务总数之比的形式显示计数器。

若要将计数器值显示为百分比，请将 taskShape.counter.type 设置为 "percentage"。详情请参阅 taskShape 参考。以下示例将计数器切换为百分比模式：

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        counter: {
            type: "percentage" // 默认为 "number"
        }
    }
});

相关示例： To do list. 子任务计数器与日期格式

日期格式​

默认情况下，To Do List 以 "%d %M %Y" 格式（例如，09 Mar 2033）显示日期。若要指定其他格式，请使用 taskShape 属性的 date 参数。以下代码片段设置斜线分隔的日期格式：

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        date: {
            format: "%d/%m/%Y", // 默认为 "%d %M %Y"
            validate: true
        }
    }
});

相关示例： To do list. 子任务计数器与日期格式

查看可用字符列表。

拖放​

拖放功能默认启用。选择一个或多个任务，然后一次性拖动整个选区。在拖放过程中按住 Alt 键可创建所选任务的副本。

使用 drag 属性可以：

  • 防止折叠的任务在拖放悬停时展开
  • 完全禁用拖放功能

以下示例使折叠的任务在用户将项目拖过它们时保持关闭状态：

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        ...
    ],
    drag: {
        expand: false // 默认为 true
    }
});

以下代码片段完全禁用拖放功能：

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        ...
    ],
    drag: false // 默认为 true
});

订阅拖放事件以追踪拖放生命周期：

  • start-drag — 当用户开始拖动任务时触发；提供源任务 id 和模式（"move" 或 "copy"）
  • drag — 当用户拖动任务时持续触发
  • end-drag — 拖放完成时触发；提供目标 id、放置位置（"top"、"bottom"、"in" 或 null）以及模式

以下代码片段记录拖放操作的开始和结束：

list.api.on("start-drag", ({ start, mode }) => {
    console.log("drag started from", start, "in", mode, "mode");
});

list.api.on("end-drag", ({ target, dropPosition, mode }) => {
    console.log("dropped on", target, "at", dropPosition, "in", mode, "mode");
});

Change log: start-drag 和 end-drag 事件在 v1.1 中新增。

截止日期验证​

如果为任务指定了截止日期，截止日期验证会追踪任务完成情况。任务未逾期时截止日期显示为绿色。

due_date

逾期任务的日期显示为红色。

due_date

验证默认启用。若要禁用，请将 taskShape.date.validate 设置为 false。详情请参阅 taskShape 参考。以下代码片段关闭截止日期验证：

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        date: {
            format: "%d %M %Y",
            validate: false // 默认为 true
        }
    }
});

在此配置下，截止日期显示为灰色。

标记任务完成的模式​

默认情况下，To Do List 以 "auto" 模式勾选和取消勾选任务：

  • 将任务的所有子任务标记为已完成 → 父任务自动变为已完成
  • 将父任务标记为已完成 → 所有子任务自动变为已完成
  • 将已完成任务的至少一个子任务标记为未完成 → 父任务自动变为未完成
  • 将父任务标记为未完成 → 所有子任务自动变为未完成

若要禁用此行为并激活 "manual" 模式，请将 taskShape.completed.behavior 设置为 "manual"。详情请参阅 taskShape 参考。以下示例激活手动模式：

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    taskShape: {
        completed: {
            behavior: "manual" // 默认为 "auto"
        }
    }
});

相关示例： To do list. 标记父任务完成的两种方式

更改历史​

To Do List 默认追踪更改历史。用户可通过 undo() 和 redo() 方法撤销和重做操作。

使用 history 属性配置此行为。该属性接受布尔值（简写形式）或包含扩展设置的对象：

  • projects — 启用历史分支，使每个项目保留独立的历史记录；设置为 false 时，整个应用共享一个历史记录
  • limit — 保留的最大历史操作数量

以下示例将历史记录限制为 20 次操作并禁用按项目分支：

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    history: { projects: false, limit: 20 }
});

list.addTask({ task: { text: "New task" } });
list.undo(); // 撤销最后一个操作
list.redo(); // 重做该操作

若要完全禁用历史管理，请将该属性设置为 false。此时 undo() 和 redo() 方法将不可用，工具栏上对应的控件也会消失。

Change log: history 配置项、undo() 和 redo() 方法在 v1.3 中新增。

工具栏​

工具栏显示在组件顶部，需单独初始化和配置。

若要更改工具栏的默认结构，请使用 Toolbar 组件的 items 配置属性。以下代码片段仅保留搜索和组合框控件：

const toolbar = new Toolbar("#toolbar", {
    api: list.api,
    items: ["search", "combo"]
});

items 属性定义工具栏渲染哪些控件，按您希望的顺序列出。

已完成任务的隐藏模式​

详情请参阅隐藏已完成任务。

只读模式​

只读模式章节说明了如何将 To Do List 设置为只读。

Need more help?Contact Support