syncfusion-javascript-kanban

实现看板

Syncfusion TypeScript 看板的实现与自定义指南。看板是一种可视化任务管理控件，使用列、卡片和泳道展示工作所处的不同阶段。

何时使用此技能

在以下情况下使用此技能：

• 实现看板，用于任务或工作流管理
• 创建可视化工作流，支持卡片拖放交互
• 构建敏捷项目看板，使用列表示工作流阶段
• 按类别对任务分组，使用泳道（例如，按负责人、优先级或团队分组）
• 管理进行中工作的限制，按列验证卡片
• 启用卡片编辑，通过对话框执行添加、编辑和删除操作
• 绑定数据，来源可以是本地数组、远程 API 或 OData 服务
• 自定义卡片布局，使用模板满足特定业务需求
• 跟踪项目状态，直观展示多个阶段的进展

控件概览

看板是一种强大的可视化管理工具，可帮助团队：

• 使用可自定义的列直观展示工作阶段
• 通过拖放将卡片移至不同工作流阶段
• 使用泳道对相关工作分组
• 通过卡片计数和 WIP 限制跟踪进度
• 使用内置或自定义对话框编辑任务
• 支持适用于桌面和移动设备的响应式布局

主要功能：

• 多种列配置（单键、多键、堆叠标题）
• 丰富的卡片自定义功能（模板、选择、样式）
• 灵活的数据绑定（本地、远程、OData）
• 高级功能（本地化、持久化、虚拟滚动）

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包依赖项
• 设置 Vite TypeScript 项目
• CSS 导入和主题配置
• 基本看板初始化
• 使用 keyField 映射设置列
• 使用 dataSource 填充卡片
• 首个可运行示例

列配置

📄 阅读： references/columns.md

• 单键和多键列映射
• 列标题文本和自定义模板
• 切换列（展开/折叠功能）
• 初始折叠的列
• 列拖放重新排序
• 用于对列分组的堆叠标题
• 列属性和配置

卡片管理

📄 阅读： references/cards.md

• 卡片结构（标题和内容）
• 在列内及列之间拖放卡片的行为
• 卡片标题和内容字段映射
• 自定义卡片模板
• 卡片选择（单选和多选）
• 显示/隐藏卡片标题
• cardSettings 配置

泳道分组

📄 阅读： references/swimlane.md

• 渲染泳道行以进行分组
• 用于分类的 keyField 映射
• 使用 textField 自定义行文本
• 泳道行模板
• 泳道行排序（升序/降序）
• 跨泳道拖放
• 空行渲染
• 显示每条泳道的卡片计数
• 冻结行，使标题始终可见

数据绑定

📄 阅读： references/data-binding.md

• 使用 JSON 数组进行本地数据绑定
• DataManager 集成
• 使用 API 进行远程数据绑定
• OData 服务集成
• Web API 绑定
• 使用远程数据执行 CRUD 操作
• 数据适配器和适配器

添加/编辑/删除对话框

📄 阅读： references/dialog.md

• 默认内置对话框
• 对话框字段与数据源的映射
• 自定义字段配置
• 字段类型（String、Numeric、TextArea、DropDown、TextBox）
• 用于自定义布局的对话框模板
• 对话框表单验证
• dialogSettings 属性

拖放功能

📄 阅读： references/drag-and-drop.md

• 在列内拖放卡片
• 在列之间拖放卡片
• 列拖放重新排序
• 泳道拖放交互
• 启用/禁用拖放
• 拖放事件和自定义

自定义和样式

📄 阅读： references/customization.md

• 设置尺寸（高度、宽度）
• CSS 样式和自定义主题
• 工具提示配置
• 模板自定义选项
• 内置主题（Material、Bootstrap、Fabric、Tailwind）
• 创建自定义主题

高级功能

📄 阅读： references/advanced-features.md

• 多语言支持的本地化
• 跨会话状态持久化
• 优先级字段映射和可视化
• 卡片验证和 WIP 限制
• 大型数据集的虚拟滚动
• 排序配置选项

无障碍访问

📄 阅读： references/accessibility.md

• WCAG 合规功能
• 键盘导航支持
• 面向屏幕阅读器的 ARIA 属性
• 无障碍卡片和列交互

响应式设计

📄 阅读： references/responsive-mode.md

• 响应式布局行为
• 支持移动设备和平板设备
• 自适应列渲染
• 触控交互支持

API 参考 - 属性

📄 阅读： references/properties.md

• 所有 Kanban 属性的完整列表
• dataSource、keyField、columns 配置
• cardSettings、swimlaneSettings、dialogSettings
• 拖放属性（allowDragAndDrop、allowColumnDragAndDrop）
• 尺寸属性（height、width）
• 排序、堆叠标题、约束
• 本地化、持久化、虚拟化
• 属性类型、默认值和示例

API 参考 - 事件

📄 阅读： references/events.md

• 所有 Kanban 事件的完整列表
• 操作事件（actionBegin、actionComplete、actionFailure）
• 卡片交互事件（cardClick、cardDoubleClick、cardRendered）
• 拖放事件（dragStart、drag、dragStop）
• 列拖动事件（columnDragStart、columnDrag、columnDrop）
• 对话框事件（dialogOpen、dialogClose）
• 数据事件（dataBinding、dataBound）
• 事件参数和用例

API 参考 - 方法

📄 阅读： references/methods.md

• 所有 Kanban 公共方法的完整列表
• 卡片管理（addCard、deleteCard、updateCard、getCardDetails）
• 列管理（addColumn、deleteColumn、showColumn、hideColumn）
• 数据查询方法（getColumnData、getSwimlaneData、getSelectedCards）
• 对话框方法（openDialog、closeDialog）
• 实用方法（refresh、destroy、dataBind）
• 方法签名、参数和返回类型

故障排除和操作指南

📄 阅读： references/troubleshooting.md

• 动态更改列
• 筛选和搜索卡片
• 自定义标题双击行为
• 常见问题和解决方案
• 性能优化建议

快速入门示例

// 1. Install the package
// npm install @syncfusion/ej2-kanban

// 2. Import Kanban component
import { Kanban } from '@syncfusion/ej2-kanban';

// 3. Define your data
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'
    }
];

// 4. Initialize Kanban with basic configuration
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'
    }
});

// 5. Render to DOM element
kanbanObj.appendTo('#Kanban');

常见模式

模式 1：带泳道的 Kanban

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'To Do', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    swimlaneSettings: {
        keyField: 'Assignee',  // Group by assignee
        allowDragAndDrop: true  // Allow dragging across swimlanes
    }
});
kanbanObj.appendTo('#Kanban');

模式 2：带堆叠标题的 Kanban

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Review', keyField: 'Review' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    stackedHeaders: [
        { text: 'To Do', keyFields: 'Open' },
        { text: 'Development Phase', keyFields: 'InProgress, Review' },
        { text: 'Completed', keyFields: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');

模式 3：使用 OData 进行远程数据绑定

import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/Kanban',
    adaptor: new ODataAdaptor
});

const kanbanObj: Kanban = new Kanban({
    dataSource: dataManager,
    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');

模式 4：自定义卡片模板

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'To Do', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id',
        template: '#cardTemplate'  // Reference to template element
    }
});
kanbanObj.appendTo('#Kanban');

// Define template in HTML
// <script id="cardTemplate" type="text/x-template">
//     <div class="custom-card">
//         <div class="card-header">${Id}</div>
//         <div class="card-content">${Summary}</div>
//         <div class="card-footer">
//             <span class="priority ${Priority}">${Priority}</span>
//             <span class="assignee">${Assignee}</span>
//         </div>
//     </div>
// </script>

关键配置选项

必要属性

• dataSource：数组或 DataManager - 卡片数据源
• keyField：string - 映射到列 keyField 值的字段名称
• columns：数组 - 包含 headerText 和 keyField 的列定义
• cardSettings：对象 - 卡片显示配置
  • headerField：string - 唯一标识符字段（必填）
  • contentField：string - 主要内容显示字段
  • template：string - 自定义卡片模板
• swimlaneSettings：对象 - 泳道配置
  • keyField：string - 用于分组卡片的字段
  • textField：string - 泳道标题的显示文本
  • allowDragAndDrop：boolean - 启用跨泳道拖动

常用选项

• allowDragAndDrop：boolean - 启用卡片拖放（默认值：true）
• allowKeyboard：boolean - 启用键盘交互
• height：string/number - 看板高度
• width：string/number - 看板宽度
• dialogSettings：Object - 对话框自定义设置
• sortSettings：Object - 卡片排序配置
• stackedHeaders：Array - 分组列标题

常见用例

1. 软件开发冲刺看板

   • 列：待办 → 进行中 → 代码审查 → 测试 → 已完成
   • 泳道：按负责人或功能划分
   • 每列的 WIP 限制

2. 客户支持工单跟踪

   • 列：新建 → 已分配 → 进行中 → 等待中 → 已解决
   • 泳道：按优先级或支持级别划分
   • 包含工单详情的自定义卡片模板

3. 内容发布工作流

   • 列：创意 → 草稿 → 审核 → 已批准 → 已发布
   • 泳道：按作者或内容类型划分
   • 用于添加元数据的对话框

4. 制造流程

   • 列：已接收订单 → 生产中 → 质量检查 → 已发货
   • 泳道：按产品线划分
   • 绑定生产系统的远程数据

5. 招聘流程

   • 列：已申请 → 电话筛选 → 面试 → 录用通知 → 已入职
   • 泳道：按职位或招聘人员划分
   • 包含候选人信息的卡片模板

相关技能

• 数据绑定 - 了解 DataManager 的高级用法
• 模板自定义 - 创建自定义布局
• 主题设置 - 设置样式和主题

---

**后续步骤：**阅读入门参考，设置你的第一个 Kanban 看板，然后根据需求探索具体功能。