dara-multiselect

MultiSelect

JavaScript multi select library

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

1. Install

yarn install
# OR
npm install

2. Run

npm start

3. Open http://localhost:8890 in your browser

다국어 처리

  MultiSelect.setMessage({
    up: '위',
    down: '아래',
    add: '추가',
    allAdd: '전체추가',
    remove: '제거',
    allRemove: '전체제거',
    maxSizeMsg: "{maxSize} 개 까지 등록 가능합니다.", // 추가 가능한 max size가 넘었을경우 메시지 String
    duplicate: "이미 등록된 항목이 존재합니다.",
    addEmptyMessage: "추가할 항목을 선택해주세요.",
    removeEmptyMessage: "제거할 항목을 선택해주세요.",
  })

사용방법

const example1 = new MultiSelect('#example1', {
    mode: 'double'	// single, double
    , style: {
      height: 300
    }
    , orientation: 'horizontal' // horizontal , vertical
    , body: {
      enableMoveBtn: true	// 이동 버튼 보이기 여부
      , moveBtnSize: 50	// item move button 영역 width 값
    }
    , footer: {
      enable: true
    }
    , useMultiSelect: true
    , useDragMove: true	// drag해서 이동할지 여부.
    , useDragSort: true // target drag 해서 정렬할지 여부.
    , enableUpDown: true // updown 버튼 활성화여부.

    , duplicateCheck: true
    , valueKey: 'viewid'
    , labelKey: 'uname'
    , source: {
      items: []
      , enableLabel: true
      , search: {
        enable: true
        , callback: (param) => {
          console.log(param)
        }
      }
      , completeMove: function (addItems) {
        console.log('source completeMove fn', JSON.stringify(addItems));
        return true;
      }
      , paging: {
        enable: true
        , unitPage: 10
        , totalCount: 300
        , currPage: 15
        , callback: function (clickInfo) {
          console.log(clickInfo)
        }
      }
    }
    , target: {
      label: 'Target'
      , enableLabel: true
      , items: []
      , limitSize: -1 // 추가 가능한 max size
      , emptyMessage: 'asdfasdf '
      , completeMove: function (delItem) {
        console.log(delItem);
      }
      , paging: {
        enable: true
        , unitPage: 10
        , totalCount: 150
        , currPage: 1

        , callback: function (clickInfo) {
          console.log(clickInfo)
        }
      }
    }

  });

<style> table td, table th{ border: 1px solid #dddd; vertical-align:top; } </style>

옵션

	설명	기본값	옵션
style		설명 기본값 width 넓이 "auto" height 높이 300
mode	mode	double	single, double
orientation	방향	horizontal	horizontal, vertical
body		설명 기본값 enableMoveBtn 이동버튼 보이기 여부 true moveBtnSize 버튼 width 50
enableAddEmptyMessage	추가 아이템 없을때 메시지 보이기 여부	false
enableRemoveEmptyMessage	삭제 아이템 없을때 메시지 보이기 여부	false
useMultiSelect	다중 항목 추가 여부 사용여부	true
useDragMove	Drag 이동여부	false
useDragSort	drag 상하위 이동 가능여부	false
addPosition	추가 위치	bottom	bottom, top
duplicateCheck	중복체크	true
enableUpDown	상하위 이동 버튼 활성화 여부	false
valueKey	item value key	code
labelKey	item label key	name
pageNumKey	page number key	pageNo
source		설명 기본값 label label name labelAlign label 정렬 center ex:) left, center, right enableLabel label 활성화 여부 false enableAddBtn 추가 버튼 보이기 여부 true emptyMessage 항목 없을때 메시지 "" items 항목 [] search 설명 기본값 enable 검색 활성화 여부 false callback 검색 콜백 paging 설명 기본값 enable 페이지 활성화 여부 false unitPage 페이지 몇개 보일지 여부 10 currPage 현재 페이지 정보 1
target		설명 기본값 label label name labelAlign label 정렬 "center" enableLabel label 활성화 여부 false enableRemoveBtn 삭제 버튼 보이기 여부 true emptyMessage 항목 없을때 메시지 items 항목 [] limitSize 제한갯수 -1 search 설명 기본값 enable 검색 활성화 여부 false callback 검색 콜백 paging 설명 기본값 enable 페이지 활성화 여부 false unitPage 페이지 몇개 보일지 여부 10 currPage 현재 페이지 정보 1 enableMultiple true

License

Darainfo is under MIT License.