wl gantt

Wl-Gantt

Kurze Einführung

Gantt Chart ist auch als horizontales Diagramm, Balkendiagramm und Produktionsplan bekannt. Es zeigt die inhärenten Beziehungen von Projekten, Fortschritt und anderen zeitbezogenen Systemen durch Streifendiagramme. Benannt mit dem Namen von Herrn Henry Laurence Gantt.
Gegenwärtig hat der berühmteste Gantt -Stecker auf dem Markt lange Zeit für Flüsse und Seen besetzt, und sie sind alt und mächtig. Aber ausnahmslos: Sie sind aufgeladen oder äußerst schwierig zu verwenden und sind von sehr alten Technologien angewiesen.
[JQueryGantt] [plusgantt] [dhtmlx] Es ist unbestreitbar, dass sie sehr leistungsfähig sind, sei es Leistung oder funktional. Die meisten Geschäftsbedürfnisse erfordern jedoch kein solches Gigant, um die Nachfrage zu befriedigen. Andererseits lässt die knappe Dokumentation der alten technischen Knappheit Entwickler nicht starten (die Ladeversion bietet nicht einmal Dokumente, und Ihr Chef wird definitiv kein Geld zur Verfügung stellen).
Der Hintergrund von wl-gantt ist der enorme Schaden an der Verwendung des B *** Gantt-Plugins des Autors im Vue-Projekt des Unternehmens: Basierend auf ExtJs (17 Jahre lang habe ich nicht gehört) bieten keine Entwicklungsdokumente an, kein Chinesisch ohne Chinesisch ohne Chinesen Chinesische Informationen und Quellcode werden verschlüsselt. wl-gantt ist ein Gantt-Gantt-Plug-In-Plug-In, das auf VUE und ElementUi basiert.
Die von IT bereitgestellten Funktionen sind: Automatische Inspektionsquellendaten entsprechen den Regeln für die Projektaufgabenanordnung, die Vorderaufgabenregeln, die nach dem Ende beginnen, das Jahr der Endaufgabe des Ende der Aufgabe, der gebaute Front -Task -Manager ist schaltete das Tagesloch im Tag des Tages ein.
Seine Vorteile: Sehr einfach und einfach zu bedienen und hochkonfiguriert, die nicht qualifizierten Daten automatisch glätten und eine Eingabeaufforderung angeben. Es gibt keine Anomalien ohne Grund.
Es wächst allmählich in der nächsten Stufe auf, es wird lernen:
1. Yearendmonth, Monthanddy, Yearandwek Time Span -Konfiguration [Abgeschlossen, Monats- und Wochen -Netzwerke Start- und Endpositionen, um präzise zu sein]
2. BAUS -SELTECTION -SELTECTER [FALTEL].
3.. Integrieren Sie die vollständige Auswahlfunktion der Baumtabelle [abgeschlossen]
4. Fügen Sie die Aufgabenwiederherstellung hinzu und entfernen Sie [abgeschlossen]
4. Aufgabenverbindung
5. Aufgabe Custom Suspension Eingabeaufforderung
6. Und alle Bedürfnisse, die Sie für verwenden müssen

Online-Demonstrations-Github

Vergleich von WL-Gantt und dem weit verbreiteten Big Guy-Plug-In

Das Aussehen von WL-Gantts ist einfach und erfrischend, sehr einfach und einfach zu bedienen. Die Höhe kann konfiguriert werden

JQuery Gantt ist sperrig, alt, hässlich, aber das Dokument ist ziemlich klar

JS Gantt will nicht mehr sagen

DHTMLXGANTT hat eine leistungsstarke und umfassende Funktion;

Frappe-Gantt-Funktion ist sehr klein

Bryntum ist die einzige Schönheit, aber die Konfiguration ist nicht mit der Komponente kombiniert Drucken Sie nur die Konsole aus

Aktualisieren Sie Anweisungen

2020-04-03 LAZY LOAD 2020-02-20 UPDATE GANTT. Weitere Informationen finden Sie in den Versionsanweisungen 1.0.1 2019-12-14 Gantt, erhöhen automatisch ist automatisch die Legitimität der Verifizierungsquellendaten vor -Task. 2019-12-3 Update Gantt. Tabelle 1 nameFormatter die meisten EL-Tabellen- Attributes und Events .
2019-12-2 Update Gantt.1 Date hält die Art von yearAndMonth、monthAndDay、yearAndWeek版本记录1

Der el-table-Parameter und die Ereignisliste wurden unterstützt

    :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"

Fangen Sie schnell an

npm i wl-gantt --save

oder

npm i wl-gantt -S

import wlGantt from 'wl-gantt'

import "wl-gantt/lib/wl-gantt.css"

Vue.use(wlGantt)

dokumentieren

Attribute Parameter

Seriennummer	Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert	Beachten
1	Daten	Daten	Array	- -	[]	- -
2	DateTyp	Gantt Map Area Datum Header Type	Saite	Monat und Tag, Yeandmonth, Jahr und Tag	Yearendmonth	- -
3	Treeps	Baumoberflächenkonfigurationselement	Objekt	- -	- -	Siehe Requisiten unten
4	Startdatum	Projektstartzeit	Zeichenfolge, Objekt	Muss -haben	- -	HINWEIS: benötigen die Task -Zeitleiste innerhalb der Startzeit des Projekts nicht, und wenn die Aufgabenzeit die Projektzeit überschreitet, wird die Projektzeit aktualisiert
5	Enddate	Projektendzeit	Zeichenfolge, Objekt	Muss -haben	- -	HINWEIS: benötigen die Task -Zeitleiste innerhalb der Startzeit des Projekts nicht, und wenn die Aufgabenzeit die Projektzeit überschreitet, wird die Projektzeit aktualisiert
6	CheckSource	Ob Sie die Quelldaten überprüfen, um die Regeln zu erfüllen	Boolean	- -	- -	Überprüfen Sie die Quelldaten, um die Zeit automatisch zu ändern, die die Spezifikation nicht als den erwarteten Wert entspricht, der den Regeln entspricht
7	Behandlungsidentitäts	Ob Sie ID als Selbstverstärkungs -ID verwenden sollen	Boolean	- -	FALSCH	Wenn ja
8	Autoganttdatetyp	Passen Sie automatisch den Gantt -Zeitspannertyp an und siehe版本记录1	Boolean	- -	WAHR	- -
9	Nameformatter	Nennen Sie die Spaltenformatinhaltsfunktion	Funktion	- -	- -	Funktion (Zeile, Colorn, CellValue, Index)
10	Andere Tabellenattribute	Dokumentadresse	- -	- -	- -	- -
11	UsePrecolumn	Ob Sie gebaute Vorderaufgaben verwenden möchten	Boolean	- -	FALSCH	- -
12	Prämultize	Kann die vordere Aufgabe mehr ausgewählt werden?	Boolean	- -	WAHR	Wenn Sie mehrere Auswahlmöglichkeiten einschalten, muss das PRE -Feld ein Array sein, andernfalls kann es eine Nummer String sein
13	Vorformatoren	Formulierung der Funktion der Spalte vorderer Inhalte	Funktion	- -	- -	Wenn Sie es nicht bestehen, können Sie nach prop name字段+，
14	Leerezelltext	Luftwertzelle besetzt	Saite	- -	'-' '	- -
15	UsecheckColumn	Ob Sie das konstruierte Kontrollkästchen verwenden möchten	Boolean	- -	FALSCH	- -
16	UserIndexcolumn	Ob Sie die gebaute Seriennummer verwenden möchten	Boolean	- -	FALSCH	- -
17	bearbeiten	Ob zu bearbeiten	Boolean	- -	WAHR	- -
18	ParentChild	Beim Verwendung des Kontrollkästchens, ob Vater und Sohn verbunden sind	Boolean	- -	WAHR	Sie müssen die ID, Kinder von Requisiten, konfigurieren
19	Ganttonly	Ob nur die Grafik angezeigt wird	Boolean	- -	FALSCH	- -
20	faul	Gleich wie el-table	Boolean	- -	FALSCH	- -
Einundzwanzig	laden	Gleich wie el-table	Funktion	- -	- -	- -
Zweiundzwanzig	Kontextmenuoptionen	Klicken Sie auf Gantt auf rechts -Klicken Sie auf das Gleitfensterkonfigurationskonfigurationselement, um die Konfigurationsfensterinformationen anzuzeigen, wenn Sie vorhanden sind.	Array	- -	- -	Objektattribute im Array sind:* @param {String} Beschriftungsantriebsname* @param {String} Prop -Feld* @param {String} Symbol Optionales Schriftsatz Symbolklasse
Dreiundzwanzig	UserealTime	Unabhängig davon, ob Sie die tatsächliche Startzeit und die tatsächliche Endzeit verwenden, öffnen Sie den in Echtzeit braunen Streifen zur geplanten Zeit des blauen Streifens	Boolean	- -	FALSCH	- -
vierundzwanzig	usecard	Ob Sie das Tisch -Schwebefenster verwenden möchten	Boolean	- -	FALSCH	- -

Props -Konfigurationselement

Seriennummer	Parameter	veranschaulichen	Standardwert
1	Kinder	Das Feld der Daten der Daten von Daten, die als Baumtabelle angeben	Kinder
2	Name	Felder, die zum Anzeigen von Namen verwendet werden	Name
3	AUSWEIS	Die ID jedes Datenstücks muss eindeutig sein	AUSWEIS
4	PID	Das Feld der übergeordneten Knoten -ID der einzelnen Daten	PID
5	Startdatum	Das Startzeitfeld jeder Daten	Startdatum
6	Enddate	Endzeitfeld der einzelnen Daten	Enddate
7	Identität	Daten selbst -inkrease ID	Identität
8	Eltern	Selbstverhinderung der Eltern -ID -Baum, Komma -Trennung	Eltern
9	Vor	Das Feld vorderer Aufgaben, der Feldwert sollte die ID der vorderen Aufgabe sein	Vor
10	HaSchildren	Welche Zeilen spezifizieren Sub -Nodes	HaSchildren
11	Realstartdate	Tatsächliche Ausgangszeitfeld	Realenddate
12	Realenddate	Tatsächlicher Endzeitfeld	Realenddate

Ereignisereignis

Seriennummer	Vorfallname	veranschaulichen	Rückrufparameter
1	Timechange	Ausgelöst, wenn die Aufgabenzeit geändert wird	Funktion (Zeile) ist derzeit Zeilendaten in der Reihenfolge
2	Andere Tischereignisse	Dokumentadresse	- -
3	Vorschatz	Vor -Task -Modifikationsereignis	Funktion (Zeile) ist derzeit Zeilendaten in der Reihenfolge
4	Namechange	Namensänderungsereignis	Funktion (Zeile) ist derzeit Zeilendaten in der Reihenfolge
5	Taskadd	Aufgabenereignis hinzufügen	Funktion (Zeile) ist derzeit Zeilendaten in der Reihenfolge
6	TaskRemove	Aufgabenereignis löschen	Funktion (Zeile) ist derzeit Zeilendaten in der Reihenfolge

Methodenmethode

Seriennummer	Methodenname	veranschaulichen	Rückrufparameter
1	Loadtree	Nennen Sie die Baumtisch -Faulerlast manuell	Funktion (Zeile) sind in der Reihenfolge der Zeileninformationen, die erweitert werden sollen
2	loadTreadd	Aktualisieren Sie den Sub -Node, nachdem die Baumwache faul beobachtet wurde	Funktion (ID, Liste) Um die Knoten -ID zu aktualisieren, wird die untergeordnete Knotenliste hinzugefügt.
3	LoadtrerEmove	Entfernen Sie den Unterkinder von faulen Ladedaten	Funktion (ID, Liste), um die Knoten -ID und den Rowkey des zu löschen

Slot

Seriennummer	Name	veranschaulichen
1	PRV	Für Spalten, bevor Sie den Namen in die Liste einfügen, müssen Sie fixed werden
2	- -	Zwischen der Standardspalte und Gantu

Versionsrekord

1.0.6 Wenn das Ende der Reparaturaufgabe geändert wird, ist die Gantt -Grafik nicht dynamisch geplant, wenn der Projektzeitbereich geändert wird.

1.0.5 List zum Schwebefenster hinzufügen

1.0.3 Version, reparieren Sie die Zeitspanne für mehr als ein Jahr.

1.0.2 Version, fügen Sie faul und laden Parameter hinzu, unterstützen Sie faule Laden und geben Sie eine Methode an, wenn faul laden: Methoden: 1,2,3;

1.0.1 Edition fügt das Kontrollkästchen und die Seriennummer zu, ob die Parameter bearbeitet werden können. ;

Die Version 1.0.0 fügt die aufgebaute Aufgabenliste für die integrierte Front hinzu, unterstützt die Front- und Einzelauswahl -Front mehrerwählte und überprüft automatisch die Legalität der Vor -Task der Datenfront.

Aktualisieren Sie Gantt Version 0.1.6 Version. Tabelle 1 unterstützt die meisten EL-Tabellen- Attributes und Events nameFormatter Beachten Sie, dass die rowKey -Parameter während der Baumtabelle übergeben werden müssen und die Standardeinstellung id ist.

Die 0,1.5 -Version aktualisiert yearAndMonth Gantt -Datum, um den yearAndWeek von yearAndMonth、monthAndDay、yearAndWeek -Typ und automatisch einzustellen Automatische Anpassung des Monats und innen bis monthAndDay . Die Parameter autoGanttDateType können verwalten, ob Sie automatisch angepasst werden sollen. Beheben Sie das Problem, die Situation in gewisser Zeit zu ändern.