Picklist

/scss/controls/picklist.scss

v.0.1.0 javascript

기본 사용

<div class="gn-picklist">
  <div class="picklist-source">
    <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-down"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-down"></i>
        </span>
      </button>
    </div>
    <div class="gn-dropdown is-opened">
      <div class="dropdown-items">
        <ul>
          <li class="dropdown-item">항목 1</li>
          <li class="dropdown-item">항목 2</li>
          <li class="dropdown-item">항목 3</li>
          <li class="dropdown-item">항목 4</li>
          <li class="dropdown-item">항목 5</li>
          <li class="dropdown-item">항목 6</li>
          <li class="dropdown-item">항목 7</li>
          <li class="dropdown-item">항목 8</li>
          <li class="dropdown-item">항목 9</li>
          <li class="dropdown-item">항목 10</li>
          <li class="dropdown-item">항목 11</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-double-right"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-right"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-left"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-double-left"></i>
      </span>
    </button>
  </div>
  <div class="picklist-target">
    <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-down"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-down"></i>
        </span>
      </button>
    </div>
    <div class="gn-dropdown is-opened">
      <div class="dropdown-items">
        <ul>
        </ul>
      </div>
    </div>
  </div>
</div>

방향 전환

<div class="gn-picklist is-vertical" style="height: 400px; width: 550px">
  <div class="picklist-source">   
    <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-down"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-down"></i>
        </span>
      </button>
    </div> 
    <div class="gn-dropdown is-opened">
      <div class="dropdown-items">
        <ul>
          <li class="dropdown-item">항목 1</li>
          <li class="dropdown-item">항목 2</li>
          <li class="dropdown-item">항목 3</li>
          <li class="dropdown-item">항목 4</li>
          <li class="dropdown-item">항목 5</li>
          <li class="dropdown-item">항목 6</li>
          <li class="dropdown-item">항목 7</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="picklist-controls gn-control is-small has-arrange is-center">
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-double-down"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-down"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-up"></i>
      </span>
    </button>
    <button type="button" class="gn-button is-outline">
      <span class="gn-icon">
        <i class="fas fa-angle-double-up"></i>
      </span>
    </button>
  </div>
  <div class="picklist-target">
    <div class="picklist-controls gn-control is-small has-arrange is-vertical is-center">
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-up"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-down"></i>
        </span>
      </button>
      <button type="button" class="gn-button is-outline">
        <span class="gn-icon">
          <i class="fas fa-angle-double-down"></i>
        </span>
      </button>
    </div>
    <div class="gn-dropdown is-opened">
      <div class="dropdown-items">
        <ul>
        </ul>
      </div>
    </div>
  </div>
</div>

생성 옵션

  <div class="new-picklist"></div>
  <div class="new-picklist-v"></div>
  <div class="new-picklist-cols"></div>
  <div class="new-picklist-tooltip"></div>

  Gn.create('picklist', {
    target: '.new-picklist',
    data: {
      source: [
        { value: '항목1', text: 'item1', html: '<span class="gn-tag is-primary">항목1</span> item1' },
        { value: '항목2', text: 'item2', html: '<span class="gn-tag is-danger">항목2</span> item2' },
        { value: '항목3', text: 'item3', html: '<span class="gn-tag is-warning">항목3</span> item3' }
      ],
      target: [
        { value: '항목4', text: 'item4', html: '<span class="gn-tag is-help">항목4</span> item4' },
        { value: '항목5', text: 'item5', html: '<span class="gn-tag is-success">항목5</span> item5' }
      ]
    },
    hasSourceSearch: true,
    hasTargetSearch: true,
    width: '80%',
    height: 180,
    onChange: function (s, t) {
      console.log(s, t);
    },
    orderable: 'target'
  });
  Gn.create('picklist', {
    target: '.new-picklist-v', 
    data : {
      source: [
        { value: '항목1', text: 'item1' },
        { value: '항목2', text: 'item2' },
        { value: '항목3', text: 'item3' },
        { value: '항목4', text: 'item4' },
        { value: '항목5', text: 'item5' }
      ],
      target: []
    },
    direction: 'vertical',
    width: '500px',
    height: 150
  });
  Gn.create('picklist', {
    target: '.new-picklist-cols',
    data: {
      source: [
        { value: '항목1', cols: ['item1', '1', '상세정보1'] },
        { value: '항목2', cols: ['item2', '2', '상세정보2'] },
        { value: '항목3', cols: ['item3', '3', '상세정보3'] },
        { value: '항목4', cols: ['item4', '4', '상세정보4'] },
        { value: '항목5', cols: ['item5', '5', '상세정보5'] }
      ],
      target: []
    },
    direction: 'vertical',
    width: '500px',
    height: 150
  });
  Gn.create('picklist', {
    target: '.new-picklist-tooltip',
    data: {
      source: [
        { value: '항목1', text: 'item1' },
        { value: '항목2', text: 'item2' },
        { value: '항목3', text: 'item3' }
      ],
      target: []
    },
    optionTooltip: {
      direction: 'right',
      content: function(option) {
        return '<div style="padding: 10px; max-width: 200px;">' + option.text + '에 대한 추가 정보입니다.</div>';
      }
    },
    direction: 'horizontal',
    width: '500px',
    height: 150
  });

데이터 모델 (PicklistItem)

필드	type	필수	description
value	string	Y	항목 값
text	string	N	단일 컬럼 표시 텍스트
cols	string[]	N	다중 컬럼 표시 값 배열
html	string	N	옵션 html(html이 있는 경우 text가 있는 항목만 선택 가능하다.)
icon	string	N	font awesome solid icon name

name		type	default	description
target		string		picklist를 표시할 대상의 선택자(selector) * data의 target과 혼동되지 않도록 주의
data	source	PicklistItem[]		source 항목 배열 - PicklistItem 참조 참고: 표시 우선순위는 html > cols > text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.
data	target	PicklistItem[]		target 항목 배열 - PicklistItem 참조 참고: 표시 우선순위는 html > cols > text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다.
textSets	sourceCaption	string		source 항목 캡션
	targetCaption	string		target 항목 캡션
	searchText	string	'search item'
orderable		string, boolean	true	정렬 버튼 출력 여부 (true, false, 'source', 'target')
width		string, number	100%	컴포넌트 넓이
height		string, number	150	선택항목 영역의 높이
direction		string	'horizontal'	컴포넌트 방향 ('horizontal', 'vertical')
optionTooltip		object		옵션 툴팁 설정 direction: 'top','right','bottom','left' content: function(option){ return htmlString } fetch: function(option){ return Promise that resolves htmlString }
hasSourceSearch		boolean	false	source 항목 검색기능 활성화 여부
hasTargetSearch		boolean	false	target 항목 검색기능 활성화 여부
disabled		boolean	false	Disable 여부
onChange		function(source, target)		컴포넌트 값 변경 시 발생 이벤트
onChange		function(source, target)		컴포넌트 값 변경 시 발생 이벤트
onSort		function(source, target)		항목 정렬 시 발생 이벤트
onTransfre		function(source, target)		source, target 간 이동 시 발생 이벤트

메소드

name	return	description
getSource()	array	source 항목의 배열을 반환한다.
getTarget()	array	target 항목의 배열을 반환한다.
getValue()	string	target 항목의 value를 콤마(,)로 구분하여 반환한다.
disable()	void	Disabled 처리한다.
enable()	void	Enabled 처리한다.
setSource(array[{value: string\|array, text: string}])	void	source 항목을 변경한다.
setTarget(array[{value: string\|array, text: string}])	void	target 항목을 변경한다.
setData({source: array[{value: string\|array, text: string}], target: array[{value: string\|array, text: string}])	void	source, target 항목을 변경한다.