wl gantt
1.0.0
간트 차트는 수평 다이어그램, 막대 차트 및 생산 계획 일정이라고도합니다. 스트라이프 다이어그램을 통해 프로젝트, 진행 및 기타 시간 관련 시스템의 고유 한 관계를 보여줍니다. Henry Laurence Gantt 씨의 이름으로 지명되었습니다.
현재 시장에서 가장 유명한 Gantt 플러그 인은 강과 호수에 오랜 시간을 보냈으며 오래되고 강력합니다. 그러나 예외없이 : 그들은 사용하기가 매우 어렵고 매우 오래된 기술에 의존합니다.
[JQueryGantt] [plusgantt] [dhtmlx] 성능이든 기능적이든 매우 강력하다는 것은 부인할 수 없습니다. 그러나 대부분의 비즈니스 요구는 그러한 거대가 수요를 충족시키기 위해 요구하지 않습니다. 반면, 고대 기술 부족에 대한 부족한 문서는 개발자가 시작할 수 없게 만듭니다 (충전 버전은 문서를 제공하지 않으며 상사는 확실히 승인 할 돈을 제공하지 않을 것입니다).
wl-gantt 의 배경은 회사의 VUE 프로젝트에서 B *** Gantt 플러그인 사용에 대한 큰 손상입니다. EXTJS (17 년 동안 듣지 못한), 개발 문서를 제공하지 않으며 중국어가 없으면 중국어가 없습니다. 중국 정보 및 소스 코드가 암호화됩니다. wl-gantt 는 Vue 및 Elementui를 기반으로 한 Gantt Gantt 플러그인 플러그인입니다.
이에 의해 제공된 기능은 다음과 같습니다. 자동 검사 소스 데이터는 프로젝트 작업 배열 규칙, 끝 이후에 시작되는 프론트 작업 규칙, 작업 종료의 종료 작업의 해를 준수합니다. 하루의 날짜에 주간 구멍을 켰습니다.
그것의 장점 : 매우 간단하고 사용하기 쉬우 며 고도로 구성되어 있으며 자격이없는 데이터를 자동으로 매끄럽게하고 프롬프트를 제공하면 아무 이유없이 이상이 없습니다.
다음 단계에서 점차 자랍니다.
1. Alenendmonth, Monthanddy, Yearandwek Time Span 구성 [완료, 월 및 주 그리드 시작 및 종료 위치는 정확합니다.]
2. 제작 -전면 작업 선택기 [완료]
3. 트리 테이블의 전체 선택 함수 통합 [완료]
4. 작업 복구를 추가하고 제거 [완료]
4. 작업 연결
5. 작업 사용자 지정 서스펜션 프롬프트
6. 그리고 당신이 사용해야 할 모든 요구 사항
WL-Gantt의 외관은 간단하고 상쾌하며 매우 간단하며 사용하기 쉽고 높이를 구성 할 수 있습니다.
jQuery Gantt는 부피가 크고 오래되고 못 생겼지 만 문서는 분명합니다.
JS Gantt는 더 이상 말하고 싶지 않습니다
DHTMLXGANTT는 강력하고 포괄적 인 기능을 가지고 있지만 사용하기가 어렵습니다.
Frappe-Gantt 기능은 매우 작습니다
Bryntum은 더 아름답지만 구성 요소와 결합 할 수는 없습니다 콘솔 만 인쇄하십시오
2020-04-03 게으른 부하 2020-02-20 업데이트 Gantt, 버전 지침 1.0.1 2019-12-14 업데이트 Gantt, 내장 전면 작업을 늘리고 멀티 선택 전면 및 단일 선택 전면을 지원하십시오. , 자동으로 검증 소스 데이터의 정당성은 사전 자극입니다. 2019-12-3 업데이트 Gantt. 표 1은 대부분의 EL-TABLE
AttributesnameFormatterEvents지원합니다.
2019-12-2 업데이트 Gantt.1 날짜는yearAndMonth、monthAndDay、yearAndWeek의版本记录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 | DateType | 간트 맵 영역 날짜 헤더 유형 | 끈 | Monthandday, Yeandmonth, 연말 | Yearendmonth | - |
| 3 | 트리 | 트리 표면 구성 항목 | 물체 | - | - | 아래 소품을 참조하십시오 |
| 4 | 시작합니다 | 프로젝트 시작 시간 | 문자열, 객체 | 해야합니다 | - | 참고 : 프로젝트 시작 시간 내에 작업 타임 라인이 필요하지 않으며 작업 시간이 프로젝트 시간을 초과하면 프로젝트 시간이 업데이트됩니다. |
| 5 | ENDDATE | 프로젝트 종료 시간 | 문자열, 객체 | 해야합니다 | - | 참고 : 프로젝트 시작 시간 내에 작업 타임 라인이 필요하지 않으며 작업 시간이 프로젝트 시간을 초과하면 프로젝트 시간이 업데이트됩니다. |
| 6 | checksource | 규칙을 충족하기 위해 소스 데이터를 확인할지 여부 | 부울 | - | - | 소스 데이터를 확인하여 규칙을 충족하는 예상 값으로 사양을 충족하지 않는 시간을 자동으로 수정하십시오. |
| 7 | TruthidasidentityId | ID를 자체적으로 사용하는지 여부 | 부울 | - | 거짓 | 그렇다면, ID가 긴 문자열 또는 안내 대신 짧은 디지털 유형인지 확인하십시오. |
| 8 | autoganttDateType | Gantt Time Span 유형을 자동으로 조정하고版本记录1 | 부울 | - | 진실 | - |
| 9 | NameFormatter | 이름 열 형식 내용 기능 | 기능 | - | - | 기능 (행, Colorn, CellValue, Index) |
| 10 | 다른 테이블 속성 | 문서 주소 | - | - | - | - |
| 11 | 사용 precolumn | 전면 작업을 구축할지 여부 | 부울 | - | 거짓 | - |
| 12 | 사전 배양 | 전면 작업을 더 많이 선택할 수 있습니다 | 부울 | - | 진실 | 여러 선택을 켜면 프리 필드는 배열이어야합니다. 그렇지 않으면 숫자 String이 될 수 있습니다. |
| 13 | Preformatter | 전면 컨텐츠 열의 공식 기능 | 기능 | - | - | 통과하지 않으면 prop name字段+， 에 따라 스티치 할 수 있습니다. |
| 14 | emptyCellText | 공기 가치 셀이 점유됩니다 | 끈 | - | '-' | - |
| 15 | Usecheckcolumn | 내장 확인란을 사용할지 여부 | 부울 | - | 거짓 | - |
| 16 | userindexcolumn | 구축 된 일련 번호 사용 여부 | 부울 | - | 거짓 | - |
| 17 | 편집하다 | 편집할지 여부 | 부울 | - | 진실 | - |
| 18 | 모체 | 확인란을 사용할 때 아버지와 아들이 연관되어 있는지 | 부울 | - | 진실 | ID, 어린이들의 소품 필드를 구성해야합니다 |
| 19 | 간튼하게 | 그래프 만 표시되는지 여부 | 부울 | - | 거짓 | - |
| 20 | 게으른 | el-table과 동일합니다 | 부울 | - | 거짓 | - |
| 스물 하나 | 짐 | el-table과 동일합니다 | 기능 | - | - | - |
| 스물 두 번째 | 맥락 관리 | 오른쪽 -부동 창 구성 항목을 클릭하십시오. 존재하는 경우 Gantt 오른쪽을 클릭하여 구성 플로팅 창 정보를 표시하려면 클릭하십시오. | 정렬 | - | - | 배열의 개체 속성은 다음과 같습니다.* @param {String} 레이블 디스플레이 이름* @param {String} prop 필드* @param {String} 아이콘 선택적 글꼴 아이콘 클래스 |
| 스물 셋 | userEalTime | 실제 시작 시간과 실제 종료 시간을 사용할지 여부, 계획된 파란색 스트립의 실시간 브라운 스트립을 엽니 다. | 부울 | - | 거짓 | - |
| 24 | usecard | 테이블 호버 창을 사용할지 여부 | 부울 | - | 거짓 | - |
| 일련 번호 | 매개 변수 | 설명 | 기본값 |
|---|---|---|---|
| 1 | 어린이들 | 데이터 테이블로 표시되는 데이터의 하위 세트 어린이 필드 | 어린이들 |
| 2 | 이름 | 이름을 표시하는 데 사용되는 필드 | 이름 |
| 3 | ID | 각 데이터의 ID는 고유해야합니다. | ID |
| 4 | PID | 각 데이터의 상위 노드 ID 필드 | PID |
| 5 | 시작합니다 | 각 데이터의 시작 시간 필드 | 시작합니다 |
| 6 | ENDDATE | 각 데이터의 종료 시간 필드 | ENDDATE |
| 7 | IdentityId | 데이터 자체 -CENCEASE ID | IdentityId |
| 8 | 부모 | 자체적으로 성장하는 부모 ID 트리, 쉼표 분리 | 부모 |
| 9 | 사전 | 전면 작업 필드, 필드 값은 전면 작업의 ID 여야합니다. | 사전 |
| 10 | 주식장 | 지정된 라인은 하위 노드입니다 | 주식장 |
| 11 | RealstArtDate | 실제 시작 시간 필드 | RealEndDate |
| 12 | RealEndDate | 실제 종료 시간 필드 | RealEndDate |
| 일련 번호 | 사건 이름 | 설명 | 콜백 매개 변수 |
|---|---|---|---|
| 1 | Timechange | 작업 시간이 변경되면 트리거됩니다 | 함수 (행)는 현재 순서대로 줄 데이터입니다 |
| 2 | 다른 테이블 이벤트 | 문서 주소 | - |
| 3 | 사전 | 사전 테스크 수정 이벤트 | 함수 (행)는 현재 순서대로 줄 데이터입니다 |
| 4 | NAMECHANGE | 이름 수정 이벤트 | 함수 (행)는 현재 순서대로 줄 데이터입니다 |
| 5 | TaskAdd | 작업 이벤트 추가 | 함수 (행)는 현재 순서대로 줄 데이터입니다 |
| 6 | 작업 영역 | 작업 이벤트 삭제 | 함수 (행)는 현재 순서대로 줄 데이터입니다 |
| 일련 번호 | 메소드 이름 | 설명 | 콜백 매개 변수 |
|---|---|---|---|
| 1 | 로드 트리 | 수동으로 트리 테이블 게으른 부하를 호출하십시오 | 함수 (행) 순서대로 확장 될 라인 정보입니다. |
| 2 | 로드 트리드 | 트리 시계 게으른 후 하위 노드를 업데이트하십시오 | 기능 (ID, List) Node ID를 업데이트하려면 추가 할 하위 노드 목록이 추가됩니다. |
| 3 | LoadTeremove | 게으른 로딩 데이터의 하위 노드를 제거하십시오 | Node ID를 업데이트하려면 함수 (id, list) 삭제할 서브 비트의 rowkey |
| 일련 번호 | 이름 | 설명 |
|---|---|---|
| 1 | PRV | 목록에 이름을 삽입하기 전에 열의 경우, 적용되지 않으면 fixed 추가해야합니다. |
| 2 | - | 기본 열과 간투 사이 |
1.0.6 수리 작업의 끝이 변경되면 Gantt 그래픽은 프로젝트 시간 범위가 변경 될 때 동적으로 계획되지 않습니다.
1.0.5 호버 창에 목록을 추가하십시오
1.0.3 버전, 오른쪽 부동 창 함수를 1 년 이상 수리하십시오
1.0.2 버전, 게으른 매개 변수를 추가하고 게으른 하중을 지원하며 게으른 로딩 할 때 방법을 제공합니다. 방법 : 1,2,3;
1.0.1 에디션은 구축 된 확인란을 추가합니다. 늘인 열 편집 로직 증가;
1.0.0 버전은 빌드 된 프론트 작업 목록을 추가하고, 멀티 선택 전면 및 단일 선택 전면을 지원하며, 데이터 전면의 프리 웨스트의 합법성을 자동으로 확인합니다.
Gantt 버전 0.1.6 버전을 업데이트하십시오. 표 1은
nameFormatter의 EL-TABLEAttributes및Events지원합니다. 트리 테이블 중에rowKey매개 변수를 전달해야하며 기본값은id입니다.
0.1.5 버전은 Gantt 날짜를 업데이트하여
yearAndMonth、monthAndDay、yearAndWeekyearAndWeekyearAndMonth자동으로 조정합니다 달의 자동 조정 및 내부 및monthAndDay. 매개 변수 추가autoGanttDateType자동 조정을 끄려면 시간 범위가 가능한 한 적은지 확인하십시오. 그렇지 않으면 명백한 성능 문제가 있습니다. 한동안 상황을 바꾸는 문제를 해결하십시오.
