跳至主要内容

columnShape

描述​

可选。用于管理列外观的设置对象

用法​

columnShape?: {
    menu?: {
        show?: boolean,
        items?: [
            {
                id?: string,
                icon?: string,
                text?: string,
                disabled?: boolean,
                onClick?: ({ id, item, column }) => void,
                data?: array // 菜单子项数组
            }, 
            {...}
        ] | ({ column, columnIndex, columns, readonly }) => array | null
    },
    fixedHeaders?: boolean,
    css?: (column, cards) => string,
    headerTemplate?: template(props => {
        return "展开状态下列头的 HTML 模板";
    }),
    collapsedTemplate?: template(props => {
        return "折叠状态下列头的 HTML 模板";
    }),
    confirmDeletion?: boolean
};

参数​

要配置列的外观，可以在 columnShape 对象中指定以下参数：

  • menu - （可选）列上下文菜单的参数对象。可以指定以下参数：

    • show - （可选）启用或禁用列上下文菜单
    • items - （可选）包含列上下文菜单项参数的对象数组。每个菜单项可以指定以下参数：

      • id - （可选）菜单项的 ID。要实现内置操作，需要指定以下值：

        • "add-card" - 添加新卡片的操作
        • "set-edit" - 编辑列名称的操作
        • "move-column:left" - 向左移动列的操作
        • "move-column:right" - 向右移动列的操作
        • "delete-column" - 删除列的操作

      • icon - （可选）菜单项图标的类名。这里可以指定任何与图标字体相关的图标（如 mdi-delete）

      • text - （可选）菜单项名称

      • disabled - （可选）菜单项状态（激活 或 禁用，取决于布尔值）

      • onClick - （可选）自定义回调函数，接受以下参数：

        • id - 当前菜单项的 ID
        • item - 当前菜单项的数据对象
        • column - 目标列的数据对象

      • data - （可选）表示菜单子项的对象数组

    信息

    你也可以将 menu.items 参数设置为自定义函数，该函数接受以下参数：

    • column - 当前列的数据对象
    • columnIndex - 当前列的索引
    • columns - 包含所有列数据的对象数组
    • readonly - 只读的 状态属性 对象

    该函数允许为任意列自定义菜单，或者通过返回 null 或 false 来隐藏特定列的菜单：

    items: ({ column }) => {
        if(column.id === "inprogress"){
            return null;
        } 
        if (column.id === "backlog"){
            return [
                { id: "set-edit", icon: "wxi-edit", text: "重命名" },
                {
                    id: "delete-card",
                    icon: "wxi-delete",
                    text: "移除卡片"
                }
            ];
        }       
    }

  • fixedHeaders - （可选）在垂直滚动时固定列头（默认 true）。必须在看板本身启用滚动（限制高度）

  • css - （可选）一个函数，根据条件返回应用于列的 CSS 类名

  • headerTemplate - （可选）展开状态下列头的 HTML 模板。该函数接收一个 props 对象，包含以下属性：

    • column - （对象）列数据（结构参见 columns）

    • columnState - （对象）列的当前状态，始终包含以下属性：

      • columnId - （string | number）列的 ID
      • column - （对象）列数据（与 props.column 相同）
      • cardsCount - （number）列中卡片数量
      • noFreeSpace - （boolean）当列无法接受更多卡片时为 true

      当启用 columns[i].limit 参数时，还包含：

      • totalLimit - （number）配置的卡片数量限制
      • isOverLimit - （boolean）当卡片数量超过限制时为 true

      当列属于泳道（行）时，还包含：

      • rowId - （string | number）行的 ID
      • row - （对象）行数据（结构参见 rows）
      • height - （number）区域高度

    • isMenuVisible - （boolean）当该列头应显示菜单时为 true

    • renaming - （boolean）当列名编辑输入框处于激活状态时为 true

    • readonly - （boolean）当列编辑被禁用时为 true（等同于 !readonly.edit，参见 readonly 属性）

  • collapsedTemplate - （可选）折叠状态下列头的 HTML 模板。该函数接收一个 props 对象，包含以下属性：

    • column - （对象）列数据（参见 columns）
    • columnState - （对象）列的当前状态，结构与上方 headerTemplate 参数中的 columnState 相同

  • confirmDeletion - （可选）显示/隐藏 确认对话框，允许用户确认或取消列的删除操作

默认配置​

const getDefaultColumnMenuItems = ({ column, columnIndex, columns, readonly }) => [
    { id: "add-card", icon: "wxi-plus", text: "添加新卡片" },
    { id: "set-edit", icon: "wxi-edit", text: "重命名" },
    {
        id: "move-column:left",
        icon: "wxi-arrow-left",
        text: "左移",
        disabled: columnIndex <= 0
    },
    {
        id: "move-column:right",
        icon: "wxi-arrow-right",
        text: "右移",
        disabled: columnIndex >= columns.length - 1
    },
    { id: "delete-column", icon: "wxi-delete", text: "删除" }
];
const columnShape = {
    menu: {
        show: true,
        items: getDefaultColumnMenuItems
    },
    fixedHeaders: true,
    confirmDeletion: true
};

示例​

const columnShape = {
    menu: {
        show: true,
        items: [
            {
                id: "color",
                text: "颜色",
                data: [
                    { 
                        id:"yellow", 
                        text: "黄色",
                        onClick: ({ column }) => changeColumnColor(column, "yellow")
                    },
                    { 
                        id:"red", 
                        text: "红色",
                        onClick: ({ column }) => changeColumnColor(column, "red")
                    },
                    { 
                        id:"green", 
                        text: "绿色",
                        onClick: ({ column }) => changeColumnColor(column, "green")
                    }
                ]
            }
        ]
    },
    fixedHeaders: false,
    css: (column, cards) => column.id == "inprogress" && cards.length < 5 ? "green" : "red",
    headerTemplate: template(props => {
        return `<div className="wx-collapse-icon" data-action=${"collapse"}>
                    <i className=${props.column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}></i>
                </div>
                ${
                    !props.column.collapsed
                        ?   `<div className="wx-label" data-action="rename">
                                ${escapeHTML(props.column.label)}
                                (${props.columnState.cardsCount})
                            </div>`
                        : ""
                }
                ${
                    !props.column.collapsed
                        ?   `<div className="wx-menu" data-menu-id=${props.column.id}>
                                <i className="wxi-dots-h"></i>
                            </div>`
                        : ""
                }`;
    }),
    collapsedTemplate: template(props => {
        return `<div className="wx-collapsed-label">
                    <div className="wx-label-text">${escapeHTML(props.column.label)} (${
                        props.columnState?.cardsCount
                    })</div>
                </div>`;
    }),
    confirmDeletion: true
};

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

更新日志：

  • css 参数在 v1.4 版本新增
  • menu.items[0].label 参数在 v1.4 版本被废弃，替换为 menu.items[0].text
  • menu.items[0].items 参数在 v1.4 版本被废弃，替换为 menu.items[0].data
  • fixedHeaders 参数在 v1.5 版本新增
  • headerTemplate 和 collapsedTemplate 参数在 v1.6 版本新增
  • menu.items[0].label 和 menu.items[0].items 参数在 v1.7 版本移除
  • menu.items 函数更新，v1.7 版本中 store 参数替换为 readonly

相关文章： 配置

相关示例：

Need more help?Contact Support