jQWidgets jqxKanban columnRenderer 属性

简介

jQWidgets jqxKanban是一个基于jQuery的看板组件，可以用于展示和管理任务、事项等。其columnRenderer属性用于定义列头渲染函数，可以自定义和配置列头的样式、文本、图标等。

API

columnRenderer

定义列头渲染函数

• 类型：function
• 参数：
  • columnHeader: object，列头对象，包含text、dataField等属性
  • status: string，列头所属状态
• 返回值：string，HTML字符串，列头渲染结果

使用方法

// 定义列头渲染函数
function myColumnRenderer(columnHeader, status) {
  const text = columnHeader.text;
  const progress = columnHeader.maxItems ? columnHeader.items.length / columnHeader.maxItems * 100 : 0;
  return `<div class="kanban-column-header">
    <div class="kanban-column-title">${text}</div>
    <div class="kanban-column-progress">
      <div class="kanban-column-progress-bar" style="width:${progress}%;"></div>
    </div>
  </div>`;
}

// 初始化看板组件
$('#myKanban').jqxKanban({
  columns: [
    { text: 'To Do', dataField: 'todo', maxItems: 5, columnRenderer: myColumnRenderer },
    { text: 'In Progress', dataField: 'inProgress', maxItems: 3, columnRenderer: myColumnRenderer },
    { text: 'Done', dataField: 'done', maxItems: 0, columnRenderer: myColumnRenderer }
  ],
  source: new $.jqx.dataAdapter({
    localData: [
      { text: 'Task 1', dataField: 'todo' },
      { text: 'Task 2', dataField: 'inProgress' },
      { text: 'Task 3', dataField: 'inProgress' },
      { text: 'Task 4', dataField: 'todo' }
    ]
  })
});

示例

以下是一个自定义列头的示例，用于展示看板中每个列的进度条：

function myColumnRenderer(columnHeader, status) {
  const text = columnHeader.text;
  const progress = columnHeader.maxItems ? columnHeader.items.length / columnHeader.maxItems * 100 : 0;
  return `<div class="kanban-column-header">
    <div class="kanban-column-title">${text}</div>
    <div class="kanban-column-progress">
      <div class="kanban-column-progress-bar" style="width:${progress}%;"></div>
    </div>
  </div>`;
}

$('#myKanban').jqxKanban({
  width: 600,
  height: 400,
  columns: [
    { text: 'To Do', dataField: 'todo', maxItems: 5, columnRenderer: myColumnRenderer },
    { text: 'In Progress', dataField: 'inProgress', maxItems: 3, columnRenderer: myColumnRenderer },
    { text: 'Done', dataField: 'done', maxItems: 0, columnRenderer: myColumnRenderer }
  ],
  source: new $.jqx.dataAdapter({
    localData: [
      { text: 'Task 1', dataField: 'todo' },
      { text: 'Task 2', dataField: 'inProgress' },
      { text: 'Task 3', dataField: 'inProgress' },
      { text: 'Task 4', dataField: 'todo' }
    ]
  })
});

参考链接

• jQWidgets jqxKanban documentation