翻譯|使用教程|編輯:莫成敏|2020-05-12 14:59:08.683|閱讀 2152 次
概述:現(xiàn)在,我們將向您展示將js甘特圖與Vue.js(漸進(jìn)式JavaScript框架)結(jié)合使用的最簡單方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的JavaScript / HTML5甘特圖,允許你創(chuàng)建動態(tài)甘特圖,并以一個方便的圖形化方式可視化項目進(jìn)度。有了dhtmlxGantt,你可以顯示活動之間的依賴關(guān)系,顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。
我們的甘特圖庫(除快速的性能和豐富的功能之外)非常令人贊嘆的是,它允許與幾乎所有新的流行框架和技術(shù)集成。現(xiàn)在,我們將向您展示將js甘特圖與Vue.js(漸進(jìn)式JavaScript框架)結(jié)合使用的最簡單方法。本文是該教程下半部分內(nèi)容,緊接上文!
傾聽變化和處理事件
假設(shè)我們需要跟蹤用戶對Gantt所做的更改并以某種方式進(jìn)行處理-以單獨的形式顯示所選項目的詳細(xì)信息,保持父組件的數(shù)據(jù)模型為最新狀態(tài),或?qū)⑦@些更改發(fā)送到后端。 換句話說,我們需要一種方法讓應(yīng)用程序的其余部分知道甘特內(nèi)部發(fā)生的情況。
為此,我們可以創(chuàng)建一個帶有自定義路由器對象的DataProcessor,其中路由器是一個函數(shù),$ emit DataProcessor事件傳遞給父組件。
	作為一個簡單的演示,讓我們實現(xiàn)一個“更改日志”功能-我們將在甘特文件中所做的所有更改都寫在頁面上整潔的列表中。
首先,進(jìn)入Gantt組件,并添加將跟蹤并發(fā)出dhtmlxGantt更改的代碼。在gantt.init調(diào)用之后添加以下代碼: 
   {{ src/components/Gantt.vue }}  
gantt.createDataProcessor((entity, action, data, id) => { 
      this.$emit(`${entity}-updated`, id, action, data);
   });
它將處理程序添加到鏈接和任務(wù)的添加/更新/刪除事件中。 如果某個特定的處理程序被調(diào)用,它將觸發(fā)帶有參數(shù)的組件上的vue事件。
下一步是將這些事件的偵聽器添加到應(yīng)用程序組件中,并在另一個div中寫入操作日志。
讓我們使用所需的功能擴(kuò)展應(yīng)用程序組件:
{{ 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>
	
您可以在此處看到的內(nèi)容–我們在要存儲日志條目的位置添加了一個數(shù)組屬性,該方法將新消息添加到該數(shù)組的頂部(我們的日志將首先顯示新條目)。此外,我們還添加了兩種方法,這些方法將為使用任務(wù)和鏈接完成的操作創(chuàng)建日志消息,并將它們添加到消息堆棧中。
最后,更新應(yīng)用程序組件的模板以利用以下功能:
{{ 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>
	
我們添加了一個簡單的兩列布局,將日志處理程序附加到了從甘特模塊發(fā)出的甘特事件,添加了用于存放日志消息的容器并將其綁定到日志消息堆棧。
現(xiàn)在,如果我們對甘特做了一些更改,則消息應(yīng)該顯示在右側(cè)。
	
 
如果要顯示有關(guān)所選任務(wù)的一些信息,請繼續(xù)以下說明。
為了顯示有關(guān)所選任務(wù)的信息,我們可以捕獲DHTMLX Gantt('onTaskSelected')的API事件,并將它們$ emit到父組件。 更改任務(wù)ID后,我們還可以使用“ onTaskIdChange”事件來更新信息。
打開Gantt圖表組件,并在gantt.init調(diào)用之前添加以下代碼:
{{ 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處理程序,該處理程序?qū)⒂|發(fā)“任務(wù)選擇”事件。
打開應(yīng)用程序組件以向其中添加選擇處理程序。 我們還需要向模板中添加一些必要的元素。它看起來應(yīng)該像這樣:
{{ 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>
	
還需要設(shè)置樣式,以美觀的方式顯示有關(guān)所選任務(wù)的信息:
<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”指令綁定到了應(yīng)用程序組件的selectedTask屬性。 此外,我們?yōu)楝F(xiàn)在發(fā)出的“任務(wù)選擇”事件添加了處理程序。
確保將此屬性添加到應(yīng)用程序組件:
   {{ src/App.vue }}    
   selectedTask: null
并添加selectTask方法,該方法在我們上面定義的處理程序中使用:
    {{ src/App.vue }}     
    selectTask: function(task){
      this.selectedTask = task
    }
因此,每次用戶在Gantt內(nèi)部選擇任務(wù)時,該組件都會發(fā)出“任務(wù)選擇”事件。 然后,此事件由應(yīng)用程序組件捕獲。 在事件處理程序內(nèi)部,我們更新selectedTask屬性,該屬性依次調(diào)用帶有任務(wù)詳細(xì)信息的.gantt-selected-info元素的重繪。
請注意,任務(wù)對象具有Date類型的start_date / end_date屬性和float類型的進(jìn)度完成-在將它們添加到頁面之前,應(yīng)使用易于使用的格式對其進(jìn)行格式化。
它是使用toPercent和niceDate過濾器實現(xiàn)的,我們定義如下:
{{ src/App.vue }}   
filters: {
    toPercent (val) {
      if(!val) return '0'
      return Math.round((+val) * 100)
    },
    niceDate (obj){
      return '${obj.getFullYear()} / ${obj.getMonth()} / ${obj.getDate()}'
    }
  }
現(xiàn)在,如果我們運行我們的應(yīng)用程序并選擇一個任務(wù),我們應(yīng)該看到它的信息顯示在右側(cè)。
	
 
因此,我們借助DHTMLX Gantt和Vue.js創(chuàng)建了一個簡單的Gantt圖表。我們的工作結(jié)果可以。如果您按照上述說明進(jìn)行操作,遇到任何困難,請隨時與我們分享。
相關(guān)內(nèi)容推薦:
	甘特圖dhtmlxGantt使用教程:如何在Vue.js框架中使用dhtmlxGantt(上)
 
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: