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)
        }
      }
    }

  });

옵션

License

Darainfo is under MIT License.