目前市面上最有名的幾個gantt插件佔據江湖了很是久遠的時間,它們古老又強大。 但無一例外的是:它們收費或極其難用而且依賴很是古老的技術,其中有些技術如今入行的新手甚至從未聽聞。
【jQueryGantt】【plusgantt】【dhtmlx】
不能否認它們都很是的強大,無論是從性能仍是功能性。可是大多的業務需求並不須要如此龐然大物才能知足需求。
另外一方面古老的技術稀缺的文檔又讓開發者無從下手(收費版甚至不提供文檔,而你的老闆又確定不會提供錢買下受權)。 【wl-gantt】
出現的背景就是筆者在公司的Vue項目中使用B***Gantt插件所受到的巨大傷害:基於extjs(對於17年入行的我來講沒聽過)、不提供開發文檔、沒有中文資料、源碼加密,開發全靠打印實例找屬性。 wl-gantt是一個基於Vue及elementUi的gantt甘特圖插件,是一個896的碼奴在僅有的剩餘的1中擠時間開發而成。
它目前僅提供了不多的功能:自動檢查源數據是否符合project任務安排規則,結束後開始的前置任務規則。yearAndmonth的gantt時間跨度。
但它絕對簡單易用,而且高度可配置。
它的實際年齡才只有3天,它正在我和全部熱愛開源事業的朋友們手中逐漸長大。
下個階段,它將學會:css
npm i wl-gantt --save
html
或git
npm i wl-gantt -S
github
import wlGantt from 'wl-gantt'
npm
import "wl-gantt/lib/wl-gantt.css"
ide
Vue.use(wlGantt)
性能
序號 | 參數 | 說明 | 類型 | 可選值 | 默認值 | 注意 |
---|---|---|---|---|---|---|
1 | data | 數據 | Array | - | [] | - |
2 | dateType | gantt圖區日期表頭類型 | String | monthAndDay、yearAndMonth、yearAndDay | yearAndMonth | - |
3 | treeProps | 樹表配置項 | Object | - | - | 見下方props |
4 | startDate | 項目開始時間 | String、Object | 必填 | - | 注意:不要求任務時間線在項目開始時間內,而且當任務時間超出項目時間時,將更新項目時間 |
5 | endDate | 項目結束時間 | String、Object | 必填 | - | 注意:不要求任務時間線在項目開始時間內,而且當任務時間超出項目時間時,將更新項目時間 |
6 | checkSource | 是否檢查源數據符合規則 | Boolean | - | - | 檢查源數據爲自動修改不符合規範的時間爲符合規則的指望值 |
7 | treatIdAsIdentityId | 是否使用id來做爲自增id | Boolean | - | false | 若是是請保證id原本就簡短的數字型而不是較長的字符串或guid |
8 | solt | 表格列支持solt自定義內容 | - | - | - | 在默認的名字、開始時間、結束時間列以後 |
序號 | 參數 | 說明 | 默認值 |
---|---|---|---|
1 | children | 數據的子集children字段 | children |
2 | name | 用於顯示名字的字段 | name |
3 | id | 每條數據的id,必須惟一 | id |
4 | pid | 每條數據的父節點id字段 | pid |
5 | startDate | 每條數據的開始時間字段 | startDate |
6 | endDate | 每條數據的結束時間字段 | endDate |
7 | identityId | 數據自增id | identityId |
8 | parents | 自增父級id樹,逗號分隔 | parents |
9 | pre | 前置任務字段,字段值應是前置任務的id | pre |
序號 | 事件名 | 說明 | 回調參數 |
---|---|---|---|
1 | timeChange | 當任務時間發生更改時觸發 | function(row) 依次爲當前行數據 |