orgChart 다 중 트 리 구조 구현

OrgChart. js 가 뭐 예요?
ES6 기반 조직 구성 도 플러그 인.
특징.
로 컬 데이터 와 원 격 데이터 (JSON) 를 지원 합 니 다.
CSS 3 과도 에 기반 한 부 드 러 운 확장 / 접 기 효과.
도 표를 네 방향 으로 정렬 하 다.
사용자 가 드래그 앤 드 롭 노드 를 통 해 조직 구 조 를 변경 할 수 있 도록 합 니 다.
사용자 가 조직 도 를 동적 으로 편집 하고 최종 계층 구 조 를 JSON 대상 으로 저장 할 수 있 도록 합 니 다.
도 표를 그림 으로 내 보 내 는 것 을 지원 합 니 다.
이동 및 크기 조정 지원
사용 자 는 여러 가지 해결 방안 을 채택 하여 방대 한 조직 구조 도 를 구축 할 수 있다 (다 층 또는 혼합 구조 부분 을 참고 하 십시오)
터치 지원 모 바 일 장치 플러그 인
쓰다 https://github.com/dabeng/OrgChart
css:

html:

  

  

    
      View
      Edit
    
    selected node:
    
    new node:
    

      

    
    
    
    
      Parent(root)
      Child
      Sibling
    
    Add
    Delete
    Reset
  

  
 

js:

orgchart 매개 변수 와 그 의미 에 대한 상세 한 설명:
data [json or String]: 데이터
pan [boolean 묵: flase]: 마우스 드래그 를 통 해 OrgChart 제어
zoom [boolean 묵: false]: 마우스 롤러 를 통 해 OrgChart 확대 또는 크기 조정
zoominLimit [number 묵: 7]: 확대 제한 설정
zoomoutLimit [number 묵: 0.5]: 크기 조정 제한 설정
direction [String 묵: t2b]: T2B: "위 에서 아래로", B2T: "아래 에서 위로", L2R: "왼쪽 에서 오른쪽으로", R2L: "왼쪽 에서 오른쪽으로"
verticalLevel【integer(>=2)】：
toggleSiblingsResp [boolean 묵: false]: 왼쪽 / 오른쪽 화살 표를 누 르 면 각각 왼쪽 / 오른쪽 형제 노드 를 표시 / 숨 깁 니 다.
ajax URL [json]: 서로 다른 우선 순 위 는 서로 다른 노드 의 Ajax 요청 URL 을 제공 합 니 다.
visibleLevel [number]: 기본적으로 몇 단계 전개
nodeId [String 묵: id]: 데이터 원본 의 속성 을 모든 OrgChart 노드 의 유일한 식별 자로 설정 합 니 다.
nodeTitle [String 묵: name]: 데이터 원본 의 속성 을 OrgChart 노드 제목 세그먼트 의 텍스트 내용 으로 설정 합 니 다.
nodeContent [String]: 데이터 원본 의 속성 을 OrgChart 노드 의 내용 부분의 텍스트 내용 으로 설정 합 니 다.
nodeTemplate [function]: 템 플 릿 생 성 함수 로 복잡 한 노드 내부 구 조 를 맞 추 는 데 사 용 됩 니 다.
createNode [function]: 모든 OrgCad 노드 를 사용자 정의 하 는 리 셋 함수 입 니 다.
parentNodeSymbol [String 묵: fa - users]: 아이콘 을 사용 하여 이 노드 에 하위 노드 가 있 음 을 암시 합 니 다.
exportButton [boolean 묵: false]: OrgChar 내 보 내기 단 추 를 사용 할 지 여부
exportFilename [String 묵: OrgChart]: 현재 OrgChart 를 그림 으로 출력 할 때 파일 이름 입 니 다.
exportFileextension [String 묵: png]: 사용 가능 한 값 은 PNG 와 PDF 입 니 다.
chartClass [String]: 한 페이지 에 여러 개의 orgcharts 를 실례 화하 고 싶 을 때 이 를 구분 하기 위해 서 는 서로 다른 이름 을 추가 해 야 한다.
draggable [boolean 묵: false]: 사용 자 는 OrgChart 노드 를 드래그 하고 삭제 할 수 있 습 니 다.
dropCriteria [function]: 사용 자 는 드래그 노드 와 삭제 영역 간 의 관 계 를 제한 하기 위해 자신의 기준 을 구성 할 수 있 습 니 다.
initComplete [function]: 표 가 언제 완전히 초기 화 되 었 는 지, 데이터 로드 와 표시 되 었 는 지 자주 알 고 있 습 니 다. 특히 Ajax 데이터 원본 을 사용 할 때