cards
描述
可选。包含卡片数据的对象数组
用法
cards?: [
{
id?: string | number,
label?: string,
description?: string,
progress?: number,
start_date?: Date,
end_date?: Date,
attached?: [
{
id: string | number,
url?: string,
previewURL?: string,
coverURL?: string,
name?: string,
isCover?: boolean
}, {...}
],
color?: string,
users?: array | string | number,
// users?: array - 多用户时使用，若使用 "multiselect" 编辑器类型分配用户
// users?: string | number - 单用户时使用，若使用 "combo" 或 "select" 编辑器类型分配用户
priority?: string | number,
css?: string,
votes?: array,
comments?: [
{
id: string | number,
userId: string | number,
cardId: string | number,
text?: string,
date?: Date,
}, {...}
],
[custom_key: string]?: any
}, {...} // 其他卡片数据
];
参数
每个卡片可以包含以下参数:
id- （可选）卡片的ID，用于通过相关方法管理卡片label- （可选）显示在标签字段中的文本标签description- （可选）显示在描述字段中的描述文本progress- （可选）进度条数值，范围0到100，显示在进度条字段start_date- （可选）开始日期，作为 Date 对象（避免字符串日期），显示在开始日期字段end_date- （可选）结束日期，作为 Date 对象（避免字符串日期），显示在结束日期字段attached- （可选）包含附件详情的数组，显示在附件字段。每个对象可包含:id- （必需）附件的IDurl- （可选）文件路径previewURL- （可选）预览图片路径coverURL- （可选）设置为封面的图片路径name- （可选）文件名isCover- （可选）当为 true 时，从 "coverURL" 加载封面图片
color- （可选）以 HEX 颜色代码表示卡片顶部线条颜色users- （可选）多用户时为用户 ID 的数组，单用户时为字符串或数字。分配用户时，在 cardShape.users 属性中定义用户数据数组。用户显示在用户字段
信息
users?: array - 当使用 multiselect 编辑器类型分配多个用户时，使用用户 ID 的数组
users?: string | number - 当使用 combo 或 select 编辑器类型分配单个用户时，指定单个用户 ID
priority- （可选）卡片的优先级 ID。在 cardShape.priority 属性中定义优先级数组。显示在优先级字段css- （可选）卡片的自定义 CSS 样式votes- （可选）投票用户 ID 数组comments- （可选）评论对象数组，包括:id- （必需）评论的IDuserId- （必需）评论者的用户 IDcardId- （必需）评论所属的卡片 IDtext- （可选）评论文本，可包含 HTML 标记date- （可选）表示评论发布时间的 Date 对象（编辑后不更新）
custom_key- （可选）卡片的任何自定义键。可用于定位卡片在列或行中的位置，详见 columnKey 和 rowKey 属性
信息
要动态加载新的卡片数据，可以使用 parse() 方法。
示例
const cards = [
{
id: 1,
label: "Integration with React",
description: "Some description",
progress: 25,
start_date: new Date("02/24/2022"),
end_date: new Date("02/24/2023"),
attached: [
{
id: 234,
url: "../assets/img-1.jpg",
previewURL: "../assets/img-1.jpg",
coverURL: "../assets/img-1.jpg",
name: "img-1.jpg",
isCover: true
}, {...} // 其他附件数据
],
color: "#65D3B3",
users: [1,2],
votes: [3,6,8],
comments: [
{
id: 1,
userId: 1,
cardId: 1,
text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ",
date: new Date(),
}, {...} // 其他评论
],
priority: 1,
// 自定义字段，用于将卡片放置在 "feature" 行
// 需要将 rowKey 配置设置为 "type" 值
type: "feature",
// 自定义字段，用于将卡片放置在 "backlog" 列
// 需要将 columnKey 配置设置为 "stage" 值
stage: "backlog",
css: "red",
}, {...} // 其他卡片数据
];
new kanban.Kanban("#root", {
columns,
cards,
// 其他参数
});
更新日志: css、comments 和 votes 参数自 v1.4 版本引入
相关内容:
相关示例: Kanban. Styling cards