在本教程中，我们将向您展示如何指定左侧 格的列，并为您简要概述dhtmlxGantt中的模板化和格式设置功能。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。
dhtmlxGantt试用版
在本教程中，我们将向您展示如何指定左侧 格的列，并为您简要概述dhtmlxGantt中的模板化和格式设置功能，您可以观看视频教程或阅读文章内容：
甘特图中的 格列指定为“列”配置内的对象数组。
典型的配置如下所示：
gantt.config.columns = [ {name: "text", tree: true, width: '*', resize: true}, {name: "start_date", align: "center", resize: true}, {name: "duration", align: "center"}, {name: "add", width: 44}];
实际上，即使您未在应用中指定此设置，这也是默认情况下将具有的配置。
列具有很多可选属性。要知道的重要一点是，只有’name’属性是强制性的。其主要目的是定义单元格的内容。默认情况下，单元格将从任务的match属性中获取值：
document.addEventListener("DOMContentLoaded", function(event) { gantt.config.columns = [ {name: "text", tree: true, width: '*', resize: true}, {name: "start_date", align: "center", resize: true}, {name: "duration", align: "center"}, {name: "add", width: 44} ]; gantt.init("gantt_here"); gantt.parse({ data: [ { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10, progress: 0.4, open: true }, { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10, progress: 0.6, parent: 1 }, { id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20, progress: 0.6, parent: 1 } ], links: [ {id: 1, source: 1, target: 2, type: "1"}, {id: 2, source: 2, target: 3, type: "0"} ] });});
正如您在上面的示例中看到的那样，名为“文本”的列显示了任务对象的“文本”属性中的值。开始日期和持续时间也是如此。
唯一的例外是名为“add”的列–这是一个预定义的值，显示“+” ，允许用户为该任务添加子项。
基于此，您可以指定自己的列。例如，要在 格中定义四个自定义列，例如“任务名称”，“保持器”，“开始时间”和“进度”，我们应指定columns参数，其中“text”，“holder”，“start_date” ‘和’progress’是数据属性的名称。
gantt.config.columns = [ {name:"text", label:"Task name", tree:true, width: 150 }, {name:"holder", label:"Holder", align:"center", width: 80 }, {name:"start_date", label:"Start time", align:"center", width: 80 }, {name:"progress", label:"Progress", align:"center", width: 80 },];
但是，如果您想在将值显示在单元格中之前格式化值，该怎么办这种情况下，您将需要使用列的’template’属性。如果我们在其中使用模板，则上面的示例如下所示：
gantt.config.columns = [ {name:"text", label:"Task name", tree:true, width:"*" }, {name:"start_date", label:"Start time", align: "center" }, {name:"staff", label:"Holder(s)", template:function(obj){ return obj.holder+"("+obj.progress")"} }];
每次重绘该列时，都会调用该模板，并将返回值放入单元格的内部HTML中。这是甘特图中几乎所有模板的重要特征。每次更新后，模板元素的内容将完全替换。这意味着，如果直接从代码中修改此类DOM元素，则下次调用模板后，所有更改将丢失。
因此，如果您需要根据用户操作来更改单元格的类型，最好的方法不是直接更改样式，而是使用模板功能设置必要的样式和标记。
gantt.config.columns = [ {name:"text", label:"Task name", tree:true, template(task){ if(gantt.getState().selected_task == task.id){ return "<b>" + task.text + "</b>"; }else{ return task.text; }; } }, {name:"start_date", label:"Start time", align: "center" }, {name:"staff", label:"Holder(s)", template:function(obj){ return obj.holder+"("+obj.progress+")"} } ];
其次，请务必注意，模板处理原始HTML值，并且不清除以任何方式从它们返回的数据。这是一个有意识的设计决策，使您可以自由自定义大多数甘特元素。但这有一个严重的后果–这样的模板可以用作XSS攻击的入口点。让我们考虑下一个示例：
document.addEventListener("DOMContentLoaded", function(event) { gantt.config.columns = [ {name:"text", label:"Task name", tree:true, template(task){ if(gantt.getState().selected_task == task.id){ return "<b>" + task.text + "</b>"; }else{ return task.text; }; } }, {name:"start_date", label:"Start time", align: "center" }, {name:"staff", label:"Holder(s)", template:function(obj){ return obj.holder+"("+obj.progress+")"} } ]; gantt.init("gantt_here"); gantt.parse({ data: [ { id: 1, text: "<img onerror='javascript:alert("it can`t be good"")' src='' />""
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！