wl gantt
1.0.0
ガントチャートは横棒グラフ、棒グラフ、生産計画進捗図とも呼ばれます。棒グラフを使用して、プロジェクト、スケジュール、その他の時間関連のシステムの進行状況の内部関係を時間の経過とともに表示します。提案者のヘンリー・ローレンス・ガント氏にちなんで命名されました。
市場で最も有名なガント プラグインは、長い間世界中に存在しており、古くから強力です。 しかし例外なく、これらは料金がかかるか、使用が非常に難しく、非常に古いテクノロジーに依存しており、今日この業界に参入する初心者の中には聞いたことさえないものもあります。
[jQueryGantt][plusgantt][dhtmlx] パフォーマンスと機能の両方の点で、非常に強力であることは否定できません。しかし、ほとんどのビジネス ニーズでは、そのような巨大企業がニーズを満たす必要はありません。 その一方で、古代のテクノロジーのドキュメントが不足しているため、開発者が始めるのは困難です（有料版にはドキュメントさえ提供されておらず、上司はライセンスを購入するためのお金を絶対に提供しません）。
wl-ganttの登場の背景には、会社の Vue プロジェクトで B***Gantt プラグインを使用したときに私が受けた大きな被害がありました。これは extjs をベースにしています (私は入社して以来、一度も聞いたことがありません)。業界で 17 年間)、開発ドキュメントは提供されず、中国語もありません。データとソース コードは暗号化され、開発は属性を見つけるために印刷されたサンプルに完全に依存しています。 wl-gantt Vue と elementUi をベースにしたガント ガント チャート プラグインです。残り 1 時間で 896 コード スレーブによって開発されました。
提供する機能には、ソース データがプロジェクト タスクのスケジュール ルールに準拠しているかどうかの自動チェック、終了後に開始するプレタスク ルール、yearAndmonth|yearAndWeek|ManthAndDay の日付範囲切り替え、および組み込みのプレタスク マネージャーが含まれます。
その利点は、非常にシンプルで使いやすく、高度に構成可能であり、不適格なデータを自動的に平滑化し、プロンプトを表示し、理由のない例外が発生しないことです。
徐々に成長し、次の段階では次のことを学習します。
1. YearAndMonth、monthAndDay、yearAndWeek のタイムスパン構成 [完了しました。月と週のグリッドの開始位置と終了位置を調整する必要があります]
2. プリタスクセレクター搭載 [完成]
3. ツリーテーブル全選択連携機能の統合【完了】
4. タスク コールバックの追加と削除 [完了]
4. タスク接続線
5. タスク用のカスタマイズされたフローティング プロンプト
6. 使用する必要があると思われるすべての要件
wl-gantt はシンプルですっきりとした外観を持ち、非常に使いやすく、高度な構成が可能です。
jquery Ganttは大きくて古くて醜いですが、ドキュメントは明確です
jsガント これ以上は言いたくない
dhtmlxGantt は強力で包括的ですが、使い方が難しく、最新のフレームワークや UI ライブラリには適していません。
フラッペガントには機能が少ない
bryntum はより美しい唯一のツールですが、構成機能が低く、コンポーネントと組み合わせることができません。ルールが厳格で、プロジェクトの使用量に準拠していません。 950 ドルです。強力ですが、ドキュメントには簡単な紹介と詳細な使用法しか記載されていません。コンソールに出力することしかできません。
2020-04-03 遅延読み込み 2020-02-20 ガントを更新、詳細についてはバージョン説明 1.0.1 を参照 2019-12-14 ガントを更新、組み込みのフロントエンド タスク列を追加、複数選択フロントエンドとサポートフロントエンドを単一選択するだけで、ソース データの合法性を自動的に検証する事前タスクが実行されます。 2019-12-3 ガントチャートを更新しました。 1. テーブルは、el-table のほとんどの
AttributesとEventsをサポートします。以下の詳細なリストを参照してください。 2. name 列は、nameFormatter形式のコンテンツ関数のサポートを追加します。入力ボックスを編集します。
2019-12-2yearAndMonth、monthAndDay、yearAndWeekために gantt.1 の日付を更新しました。詳細については版本记录1参照してください。一部の時間変更でコールバックが発生しない問題が修正されました。
:fit="fit"
:size="size"
:border="border"
:data="selfData"
:stripe="stripe"
:height="height"
:row-key="rowKey"
:row-style="rowStyle"
:class="dateTypeClass"
:cell-style="cellStyle"
:max-height="maxHeight"
:tree-props="selfProps"
:current-row-key="rowKey"
:row-class-name="rowClassName"
:cell-class-name="cellClassName"
:expand-row-keys="expandRowKeys"
:header-row-style="headerRowStyle"
:header-cell-style="headerCellStyle"
:default-expand-all="defaultExpandAll"
:header-row-class-name="headerRowClassName"
:highlight-current-row="highlightCurrentRow"
:header-cell-class-name="headerCellClassName"
@header-contextmenu="handleHeaderContextMenu"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
@current-change="handleCurrentChange"
@cell-mouse-enter="handleMouseEnter"
@cell-mouse-leave="handleMouseLeave"
@expand-change="handleExpandChange"
@filter-change="handleFilterChange"
@cell-dblclick="handleCellDbClick"
@header-click="handleHeaderClick"
@row-dblclick="handleRowDbClick"
@sort-change="handleSortChange"
@cell-click="handleCellClick"
@select-all="handleSelectAll"
@row-click="handleRowClick"
@select="handleSelect"
npm i wl-gantt --save
または
npm i wl-gantt -S
import wlGantt from 'wl-gantt'
import "wl-gantt/lib/wl-gantt.css"
Vue.use(wlGantt)
| シリアルナンバー | パラメータ | 説明する | タイプ | オプションの値 | デフォルト値 | 知らせ |
|---|---|---|---|---|---|---|
| 1 | データ | データ | 配列 | - | [] | - |
| 2 | 日付タイプ | ガント チャート領域の日付ヘッダーの種類 | 弦 | 月と日、年と月、年と日 | 年と月 | - |
| 3 | 木小道具 | ツリーテーブルの構成項目 | 物体 | - | - | 以下の小道具を参照してください |
| 4 | 開始日 | プロジェクトの開始時間 | 文字列、オブジェクト | 必須 | - | 注: タスクのタイムラインはプロジェクトの開始時間内である必要はありません。タスクの時間がプロジェクト時間を超えると、プロジェクトの時間が更新されます。 |
| 5 | 終了日 | プロジェクトの終了時間 | 文字列、オブジェクト | 必須 | - | 注: タスクのタイムラインはプロジェクトの開始時間内である必要はありません。タスクの時間がプロジェクト時間を超えると、プロジェクトの時間が更新されます。 |
| 6 | ソースを確認する | ソースデータがルールに準拠しているかどうかを確認するかどうか | ブール値 | - | - | ソース データを確認して、仕様を満たしていない時間をルールを満たす期待値に自動的に修正します。 |
| 7 | ID を ID として扱う | 自動インクリメント ID として ID を使用するかどうか | ブール値 | - | 間違い | その場合は、ID が長い文字列や GUID ではなく、短い数字であることを確認してください。 |
| 8 | autoGanttDateType | ガント時間範囲タイプを自動的に調整する特定のルールについては、版本记录1参照してください。 | ブール値 | - | 真実 | - |
| 9 | 名前フォーマッター | 名前列形式コンテンツ関数 | 関数 | - | - | 関数(行、列、セル値、インデックス) |
| 10 | その他のテーブルの属性 | 書類のアドレス | - | - | - | - |
| 11 | usePreColumn | 内蔵フロントタスクバーを使用するかどうか | ブール値 | - | 間違い | - |
| 12 | 前倍数 | 前提条件タスクに対して複数の選択を行うことはできますか? | ブール値 | - | 真実 | 複数選択が有効な場合、pre フィールドは配列である必要があります。それ以外の場合は NumberString にすることができます。 |
| 13 | プリフォーマッター | プレフィックスコンテンツ列の書式設定関数 | 関数 | - | - | 渡されない場合は、 prop name字段+，に従って接続されます |
| 14 | 空のセルテキスト | Null 値セルのプレースホルダー | 弦 | - | 「-」 | - |
| 15 | useCheckColumn | 組み込みのチェックボックス列を使用するかどうか | ブール値 | - | 間違い | - |
| 16 | useIndexColumn | 組み込みのシリアル番号列を使用するかどうか | ブール値 | - | 間違い | - |
| 17 | 編集 | 編集可能ですか? | ブール値 | - | 真実 | - |
| 18 | 親子 | チェックボックスを使用する場合、親子関係が正しいかどうか | ブール値 | - | 真実 | props の id フィールドと child フィールドを設定する必要があります |
| 19 | ガントのみ | グラフィックのみを表示するかどうか | ブール値 | - | 間違い | - |
| 20 | 怠け者 | エルテーブルと同じ | ブール値 | - | 間違い | - |
| 21 | 負荷 | エルテーブルと同じ | 関数 | - | - | - |
| 22 | コンテキストメニューオプション | フローティング ウィンドウ構成アイテムが存在する場合は、[ガント] をクリックして右クリックし、構成されたフローティング ウィンドウ情報を表示します。 | 配列 | - | - | 配列内のオブジェクト プロパティには次のものが含まれます。 * @param {String} ラベル表示名 * @param {String} prop バインド フィールド * @param {String} icon オプションのフォント アイコン クラス |
| 23 | リアルタイムを使用する | 実際の開始時刻と実際の終了時刻を使用するかどうか。有効にすると、計画時刻の青色のバーの外側に茶色と赤色の実際の時刻のバーが表示されます。 | ブール値 | - | 間違い | - |
| 24 | カードを使用する | テーブルホバーウィンドウを使用するかどうか | ブール値 | - | 間違い | - |
| シリアルナンバー | パラメータ | 説明する | デフォルト値 |
|---|---|---|---|
| 1 | 子供たち | Children フィールド、データのサブセット、ツリー テーブルとして表されます。 | 子供たち |
| 2 | 名前 | 名前を表示するために使用されるフィールド | 名前 |
| 3 | ID | 各データの ID は一意である必要があります | ID |
| 4 | ピド | 各データの親ノード ID フィールド | ピド |
| 5 | 開始日 | 各データの開始時刻フィールド | 開始日 |
| 6 | 終了日 | 各データの終了時刻フィールド | 終了日 |
| 7 | アイデンティティID | データ自動インクリメントID | アイデンティティID |
| 8 | 両親 | 自動インクリメントの親 ID ツリー (カンマ区切り) | 両親 |
| 9 | 前 | 先行タスク フィールド。フィールド値は先行タスクの ID である必要があります。 | 前 |
| 10 | 子供がいる | 子ノードを含む行を指定する | 子供がいる |
| 11 | realStartDate | 実際の開始時刻フィールド | realEndDate |
| 12 | realEndDate | 実際の終了時刻フィールド | realEndDate |
| シリアルナンバー | イベント名 | 説明する | コールバックパラメータ |
|---|---|---|---|
| 1 | 時間変更 | タスク時間が変更されたときにトリガーされます | function(row) は現在の行データになります。 |
| 2 | その他のテーブルイベント | 書類のアドレス | - |
| 3 | 変更前 | 先行タスク変更イベント | function(row) は現在の行データになります。 |
| 4 | 名前変更 | 名前変更イベント | function(row) は現在の行データになります。 |
| 5 | タスク追加 | タスクイベントの追加 | function(row) は現在の行データになります。 |
| 6 | タスク削除 | タスクイベントの削除 | function(row) は現在の行データになります。 |
| シリアルナンバー | メソッド名 | 説明する | コールバックパラメータ |
|---|---|---|---|
| 1 | ロードツリー | ツリーテーブルの遅延読み込みを手動で呼び出す | function(row) は順番に展開される行情報です |
| 2 | ロードツリー追加 | 遅延読み込み後にツリーテーブルの子ノードを更新します。 | function(id, list) は、更新されるノード ID と追加される子ノード リストです。これはマージされたリストと元の子ノード データであることに注意してください。 |
| 3 | ロードツリー削除 | データを遅延ロードする子ノードを削除する | function(id, list) は更新するノード ID と削除するサブバイトの rowKey です。 |
| シリアルナンバー | 名前 | 説明する |
|---|---|---|
| 1 | prv | リスト内の名前の前に列を挿入するために使用されます。機能しない場合は、 fixed |
| 2 | - | デフォルトの列とガント チャートの間に列が挿入されました |
1.0.6 タスクの終了日がプロジェクトの時間範囲を超えて変更された場合にガント グラフが動的に計画されないというエラーを修正しました。また、useCard のエクスペリエンスが良くないことが判明しました。
1.0.5 リスト行ホバーウィンドウを追加
バージョン 1.0.3 では、1 年以上の期間表示エラーを修正し、右クリックのフローティング ウィンドウ機能を追加しました。
バージョン 1.0.2 は、遅延パラメータと読み込みパラメータを追加し、遅延読み込みをサポートし、遅延読み込みのメソッドを提供します。メソッド: 1、2、3、グラフィックの表示のみをサポートする ganttOnly パラメータを追加します。
バージョン 1.0.1 では、組み込みのチェック ボックス列とシリアル番号列が追加され、パラメーターを編集できるかどうかが追加され、組み込みのフロント タスク列の構成パラメーター値が false に変更されます。ボックス; 名前列に編集可能なロジックを追加し、タスク イベントを削除します。
バージョン 1.0.0 では、組み込みの事前タスク列が追加され、複数選択の事前配置と単一選択の事前配置がサポートされ、ソース データの事前タスクの正当性が自動的に検証されます。
バージョン 0.1.6 ではガントが更新されます。 1. テーブルは、el-table のほとんどの
AttributesとEventsをサポートします。 2. name 列は、nameFormatter形式のコンテンツ関数のサポートを追加します。 3. 日付列は、クリックして表示される編集入力ボックスに変更されます。rowKeyパラメータはツリー テーブルで渡す必要があり、デフォルトはidであることに注意してください。
バージョン 0.1.5 では、
yearAndMonth、monthAndDay、yearAndWeekタイプをサポートするようにガント日付が更新され、自動的に調整されます。ルールは次のとおりです。12 か月を超える場合は、yearAndMonthに自動的に調整され、3 か月から 12 か月の間の場合は、自動的に調整されます。はyearAndWeekに自動的に調整され、2 Month 以下はmonthAndDayに自動的に調整されます。新しいパラメータautoGanttDateType自動調整するかどうかを管理できます。自動調整をオフにする場合は、期間をできるだけ短くしてください。そうしないと、明らかなパフォーマンスの問題が発生します。特定のタイミングで変更が発生した場合にコールバックされない問題を修正しました。
