syncfusion-javascript-kanban

用途

Syncfusion JavaScript Kanban 是一个 TypeScript 看板控件，用于可视化任务管理与工作流跟踪。它通过列、卡片和泳道展示工作项在不同阶段的流转，帮助团队直观查看工作状态、在阶段之间移动任务并跟踪进度。

主要能力

列配置：支持单键、多键列映射，列标题文本与自定义模板，列的展开/折叠切换、初始折叠、拖拽重排，以及用于分组列的分层表头（stacked headers）。
卡片管理：卡片由头部和内容组成，支持列内与列间拖拽、头部与内容字段映射、自定义卡片模板、单选与多选、显示或隐藏卡片头部，通过 cardSettings 配置。
泳道分组：可按字段渲染泳道行进行分组，支持 keyField 映射分类、textField 自定义行文本、泳道行模板、泳道行排序（升序/降序）、跨泳道拖拽、空行渲染、每个泳道的卡片计数显示，以及冻结行以保持表头始终可见。
数据绑定：支持本地 JSON 数组、DataManager 集成、远程 API、OData 服务、Web API 绑定，以及远程数据的 CRUD 操作和数据适配器。
添加/编辑/删除对话框：提供默认内置对话框，支持对话框字段映射到数据源、自定义字段配置、字段类型（String、Numeric、TextArea、DropDown、TextBox）、自定义布局的对话框模板、表单校验，以及 dialogSettings 属性。
拖拽功能：支持列内卡片拖拽、列间卡片拖拽、列拖拽重排、泳道拖拽交互，可启用或禁用拖拽，并提供拖拽事件与自定义。
自定义与样式：可设置高度和宽度尺寸、CSS 样式与自定义主题、工具提示配置、模板自定义，内置 Material、Bootstrap、Fabric、Tailwind 主题，并支持创建自定义主题。
高级功能：多语言本地化、跨会话状态持久化、优先级字段映射与可视化、卡片校验与 WIP 限制、大数据集虚拟滚动、排序配置。
无障碍与响应式：提供 WCAG 合规特性、键盘导航、面向屏幕阅读器的 ARIA 属性、可访问的卡片与列交互；支持响应式布局、移动端与平板设备、自适应列渲染和触摸交互。

使用方式

安装包：

npm install @syncfusion/ej2-kanban

导入并初始化 Kanban 组件，定义数据源、keyField、columns 和 cardSettings，然后渲染到 DOM 元素：

import { Kanban } from '@syncfusion/ej2-kanban';

const kanbanData = [
    { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements', Priority: 'Low', Assignee: 'Nancy Davloio' },
    { Id: 2, Status: 'InProgress', Summary: 'Improve application performance', Priority: 'Normal', Assignee: 'Andrew Fuller' },
    { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported', Priority: 'High', Assignee: 'Janet Leverling' },
    { Id: 4, Status: 'Close', Summary: 'Validate new requirements', Priority: 'Low', Assignee: 'Nancy Davloio' }
];

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});

kanbanObj.appendTo('#Kanban');

常见配置模式包括：带泳道的看板（通过 swimlaneSettings 的 keyField 按负责人等字段分组，allowDragAndDrop 允许跨泳道拖拽）、带分层表头的看板（stackedHeaders 将多个列归入同一分组）、使用 OData 的远程数据绑定（通过 DataManager 与 ODataAdaptor），以及自定义卡片模板（cardSettings.template 引用模板元素）。

关键配置项：dataSource（数组或 DataManager）、keyField（映射到列 keyField 的字段名）、columns（含 headerText 与 keyField 的列定义）、cardSettings（headerField 为必填的唯一标识字段，contentField 为主内容字段，template 为自定义卡片模板）、swimlaneSettings（keyField 分组字段、textField 泳道表头显示文本、allowDragAndDrop 跨泳道拖拽）、allowDragAndDrop、allowKeyboard、height、width、dialogSettings、sortSettings、stackedHeaders。

适用场景

软件开发冲刺看板：列如 Backlog → In Progress → Code Review → Testing → Done，按负责人或功能划分泳道，每列设置 WIP 限制。
客户支持工单跟踪：列如 New → Assigned → In Progress → Waiting → Resolved，按优先级或支持层级划分泳道，使用自定义卡片模板展示工单详情。
内容发布工作流：列如 Ideas → Draft → Review → Approved → Published，按作者或内容类型划分泳道，通过对话框添加元数据。
制造流程：列如 Order Received → In Production → Quality Check → Shipped，按产品线划分泳道，绑定生产系统远程数据。
招聘流程：列如 Applied → Phone Screen → Interview → Offer → Hired，按职位或招聘人员划分泳道，卡片模板展示候选人信息。

限制

资料未提供该控件的收费、价格、授权方式、性能上限或具体平台兼容性等限制信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制