现在，我们将向您展示将js甘特图与Vue.js（渐进式JavaScript框架）结合使用的最简单方法。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的JavaScript / HTML5甘特图，允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。
dhtmlxGantt正式版
倾听变化和处理事件
假设我们需要跟踪用户对Gantt所做的更改并以某种方式进行处理-以单独的形式显示所选项目的详细信息，保持父组件的数据模型为最新状态，或将这些更改发送到后端。 换句话说，我们需要一种方法让应用程序的其余部分知道甘特内部发生的情况。
为此，我们可以创建一个带有自定义路由器对象的DataProcessor，其中路由器是一个函数，$ emit DataProcessor事件传递给父组件。
作为一个简单的演示，让我们实现一个“更改日志”功能-我们将在甘特文件中所做的所有更改都写在页面上整洁的列表中。
首先，进入Gantt组件，并添加将跟踪并发出dhtmlxGantt更改的代码。在gantt.init调用之后添加以下代码：
{{ src/components/Gantt.vue }} gantt.createDataProcessor((entity, action, data, id) => { this.$emit(`${entity}-updated`, id, action, data); });
它将处理程序添加到链接和任务的添加/更新/删除事件中。 如果某个特定的处理程序被调用，它将触发带有参数的组件上的vue事件。
下一步是将这些事件的侦听器添加到应用程序组件中，并在另一个div中写入操作日志。
让我们使用所需的功能扩展应用程序组件：
{{ src/App.vue }}<script>import Gantt from './components/Gantt.vue';export default { name: 'app', components: {Gantt}, data () { return { tasks: { data: [ {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6}, {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4} ], links: [ {id: 1, source: 1, target: 2, type: '0'} ] }, messages: [] } }, methods: { addMessage (message) { this.messages.unshift(message) if (this.messages.length > 40) { this.messages.pop() } }, logTaskUpdate (id, mode, task) { let text = (task && task.text ` (${task.text})`: '') let message = `Task ${mode}: ${id} ${text}` this.addMessage(message) }, logLinkUpdate (id, mode, link) { let message = `Link ${mode}: ${id}` if (link) { message += ` ( source: ${link.source}, target: ${link.target} )` } this.addMessage(message) } }}</script><style> html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; width: 100%; } .left-container { overflow: hidden; position: relative; height: 100%; } .right-container { border-right: 1px solid #cecece; float: right; height: 100%; width: 340px; box-shadow: 0 0 5px 2px #aaa; position: relative; z-index:2; } .gantt-messages { list-style-type: none; height: 50%; margin: 0; overflow-x: hidden; overflow-y: auto; padding-left: 5px; } .gantt-messages > .gantt-message { background-color: #f4f4f4; box-shadow:inset 5px 0 #d69000; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; margin: 5px 0; padding: 8px 0 8px 10px; }</style>
您可以在此处看到的内容–我们在要存储日志条目的位置添加了一个数组属性，该方法将新消息添加到该数组的顶部（我们的日志将首先显示新条目）。此外，我们还添加了两种方法，这些方法将为使用任务和链接完成的操作创建日志消息，并将它们添加到消息堆栈中。
最后，更新应用程序组件的模板以利用以下功能：
{{ src/App.vue }}<template> <div class="container"> <div class="right-container"> <ul class="gantt-messages"> <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">{{message}}</li> </ul> </div> <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"></gantt> </div></template>
我们添加了一个简单的两列布局，将日志处理程序附加到了从甘特模块发出的甘特事件，添加了用于存放日志消息的容器并将其绑定到日志消息堆栈。
现在，如果我们对甘特做了一些更改，则消息应该显示在右侧。
如果要显示有关所选任务的一些信息，请继续以下说明。
为了显示有关所选任务的信息，我们可以捕获DHTMLX Gantt（’onTaskSelected’）的API事件，并将它们$ emit到父组件。 更改任务ID后，我们还可以使用“ onTaskIdChange”事件来更新信息。
打开Gantt图表组件，并在gantt.init调用之前添加以下代码：
{{ src/components/Gantt.vue }} gantt.attachEvent('onTaskSelected', (id) => { let task = gantt.getTask(id); this.$emit('task-selected', task);}); gantt.attachEvent('onTaskIdChange', (id, new_id) => { if (gantt.getSelectedId() == new_id) { let task = gantt.getTask(new_id); this.$emit('task-selected', task); } });
在这里，我们添加了onTaskSelected处理程序，该处理程序将触发“任务选择”事件。
打开应用程序组件以向其中添加选择处理程序。 我们还需要向模板中添加一些必要的元素。它看起来应该像这样：
{{ src/App.vue }}<template> <div class="container"> <div class="right-container"> <div class="gantt-selected-info"> <div v-if="selectedTask"> <h2>{{selectedTask.text}}</h2> <span><b>ID: </b>{{selectedTask.id}}</span><br/> <span><b>Progress: </b>{{selectedTask.progress|toPercent}}%</span><br/> <span><b>Start Date: </b>{{selectedTask.start_date|niceDate}}</span><br/> <span><b>End Date: </b>{{selectedTask.end_date|niceDate}}</span><br/> </div> <div v-else class="select-task-prompt"> <h2>Click any task</h2> </div> </div> <ul class="gantt-messages"> <li class="gantt-message" v-for="message in messages" v-bind:key="index">{{message}}</li> </ul> </div> <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate" @task-selected="selectTask"></gantt> </div></template>
还需要设置样式，以美观的方式显示有关所选任务的信息：
<style>....gantt-selected-info { border-bottom: 1px solid #cecece; box-sizing: border-box; font-family: Geneva, Arial, Helvetica, sans-serif; height: 50%; line-height: 28px; padding: 10px; } .gantt-selected-info h2 { border-bottom: 1px solid #cecece; } .select-task-prompt h2{ color: #d9d9d9; }</style>
在这里，我们添加了另一个容器，该容器使用“ v-if”指令绑定到了应用程序组件的selectedTask属性。 此外，我们为现在发出的“任务选择”事件添加了处理程序。
确保将此属性添加到应用程序组件：
{{ src/App.vue }} selectedTask: null
并添加selectTask方法，该方法在我们上面定义的处理程序中使用：
{{ src/App.vue }} selectTask: function(task){ this.selectedTask = task }
因此，每次用户在Gantt内部选择任务时，该组件都会发出“任务选择”事件。 然后，此事件由应用程序组件捕获。 在事件处理程序内部，我们更新selectedTask属性，该属性依次调用带有任务详细信息的.gantt-selected-info元素的重绘。
请注意，任务对象具有Date类型的start_date / end_date属性和float类型的进度完成-在将它们添加到页面之前，应使用易于使用的格式对其进行格式化。
它是使用toPercent和niceDate过滤器实现的，我们定义如下：
{{ src/App.vue }}filters: { toPercent (val) { if(!val) return '0' return Math.round((+val) * 100) }, niceDate (obj){ return '${obj.getFullYear()} / ${obj.getMonth()} / ${obj.getDate()}' } }
现在，如果我们运行我们的应用程序并选择一个任务，我们应该看到它的信息显示在右侧。
因此，我们借助DHTMLX Gantt和Vue.js创建了一个简单的Gantt图表。我们的工作结果可以在GitHub上找到。如果您按照上述说明进行操作，遇到任何困难，请随时与我们分享。
相关内容推荐：
试用下载>>>
了解APS系统>>>
甘特图dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（上）
想要购买dhtmlxGantt正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！