Обзор DHTMLX To Do List

DHTMLX To Do List — это удобный компонент для управления задачами. Виджет To Do List является отличным инструментом планирования, который помогает достигать целей и экономить время. Компонент позволяет создавать неограниченное количество проектов, добавлять неограниченное количество задач и подзадач, перетаскивать задачи для изменения их порядка или уровня приоритета и многое другое.

Структура To Do List

Интерфейс компонента To Do List состоит из двух частей: Toolbar и List.

Toolbar

Toolbar — верхняя часть To Do List, которая включает:

• элемент управления combo для переключения между проектами и поиска нужного проекта

• строку поиска для поиска нужных задач

• меню с набором элементов управления, которые позволяют:
  • сортировать задачи в порядке возрастания/убывания по следующим критериям:
    • по тексту
    • по приоритету
    • по сроку выполнения
    • по дате завершения
    • по дате создания
    • по дате редактирования
  • скрывать/показывать выполненные задачи
  • добавлять новый проект, переименовывать или удалять текущий активный проект

К сведению

Вы можете изменить структуру toolbar, добавив пользовательские элементы или изменив порядок встроенных элементов управления. Подробнее читайте в разделах Конфигурация и Кастомизация.

List

Список задач — главная часть интерфейса To Do List, предназначенная для добавления новых задач, редактирования и удаления существующих. Внешний вид задач легко настраивается. Подробнее читайте в разделе Конфигурация.

Выбор задач

Выбор одной задачи

• Чтобы выбрать задачу, просто кликните по ней
• Чтобы переместить выбор на предыдущую задачу, нажмите Arrow Up
• Чтобы переместить выбор на следующую задачу, нажмите Arrow Down

Выбор нескольких задач

• Чтобы выбрать несколько задач, используйте следующие комбинации:
  • удерживайте клавишу Ctrl (Cmd) и кликайте на каждую нужную задачу
  • кликните на первую задачу, удерживайте клавишу Shift, затем кликните на последнюю задачу и отпустите Shift
• Чтобы выбрать задачу выше/ниже текущей, нажмите Shift + Arrow Up/ Arrow Down

К сведению

Выбирать задачи можно только среди видимых на странице, то есть тех, которые отображаются после фильтрации или при включённом режиме скрытия выполненных задач.

Подсказка

Ознакомьтесь со списком операций, доступных для выбранных задач

Управление задачей

Управлять выбранной задачей можно через контекстное меню или с помощью клавиатурной навигации.

Контекстное меню

Контекстное меню задачи содержит набор пунктов и подпунктов и выглядит следующим образом:

Добавление новой задачи

• Чтобы добавить новую задачу в начало списка, нажмите кнопку + Добавить задачу на верхней панели навигации
• Чтобы добавить новую задачу под нужной, выберите задачу и нажмите Enter
• Чтобы добавить подзадачу, добавьте новую задачу под выбранной и нажмите Tab. Используйте Shift + Tab, чтобы повысить уровень вложенности задачи
• Чтобы скопировать задачу, кликните на неё и нажмите Ctrl (Cmd) + C. Чтобы вставить задачу, нажмите Ctrl (Cmd) + V
• Чтобы скопировать задачу вниз, кликните на неё и нажмите Ctrl (Cmd) + D
• Чтобы скопировать задачу при перетаскивании, удерживайте Alt во время drag-and-drop

Редактирование задачи

• Чтобы отредактировать задачу, дважды кликните на запись задачи в списке или нажмите Ctrl (Cmd) + Enter. Затем внесите изменения и нажмите Enter

Можно вводить текст, числа, хэштеги, даты. Подробнее читайте в разделе Поддерживаемые форматы данных.

• Чтобы отметить задачу как выполненную/невыполненную, нажмите на флажок слева от задачи или нажмите Space
• Чтобы свернуть/развернуть задачу с подзадачами, нажмите на значок стрелки слева от задачи или нажмите Arrow Left/ Arrow Right
• Чтобы установить срок выполнения задачи, откройте меню задачи, выберите Установить срок и выберите дату с помощью средства выбора даты
• Чтобы изменить срок выполнения задачи, нажмите на отображаемую дату в задаче и выберите нужную дату
• Чтобы назначить людей на задачу, откройте меню задачи, наведите на Назначить и выберите нужных людей в раскрывающемся списке. Чтобы снять назначение, отмените выбор в раскрывающемся списке

Перемещение задачи

• Чтобы переместить задачу в рамках проекта, выберите задачу и нажмите Ctrl (Cmd) + Arrow Up/ Arrow Down или используйте drag-and-drop
• Чтобы изменить уровень вложенности задачи, выберите её и нажмите Tab/Shift + Tab
• Чтобы переместить задачу в другой проект, откройте меню задачи, наведите на Переместить в и выберите нужный проект в раскрывающемся списке

Удаление задачи

• Чтобы удалить задачу, выберите её и нажмите Backspace/Delete

Установка приоритета задачи

• Чтобы установить приоритет Высокий, выберите задачу и нажмите Alt + 1
• Чтобы установить приоритет Средний, выберите задачу и нажмите Alt + 2
• Чтобы установить приоритет Низкий, выберите задачу и нажмите Alt + 3
• Чтобы Сбросить приоритет, выберите задачу и нажмите Alt + 0

Управление несколькими задачами

После выбора нескольких задач вы можете выполнять над ними набор операций, а именно:

• открывать контекстное меню для выбранных задач

• удалять задачи нажатием Backspace/Delete
• копировать задачи через Ctrl (Cmd) + C и вставлять через Ctrl (Cmd) + V. Задачи, выбранные в произвольном порядке, будут упорядочены в соответствии со структурой данных
• копировать задачи вниз через Ctrl (Cmd) + D
• перемещать задачи drag-and-drop
• копировать задачи, удерживая Alt при drag-and-drop
• перемещать задачи в рамках проекта через Ctrl (Cmd) + Arrow Up/ Arrow Down
• изменять уровень вложенности задач через Tab/ Shift + Tab. Обратите внимание: уровень вложенности задач, выбранных вместе с родительской задачей, не изменится
• отмечать задачи как выполненные/невыполненные нажатием Space

К сведению

Подробнее читайте в разделе горячие клавиши

Что дальше

Ознакомившись с кратким обзором To Do List, вы готовы узнать, как отобразить компонент на странице. Следуйте инструкциям статьи Начало работы. Если вы разрабатываете с помощью AI-ассистента, подключите его к актуальной документации через MCP-сервер DHTMLX.