任务栏 TaskColumn

配置任务栏的列

const taskData = []
// default columns definition
const columns = [
  {name:"text", label:"Task name", tree:true, width:'*' },
  {name:"start_date", label:"Start time", align: "center" },
  {name:"duration", label:"Duration", align: "center" },
  {name:"add", label:"" } // 添加按钮列
];
const netGraph = new NetPlanGraph({
  container: document.getElementById('container'),
  task: taskData,
  columns: columns,
});

数组中的每个对象指定一列。对象可以采用以下属性：

• name(string | number) - 定义列的 ID。名称“add”允许您添加带有“+”号的列
• label(string | number) - 指定列的标题
• tree(boolean) - 指示相关列应显示树
• hide(boolean) - 隐藏或显示相关列
• align(string) - 设置水平标题对齐方式。可选值：left/right/center
• width(number | string) - 定义列的宽度
• resize(boolean) - 可以通过拖动列的边框来调整列的大小
• template((task)=>{}) - 设置数据模板、格式化数据

显示WBS编码

const columns = [
  {name:"wbs", label:"WBS", tree:true }, // WBS编码列
  {name:"text", label:"Task name", align: "center" },
  {name:"start_date", label:"Start time", align: "center" },
  {name:"duration", label:"Duration", align: "center" },
  {name:"add", label:"" } // 添加按钮列
];

自定义定义按钮、HTML等

const myFunc = (task) => {
  if(task.priority ==1)
    return "<div class='important'>"+task.text+" ("+task.users+") </div>";
  return task.text+" ("+task.users+")";
}

const columns = [
  {name:"text", label:"Task name", tree:true, width:'*', template: myFunc },
  {name:"start_date", label:"Start time", align: "center" },
  {name:"duration", label:"Duration", align: "center" },
  {name:"add", label:"" }
];

行内编辑

const netGraph = new NetPlanGraph({
  inlineEdit: true,
})

netGraph.isInlineEditEnabled() // 判断是否可以行内编辑
netGraph.enableInlineEdit() // 启用行内编辑
netGraph.disableInlineEdit() // 禁用用行内编辑