wl gantt

Wl-gantt

Brève introduction

Le graphique Gantt est également connu sous le nom de diagramme horizontal, de graphique à barres et de planification du plan de production. Il montre les relations inhérentes aux projets, aux progrès et à d'autres systèmes liés au temps à travers des diagrammes de rayures. Nommé par le nom de M. Henry Laurence Gantt.
À l'heure actuelle, la prise de Gantt la plus célèbre sur le marché a occupé une longue période pour les rivières et les lacs, et ils sont vieux et puissants. Mais sans exception: ils sont chargés ou extrêmement difficiles à utiliser et dépendent d'une technologie très ancienne.
[JQueryGantt] [PlusGantt] [dhtmlx] Il est indéniable qu'ils soient très puissants, que ce soit des performances ou des fonctions. Mais la plupart des besoins de l'entreprise ne nécessitent pas un tel géant pour répondre à la demande. D'un autre côté, la rare documentation de la rareté technique ancienne rend les développeurs incapables de commencer (la version de charge ne fournit même pas de documents, et votre patron ne fournira certainement pas d'argent pour autoriser).
Le contexte de wl-gantt est l'énorme dommage à l'utilisation par l'auteur du plugin B *** Gantt dans le projet Vue de l'entreprise: basé sur des extjs (pendant 17 ans je n'ai pas entendu), ne fournissent pas de documents de développement, pas de chinois sans Les informations chinoises et le code source sont chiffrés. wl-gantt est un plug-in Gantt Gantt Basé sur Vue et ElementUI.
Les fonctions qui lui sont présentées sont: les données de source d'inspection automatique sont conformes aux règles d'arrangement des tâches du projet, les règles de la tâche de front qui commencent après la fin, l'année de la tâche fin allumé sur le trou de jour à la date de la journée.
Ses avantages: très simple et facile à utiliser, et hautement configuré, lissent automatiquement les données non qualifiées et donnent une invite, il n'y aura pas d'anomalies sans raison.
Il grandit progressivement dans la prochaine étape, il apprendra:
1. AnneenDmonth, Moisandanddy, Yearandwek Time Span Configuration [terminées, les grilles de mois et de semaine de départ et de fin pour être précises]
2. Sélecteur de tâches de front construit [terminé]
3. Intégrez la fonction de sélection complète de la table d'arbre [terminée]
4. Ajouter et supprimer la récupération des tâches [terminée]
4. Connexion de la tâche
5. Invite de suspension personnalisée de la tâche
6. Et tous les besoins que vous pensez que vous devez utiliser

Démonstration en ligne-Github

Comparaison de WL-Gantt et du plug-in de type Big Guy largement utilisé

L'apparence de WL-Gantt est simple et rafraîchissante, très simple et facile à utiliser, la hauteur peut être configurée

JQuery Gantt est volumineux, vieux, laid, mais le document est assez clair

JS Gantt ne veut pas en dire plus

DHTMLXGANTT a une fonction puissante et complète;

La fonction frappe-gantt est très petite

Brynum est le seul plus beau, mais la configuration est mauvaise et ne peut pas être combinée avec le composant; Imprimez uniquement la console

Mettre à jour les instructions

2020-04-03 Lazy Load 2020-02-20 Update Gantt, veuillez vous référer aux instructions de la version 1.0.1 2019-12-14 MISE À JOUR GANTT, augmenter la tâche de front intégrée, prendre en charge le devant multi-sélection et avant à sélection unique , automatiquement automatiquement, la légitimité des données de source de vérification est pré-tâche. 2019-12-3 MISE À JOUR GANTT. Le tableau 1 prend en charge la nameFormatter des Attributes et Events El-Tables.
2019-12-2 MISE版本记录1 JOUR GANTT.1 La date détient le type de yearAndMonth、monthAndDay、yearAndWeek .

Le paramètre El-Table et la liste d'événements ont été pris en charge

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

Commencez rapidement

npm i wl-gantt --save

ou

npm i wl-gantt -S

import wlGantt from 'wl-gantt'

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

Vue.use(wlGantt)

document

Paramètre d'attributs

Numéro de série	paramètre	illustrer	taper	Valeur facultative	valeur par défaut	Avis
1	Données	données	Tableau	-	[]	-
2	datetype	Gantt Map Area Area Date Header Type	Chaîne	Mois et jour, yendmonth, an et jour	AnneyendMonth	-
3	trièches	Élément de configuration de la surface de l'arborescence	Objet	-	-	Voir les accessoires ci-dessous
4	date de début	Heure de début du projet	Chaîne, objet	Doit-avoir	-	Remarque: ne nécessite pas le calendrier des tâches dans l'heure de début du projet, et lorsque le temps de tâche dépasse l'heure du projet, l'heure du projet sera mise à jour
5	fin	Heure de fin du projet	Chaîne, objet	Doit-avoir	-	Remarque: ne nécessite pas le calendrier des tâches dans l'heure de début du projet, et lorsque le temps de tâche dépasse l'heure du projet, l'heure du projet sera mise à jour
6	Vérifier	S'il faut vérifier les données source pour respecter les règles	Booléen	-	-	Vérifiez les données source pour modifier automatiquement l'heure qui ne répond pas à la spécification comme la valeur attendue qui répond aux règles
7	Traitidasidentityid	S'il faut utiliser l'ID comme identifiant d'auto-augmentation	Booléen	-	FAUX	Si c'est le cas, assurez-vous que l'ID est un type numérique court au lieu d'une longue chaîne ou d'un GUID
8	AutoganttdateType	Ajustez automatiquement le type de durée de Gantt, voir版本记录1	Booléen	-	vrai	-
9	format de nom	Nom Fonction de contenu du format de colonne	Fonction	-	-	Fonction (Row, Colorn, CellValue, Index)
10	Autres attributs de table	Adresse du document	-	-	-	-
11	useprecolumn	SI il doit utiliser des tâches avant construites	Booléen	-	FAUX	-
12	prémultice	La tâche avant peut-elle être sélectionnée plus	Booléen	-	vrai	Si vous allumez plusieurs choix, le champ préalable doit être le tableau, sinon il peut être numéro String
13	Prétendre	Fonction de formulation de la colonne de contenu avant	Fonction	-	-	Si vous ne le transmettez pas, vous pouvez coudre en fonction prop name字段+，
14	Vide	La cellule de la valeur de l'air occupe	Chaîne	-	'-'	-
15	UsecheckColumn	Si vous devez utiliser la case Built -in	Booléen	-	FAUX	-
16	userIndexColumn	If doit utiliser le numéro de série construit	Booléen	-	FAUX	-
17	modifier	S'il faut modifier	Booléen	-	vrai	-
18	Parentchild	Lorsque vous utilisez la case à cocher, si le père et le fils sont associés	Booléen	-	vrai	Vous devez configurer l'ID, champ des enfants des enfants
19	ganttonly	Si seul le graphique est affiché	Booléen	-	FAUX	-
20	paresseux	Identique à El-Table	Booléen	-	FAUX	-
vingt-et-un	charger	Identique à El-Table	Fonction	-	-	-
vingt-deux	ContextMenuoptions	DROITE-Cliquez sur l'élément de configuration de la fenêtre flottante, si vous existez, cliquez sur Gantt à droite - Cliquez pour afficher les informations de fenêtre flottantes de configuration	Tableau	-	-	Les attributs d'objet dans le tableau sont: * @param {String} Nom d'affichage de l'étiquette * @param {String} Field d'hélice * @param {String} Icône Icône Font Icône optionnelle
vingt-trois	useraltime	Que ce soit à utiliser l'heure de début réelle et l'heure de fin réelle, ouvrez la bande brun-rouge en temps réel à l'heure prévue de la bande bleue	Booléen	-	FAUX	-
vingt-quatre	user	S'il faut utiliser la fenêtre de survol de la table	Booléen	-	FAUX	-

élément de configuration des accessoires

Numéro de série	paramètre	illustrer	valeur par défaut
1	enfants	Champ d'enfants sous-ensemble de Data, indiquant une table d'arbre	enfants
2	nom	Champs utilisés pour afficher les noms	nom
3	IDENTIFIANT	L'ID de chaque élément de données doit être unique	IDENTIFIANT
4	Piquer	Champ d'identification du nœud parent de chaque données	Piquer
5	date de début	Le champ de début de chaque données	date de début
6	fin	Champ de fin de l'heure de chaque données	fin
7	IdentitéId	Data auto-augmentation ID	IdentitéId
8	parents	Arbre d'identification des parents auto-croissants, séparation de virgules	parents
9	PRÉ	Le champ de tâche avant, la valeur du champ devrait être l'ID de la tâche avant	PRÉ
10	Haschildrers	Quelles lignes spécifient sont des sous-codes	Haschildrers
11	Realstartdate	Champ d'heure de départ réel	Redenddate
12	Redenddate	Champ d'heure de fin réel	Redenddate

Événement événementiel

Numéro de série	Nom d'incident	illustrer	Paramètre de rappel
1	timechange	Déclenché lorsque le temps de tâche est modifié	La fonction (ligne) est actuellement des données de ligne dans l'ordre
2	Autres événements de table	Adresse du document	-
3	préchange	Événement de modification de pré-tâche	La fonction (ligne) est actuellement des données de ligne dans l'ordre
4	nom	Événement de modification du nom	La fonction (ligne) est actuellement des données de ligne dans l'ordre
5	taskadd	Ajouter l'événement de tâche	La fonction (ligne) est actuellement des données de ligne dans l'ordre
6	tâche	Supprimer l'événement de tâche	La fonction (ligne) est actuellement des données de ligne dans l'ordre

Méthode des méthodes

Numéro de série	Nom de méthode	illustrer	Paramètre de rappel
1	chargeur	Appelez manuellement la table paresseuse de la table des arbres	Fonction (ligne) dans l'ordre est les informations de ligne à étendre
2	loadtreeadd	Mettez à jour le sous-nœud après l'arbre Watch paresseux	Fonction (ID, liste) Afin de mettre à jour l'ID de nœud, la liste des nœuds enfants à ajouter.
3	hostère	Supprimer le sous-node des données de chargement paresseuses	Fonction (id, list) afin de mettre à jour l'ID de nœud, et la rowkey du sous-octet à supprimer

fente

Numéro de série	nom	illustrer
1	Prv	Pour les colonnes avant d'insérer le nom dans la liste, si vous ne prenez pas effet, vous devez ajouter fixed
2	-	Entre la colonne par défaut et Gantu

Record de version

1.0.6 Lorsque la fin de la tâche de réparation est modifiée, le graphique Gantt n'est pas planifié dynamiquement lorsque la plage de temps du projet est modifiée;

1.0.5 Ajouter une liste à la fenêtre de survol

1.0.3 Version, réparez la durée de plus d'un an;

1.0.2 Version, ajouter des paramètres paresseux et de chargement, prendre en charge le chargement paresseux et fournir une méthode lors du chargement paresseux: Méthodes: 1,2,3;

1.0.1 L'édition ajoute la case à cocher et le numéro de série; ; augmenter la logique de l'édition de la colonne de nom;

La version 1.0.0 ajoute la liste des tâches de front construite, prend en charge le front multi-sélection et le front de sélection unique, et vérifie automatiquement la légalité du pré-tâche du front de données.

Mettre à jour la version Gantt Version 0.1.6. Le tableau 1 prend en charge la plupart des Attributes et Events El-Tables nameFormatter Notez que les paramètres rowKey doivent être passés pendant la table des arbres et que la valeur par défaut est id .

La version 0.1.5 met à jour la date de Gantt pour prendre en charge le yearAndWeek yearAndMonth type yearAndMonth、monthAndDay、yearAndWeek et ajusté automatiquement. Ajustement automatique du mois et à l'intérieur du mois et au monthAndDay . Les paramètres ajoutés autoGanttDateType peuvent gérer l'opportunité de s'ajuster automatiquement. Résoudre le problème de la modification de la situation dans un certain temps.