Tree

/scss/components/tree.scss

v.0.1.0 javascript

생성 옵션

<div style="display: flex">
  <div class="new-tree1"></div>
  <div class="new-tree2"></div>
  <div class="new-tree3"></div>
  <div class="new-tree4"></div>
</div>

Gn.create('tree', {
      target: '.new-tree1',
      data: [{
        text: 'Genians',
        child: [{
          text: 'GNUI'
        },{
          text: 'GNUI core'
        },{
          text: 'GNConfEngine'
        }]
      },{
        text: 'R&D Center',
        child: [{
          text: 'GNUI'
        },{
          text: 'GNUI core'
        },{
          text: 'GNConfEngine'
        }]
      },{
        text: 'Front-end'
      }],
      type: 'borderless'
    });
    Gn.create('tree', {
      target: '.new-tree2',
      data: [{
        text: 'Genians',
        child: [{
          text: 'GNUI'
        },{
          text: 'GNUI core'
        },{
          text: 'GNConfEngine'
        }]
      },{
        text: 'R&D Center',
        child: [{
          text: 'GNUI'
        },{
          text: 'GNUI core'
        },{
          text: 'GNConfEngine'
        }]
      },{
        text: 'Front-end'
      }],
      color: 'success',
      hasCheck: false
    })
    Gn.create('tree', {
      target: '.new-tree3',
      data: [{
        text: 'Genians',
        value: 'genians',
        actived: true,
        opened: true,
        child: [{
          text: 'GNUI',
          value: 'gnui'
        },{
          text: 'GNUI core',
          value: 'gnui-core',
          opened: true,
          child: [{
            text: 'GNUI',
            value: 'gnui-nested'
          },{
            text: 'GNUI core',
            value: 'gnui-core-nested'
          },{
            text: 'GNConfEngine',
            value: 'gnconfengine-nested',
            selected: true
          }]
        },{
          text: 'GNConfEngine',
          value: 'gnconfengine'
        }]
      },{
        text: 'R&D Center',
        value: 'rnd-center',
        child: [{
          text: 'GNUI',
          value: 'rnd-gnui'
        },{
          text: 'GNUI core',
          value: 'rnd-gnui-core'
        },{
          text: 'GNConfEngine',
          value: 'rnd-gnconfengine'
        }]
      },{
        text: 'Front-end',
        value: 'frontend'
      }],
      hasCheck: true
    })
    Gn.create('tree', {
      target: '.new-tree4',
      data: [{
        text: 'Disabled Root',
        value: 'disabled-root',
        opened: true,
        child: [{
          text: 'Locked Node',
          value: 'locked-node',
          selected: true
        },{
          text: 'Review Only',
          value: 'review-only'
        }]
      },{
        text: 'Disabled Leaf',
        value: 'disabled-leaf'
      }],
      hasCheck: true,
      disabled: true
    })

name	type	default	description
target	string		트리 생성 타겟
data	array		{key: value}로 이루어진 데이터 text: 메뉴명 value: 노드 식별 값 selected: true 인 경우 체크박스 체크된 상태로 표시 opened: true 인 경우 하위항목이 열린상태로 표시 actived: true 인 경우 선택된 상태로 표시 disabled: true 인 경우 해당 노드 선택·체크 불가 icon: 기본 트리 아이콘이 있는 경우(showIcon: true) HTMLElement String 을 통해 사용자 정의 아이콘으로 변경 hideIcon: 기본 트리 아이콘이 있는 경우(showIcon: true) 아이콘 숨김 처리
childField	string	child	자식 데이터를 가지고 있는 항목 키값
size	string		'small','normal','medium','large'
color	string		'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
type	string		'borderless'
hasCheck	boolean	false	체크박스 출력 여부
checkPath	boolean	false	하위 항목 선택 시 상위항목 자동선택 여부
checkChild	boolean	true	부모 항목 선택 시 하위항목 자동선택 여부
showIcon	boolean	false	메뉴명 앞 아이콘 표시 여부
disabled	boolean	false	true 인 경우 초기 렌더 시 전체 트리가 비활성화되며(is-disabled), 선택/체크 상호작용은 불가하지만 토글러를 통한 확장/축소는 가능
onSelect	function		클릭 시 수행 이벤트
onDoubleClick	function		더블 클릭 시 수행 이벤트
onToggle	function		child 항목을 열고닫을때 수행 이벤트
onCheck	function		체크박스 항목을 선택/해제 할때 수행 이벤트

메소드

name	return	description
addChild(index: number, data: Array)	void	index번째(0~n) child로 data를 추가한다.
expand(index: number)	void	index번째(0~n) child를 확장한다.
collapse(index: number)	void	index번째(0~n) child 데이터를 축소한다.
collapseAll()	void	열려있는 child 데이터를 축소한다.
expandAll()	void	모든 노드를 확장한다.
checkAll()	void	모든 노드를 체크한다. hasCheck: true일 때만 유효하며, 그 외에는 no-op이다.
uncheckAll()	void	모든 노드의 체크를 해제한다. hasCheck: true일 때만 유효하며, 그 외에는 no-op이다.
setChecked(targets: string \| string[], checked: boolean)	void	전달한 단일 또는 복수 노드를 체크/해제한다. 노드 식별은 value로만 수행하며, 대상 노드에는 고유한 value가 필요하다. hasCheck: true일 때만 유효하다.
getChecked(withStatus: Boolean = false)	array	체크박스가 있는 경우(hasCheck: true) 체크된 데이터를 리턴한다 withStatus 옵션을 true로 사용하는 경우 리턴 item.__status 에 그 아이템에 대한 상태값을 포함한다
getItemIndex(item: HTMLElement)	number	아이템 index 값을 리턴한다
findData(index: number)	any	index에 해당하는 아이템을 리턴한다
filter(keyword: string)	any	keyword를 포함한 아이템만 표시한다
disable()	void	트리 컴포넌트 전체를 비활성화한다.
enable()	void	트리 컴포넌트 전체를 활성화한다.