跳至主要内容

columns

描述​

可选。包含列数据的对象数组

用法​

columns?: [
    {
        id: string,
        label?: string,
        collapsed?: boolean,
        limit?: number | object,
        strictLimit?: boolean,
        css?: string,
        overlay?: any
    },
    {...} // 其他列数据
];

参数​

每个列可以使用以下属性（数据）进行配置:

  • id - （必需）列的唯一ID。用于通过相关方法管理该列。
  • label - （可选）显示在列头的标签。
  • collapsed - （可选）指示列的初始状态。若为true，列初始为折叠状态。默认值为false（展开）。
  • limit - （可选）可以是以下两种类型之一:
    • number - 设置列中允许的最大卡片数。
    • object - 按行（泳道）的ID定义卡片限制。
  • strictLimit - （可选）启用严格限制。如果为true，用户不能添加超过limit参数指定数量的卡片。默认值为false。
  • css - （可选）为单个列应用自定义 CSS 样式。
  • overlay - （可选）为列添加覆盖层。这对于定义覆盖整个列的模板非常有用，例如:
    overlay: template(`
        <div className="blockOverlay disable-drop">
            <span className="disable-drop-header">不允许放置</span>
            <span className="disable-drop-description">只有测试人员可以将卡片移动到此列</span>
        </div>`)
信息

要动态更新列数据，可以使用 parse() 方法。

示例​

const columns = [
    {
        label: "待办事项",
        id: "backlog",
        collapsed: true,
        limit: 3,
        strictLimit: true,
        css: "red"
    },
    {
        label: "进行中",
        id: "inprogress",
        collapsed: false,
        limit: {
            // 限制 “进行中” 列中 “Feature” 和 “Task” 行的卡片数量
            feature: 3,
            task: 2
        },
        strictLimit: false
    },
    {
        label: "已完成",
        id: "done",
        overlay: template(`
            <div className="blockOverlay disable-drop">
                <span className="disable-drop-header">不允许放置</span>
                <span className="disable-drop-description">只有测试人员可以将卡片移动到此列</span>
            </div>`)
    }
];

new kanban.Kanban("#root", {
    columns,
    cards,
    rows,
    // 其他参数
});

更新日志: css 和 overlay 属性在版本 1.4 中引入。

相关文章:

相关示例: