wl gantt

WL-Gantt

Breve introdução

O gráfico de Gantt também é conhecido como diagrama horizontal, gráfico de barras e cronograma do plano de produção. Ele mostra os relacionamentos inerentes aos projetos, progresso e outros sistemas relacionados ao tempo através de diagramas de listras. Nomeado pelo nome do Sr. Henry Laurence Gantt.
Atualmente, o plug -in mais famoso de Gantt no mercado ocupou muito tempo para rios e lagos, e eles são velhos e poderosos. Mas, sem exceção: eles são cobrados ou extremamente difíceis de usar e dependem da tecnologia da moda muito antiga.
[JQueryGantt] [plusgantt] [dhtmlx] É inegável que eles são muito poderosos, seja desempenho ou funcional. Mas a maioria das necessidades comerciais não exige tal gigante para atender à demanda. Por outro lado, a escassa documentação da escassez técnica antiga torna os desenvolvedores incapazes de iniciar (a versão de carregamento nem sequer fornece documentos e seu chefe definitivamente não fornecerá dinheiro para autorizar).
O pano de fundo do wl-gantt é o enorme dano ao uso do autor do plugin b *** gantt no projeto Vue da empresa: baseado em extjs (por 17 anos que não ouvi), não fornece documentos de desenvolvimento, sem chinês sem As informações chinesas e o código fonte são criptografadas. wl-gantt é um plug-in Gantt Gantt com base no VUE e no ElementUi.
As funções fornecidas por ele são: Dados de origem de inspeção automática estão em conformidade com as regras de arranjo de tarefas do projeto, as regras da tarefa frontal que começam após o final, o ano da tarefa final do final da tarefa, o gerente de tarefas da frente construído é ligou o buraco diurno na data do dia.
Suas vantagens: muito simples e fácil de usar, e altamente configuradas, suavizam automaticamente os dados não qualificados e fornecem um aviso, não haverá anormalidades sem motivo.
Está crescendo gradualmente.
1. AnondMonth, Monthanddy, Ano e Span Span Span Configuração [Grades concluídas, Mês e Semana As posições iniciais e finais para serem mais precisas]
2. Seletor de tarefas frontal construído [concluído]
3. Integre a função completa da tabela de árvores [concluída]
4. Adicione e remova a recuperação da tarefa [concluída]
4. Conexão de tarefas
5. Prompt de suspensão personalizada de tarefas
6. E todas as necessidades que você acha que precisa usar

Demonstração on-line-Github

Comparação de WL-Gantt e o plug-in do tipo grande e amplamente usado

A aparência de Wl-Gantt é simples e refrescante, muito simples e fácil de usar, a altura pode ser configurada

JQuery Gantt é volumoso, velho, feio, mas o documento é bastante claro

JS Gantt não quer dizer mais

O DHTMLXGANTT tem uma função poderosa e abrangente;

A função Frappe-Gantt é muito pequena

O BRYNTUM é o único mais bonito, mas a configuração é ruim e não pode ser combinada com o componente; Imprima apenas o console

Atualizar instruções

2020-04-03 LAZY LOAD 2020-02-20 Atualização Gantt, consulte as instruções da versão 1.0.1 2019-12-14 Atualização Gantt, aumente a tarefa frontal interna, suporta a frente multi-seleção e a frente de seleção única , automaticamente automaticamente, a legitimidade dos dados da fonte de verificação é pré -tarefa. Atualização 2019-12-3 Gantt. A Tabela nameFormatter suporta a maioria dos Attributes e Events de TABLES EL.
2019-12-2 ATUALIZAÇÃO GANTT.1 Data mantém o tipo de yearAndMonth、monthAndDay、yearAndWeek版本记录1

O parâmetro e a lista de eventos da tabela El foi suportado

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

Comece rapidamente

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)

documento

Parâmetro de atributos

Número de série	parâmetro	ilustrar	tipo	Valor opcional	valor padrão	Perceber
1	Dados	dados	Variedade	-	[]	-
2	DateType	Tipo de cabeçalho da área do mapa Gantt	Corda	Monthday, YeandMonth, ano e dia	AnondMonth	-
3	treeps	Item de configuração da superfície da árvore	Objeto	-	-	Veja os adereços abaixo
4	StartDate	Hora de início do projeto	String, objeto	Deve -ter	-	NOTA: Não exija a linha do tempo da tarefa no horário de início do projeto e, quando o tempo da tarefa exceder o tempo do projeto, o tempo do projeto será atualizado
5	EndDate	Projeto Termal Hora	String, objeto	Deve -ter	-	NOTA: Não exija a linha do tempo da tarefa no horário de início do projeto e, quando o tempo da tarefa exceder o tempo do projeto, o tempo do projeto será atualizado
6	CheckSource	Se deve verificar os dados de origem para atender às regras	Booleano	-	-	Verifique os dados de origem para modificar automaticamente o tempo que não atende à especificação como o valor esperado que atende às regras
7	TratedIdasIdentityId	Se deve usar o ID como um ID de auto -aumento	Booleano	-	Falso	Se for, verifique se o ID é um tipo digital curto em vez de uma corda longa ou guia
8	AutoGantTDATETYPE	Ajuste automaticamente o tipo de tempo de tempo Gantt, consulte版本记录1	Booleano	-	verdadeiro	-
9	NameFormatter	Função de conteúdo de formato de coluna Nome	Função	-	-	Função (linha, colorn, CellValue, índice)
10	Outros atributos da tabela	Endereço do documento	-	-	-	-
11	useprecolumn	Se deve usar as tarefas frontais construídas	Booleano	-	Falso	-
12	Prainice	A tarefa frontal pode ser selecionada mais	Booleano	-	verdadeiro	Se você ativar várias opções, o pré -campo deve ser a matriz, caso contrário, pode ser o número string
13	Pré -formateria	Função de formulação da coluna de conteúdo frontal	Função	-	-	Se você não passar, poderá costurar de acordo com prop name字段+，
14	EsvaziCELTTEXT	A célula de valor do ar ocupa	Corda	-	'-'	-
15	USECHECKCOLUMN	Se deve usar a caixa de seleção Built -in	Booleano	-	Falso	-
16	UserIndexcolumn	Se deve usar o número de série construído	Booleano	-	Falso	-
17	editar	Seja para editar	Booleano	-	verdadeiro	-
18	Parentchild	Ao usar a caixa de seleção, se o pai e o filho estão associados	Booleano	-	verdadeiro	Você deve configurar o ID, o campo dos acessórios para crianças
19	Ganttonly	Se apenas o gráfico é exibido	Booleano	-	Falso	-
20	preguiçoso	O mesmo que El-Table	Booleano	-	Falso	-
vinte e um	carregar	O mesmo que El-Table	Função	-	-	-
vinte e dois	ContextMenuoptions	Direita -Clique com o item de configuração da janela flutuante, se você existir, clique em Gantt -clique para exibir as informações da janela flutuante da configuração	Variedade	-	-	Os atributos do objeto na matriz são:* @param {string} Nome do rótulo de exibição* @param {string} campo de prop
vinte e três	UserEalTime	Se deve usar o horário de início real e o horário de término real, abra a faixa vermelha marrom em tempo real no momento planejado da faixa azul	Booleano	-	Falso	-
vinte e quatro	VECT	Se deve usar a janela do mouse de tabela	Booleano	-	Falso	-

Item de configuração de adereços

Número de série	parâmetro	ilustrar	valor padrão
1	crianças	Subconjunto de dados do campo infantil, indicando como uma mesa de árvore	crianças
2	nome	Campos usados ​​para exibir nomes	nome
3	EU IA	O ID de cada peça de dados deve ser único	EU IA
4	PID	Campo de identificação do nó pai de cada dados	PID
5	StartDate	O campo de tempo de início de cada dados	StartDate
6	EndDate	Campo de tempo final de cada dados	EndDate
7	IdentityId	Data Auto -Ancrease ID	IdentityId
8	pais	Árvore de identificação de pais autônomos, separação de vírgula	pais
9	PRÉ	O campo da tarefa frontal, o valor do campo deve ser o ID da tarefa frontal	PRÉ
10	Haschildren	Quais linhas especificam são sub -nodes	Haschildren
11	RealStartDate	Campo de tempo de partida real	Realenddate
12	Realenddate	Campo de tempo real real	Realenddate

Evento de eventos

Número de série	Nome do incidente	ilustrar	Parâmetro de retorno de chamada
1	Timechange	Acionado quando o tempo da tarefa é alterado	Função (linha) é atualmente dados de linha em ordem
2	Outros eventos da tabela	Endereço do documento	-
3	pré -recaência	Evento de modificação pré -tarefa	Função (linha) é atualmente dados de linha em ordem
4	Namechange	Evento de modificação de nome	Função (linha) é atualmente dados de linha em ordem
5	Taskadd	Adicione o evento de tarefa	Função (linha) é atualmente dados de linha em ordem
6	TaskRemove	Excluir evento de tarefa	Função (linha) é atualmente dados de linha em ordem

Método de métodos

Número de série	Nome do método	ilustrar	Parâmetro de retorno de chamada
1	carregamento	Chame manualmente a carga de mesa de árvores Lazy Load	Função (linha) em ordem é a informação da linha a ser expandida
2	loadtreeadd	Atualize o sub -node depois do relógio da árvore preguiçoso	Função (ID, Lista) Para atualizar o ID do nó, a lista de nós filhos a ser adicionada.
3	LoadTreremove	Remova o sub -nó de dados de carregamento preguiçoso	Função (id, list) para atualizar o ID do nó e a chave rowkey do sub -byte para excluir

slot

Número de série	nome	ilustrar
1	Prv	Para colunas antes de inserir o nome na lista, se você não entrar em vigor, fixed
2	-	Entre a coluna padrão e Gantu

Registro de versão

1.0.6 Quando o final da tarefa de reparo é alterado, o gráfico de Gantt não é planejado dinamicamente quando o intervalo de tempo do projeto é alterado;

1.0.5 Adicione a lista à janela do pairar

1.0.3 Versão, repare o tempo de tempo por mais de um ano;

1.0.2 Versão, adicione parâmetros preguiçosos e de carga, suporta carregamento preguiçoso e forneça um método quando o carregamento preguiçoso: Métodos: 1,2,3;

1.0.1 Edição Adiciona a caixa de seleção Built -in e o número de série; ;

A versão 1.0.0 adiciona a lista de tarefas frontal construída, suporta a frente de seleção multi -seleção e a frente de seleção única e verifique automaticamente a legalidade da fase pré -TOLHA da frente de dados.

Atualize a versão Gantt Version 0.1.6. A Tabela 1 suporta a maioria dos Attributes e Events de Table El nameFormatter Observe que os parâmetros rowKey devem ser passados ​​durante a tabela de árvores e o padrão é id .

A versão 0.1.5 atualiza a data de Gantt para suportar o tipo de yearAndMonth、monthAndDay、yearAndWeek e ajustar automaticamente as regras: Ajuste automático de ajuste automático a yearAndMonth -12 meses, entre 3 e 12 yearAndWeek Ajuste automático do mês e de dentro para monthAndDay . Parâmetros adicionados autoGanttDateType podem gerenciar se você deseja ajustar automaticamente. Corrija o problema de mudar a situação em algum tempo.