跳至主要内容

任务操作

添加新任务​

使用 addTask() 方法向列表中添加新任务。以下示例在指定父任务下添加一个任务：

list.addTask({
    id: "1.1.1",
    project: "first",
    parent: "1.1",
    targetId: "1.1.2",
    reverse: true,
    task: {
        text: "Task 1.1.1",
    }
});

复制与粘贴任务​

复制并粘贴​

复制和粘贴任务最快捷的方式是使用 copyTask() 方法。传入以下参数：

  • id — 要复制和粘贴的任务 id
  • project — 目标项目的 id（如果存在）
  • targetId — 粘贴位置的目标任务 id
  • 其他参数为可选项

以下代码片段将一个任务复制到新项目中：

list.copyTask({ 
    id: "1.1", // ID of the task to copy
    join: false, // resets copies of other tasks and copies only this task
    project: "p_2", // ID of the future project (if exists)
    parent: "2.1", // ID of the future parent
    targetId: "2.1.2", // ID of the target task
    reverse: true // paste the task before the target one
});

复制到剪贴板​

若只复制任务而不粘贴，将任务 id 传入 copyTask() 方法：

list.copyTask({ 
    id: "1.1"
});

保留其他副本的 id​

信息

要在复制任务的同时保留之前已复制的任务，请向 copyTask() 方法传入 join: true。否则，该方法仅复制指定任务并重置所有之前的副本。

从剪贴板粘贴​

通过 pasteTask() 方法将剪贴板中的已复制任务粘贴到指定位置。以下代码片段将复制的任务粘贴到目标任务旁边：

list.pasteTask({ 
    parent: "1",
    targetId: "1.2",
});
信息

当剪贴板内容到达目标位置后，clone-task 事件在 paste-task 之后触发。回调函数接收父任务 id、项目 id、目标 id 以及包含克隆任务对象的 batch 数组。

更新任务​

使用 updateTask() 方法动态更新任务参数。以下示例修改任务的文本：

list.updateTask({ 
    id: "1.1.1",
    task: {
        text: "Completed task"
    }
});

移动任务​

使用 moveTask() 方法将任务移动到其他位置。以下代码片段将任务移动到另一个项目中：

list.moveTask({ 
    id: "1.1", // ID of the task to move
    project:"p_2", // ID of the future project (if exists)
    parent: "2", // ID of the future parent
    targetId: "2.1", // ID of the target task
    reverse: true // place the task before the target one
});
注释

父任务移动时会连同其子任务一起移动。

删除任务​

使用 deleteTask() 方法删除任务：

list.deleteTask({ id: "1.2" });
注释

该方法会连同任务的所有子任务一并删除。

展开与折叠任务​

使用 collapseTask() 方法折叠任务。该方法接受任务 id 作为参数：

list.collapseTask({ id: "1.1" });

使用 expandTask() 方法通过 id 展开已折叠的任务：

list.expandTask({ id: "1.1" });

上下文菜单​

每个任务和用户都有上下文菜单。通过以下两个事件追踪其活动状态：

  • open-menu — 菜单打开时触发；提供条目 id、菜单类型，以及可选的用于批量操作的任务 id 数组（source）
  • close-menu — 菜单关闭时触发；提供条目 id 和菜单类型

以下示例记录菜单生命周期事件：

list.api.on("open-menu", ({ id, type, source }) => {
    console.log("menu opened for", id, "type", type, "source", source);
});

list.api.on("close-menu", ({ id, type }) => {
    console.log("menu closed for", id, "type", type);
});

变更日志： open-menu 和 close-menu 事件已在 v1.1 中添加。

标记任务为完成或未完成​

通过 checkTask() 和 uncheckTask() 方法将任务标记为完成或未完成。以下示例展示了两种调用方式：

list.checkTask({ 
    id: "1.1.1",
    manual: false
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: false
});

当 manual: false 时，结果取决于 taskShape.completed.behavior（详见 taskShape 参考）。

如果 taskShape.completed.behavior 为 "auto"，但需要单次手动标记，可将 manual: true：

list.checkTask({ 
    id: "1.1.1",
    manual: true
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: true
});

更改任务的缩进级别​

通过以下方法动态更改任务的嵌套层级：

以下代码片段将任务降低一个层级：

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.indentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  ['1.1', '1']

以下示例将任务提升一个层级：

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.unindentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  []
信息

如果任务已处于顶层，unindentTask() 不会执行任何操作。

筛选任务​

使用 setFilter() 方法查找符合指定条件的任务。该方法支持用于精确匹配的严格模式。以下代码片段按话题标签筛选任务：

// filter data by the specified rules
list.setFilter({
    match: "#tag1",
    highlight: true,
    strict: true
});

要重置筛选，传入 match: null：

// reset filtering
list.setFilter({ match: null });

撤销与重做​

To Do List 默认追踪变更历史。调用 undo() 方法可撤销最后一次操作；调用 redo() 方法可恢复被 undo() 撤销的操作：

list.addTask({ task: { text: "New task" } });

list.undo(); // revert the addition
list.redo(); // restore it

历史记录的范围和深度取决于 history 配置属性。详见配置 → 变更历史。

变更日志： undo() 和 redo() 方法已在 v1.3 中添加。

Need more help?Contact Support