[JavaScript] Slick Grid 와 Select2 박스 사용법

(일기형태의 메모장이라 '다' 로 끝납니다.)

<memo>

Slick Grid 플러그인과 Select2 박스를 접목시켜 사용해보았다. 

우선 Slick Grid 자체적으로 Select2 박스를 사용할 수 있게 되어 있지만 내가 원하는 형태는 아니였다.

 

아래 링크는 Slick Grid 자체적으로 Select2 를 이용할 수 있는 데모 및 코드이다. 

https://6pac.github.io/SlickGrid/examples/example-select2-editor.html 

SlickGrid example: 'Select2' javascript dropdown editor

 

내가 한 방법에 대해서 순서대로 적어본다.(slickGrid 셋팅은 생략)

1. formatter 를 개별적으로 만든다. 

function templateFormatter(row, cell, value, columnDef, dataContext) {

    html = "";
    html += "<select style='width:100%;' class='form-control select2' id='select2'>";
    html += "<option value='" + dataContext.code + "' selected>" + dataContext.name + "</option>";
    html += "</select>";
    return html;
}

 

2. 만든 formatter 명을 Slick Grid 생성 시 formatter 에 삽입한다. 

var column = [
	{id: "id", name: "컬럼명", field: "필드명", formatter: templateFormatter}
    ];

 

3. 그럼 아래와 같은 형태로 Select2 박스가 다이렉트로 보인다.(slick grid에서 지원하는 건 텍스트 형태로 보이고 클릭 시 select2 박스 형태로 보임)

 

여기까지 순조롭게 셋팅이 가능하지만 에러가 발생한다. 다른 Cell 에 정보 입력 후 Select2 박스를 바로 클릭하게 되면 스크롤에러 및 Select2 박스가 좌측 상단으로 올라간다. 

 

해결코드는 아래와 같다. 

 $("#select2").select2({
         ajax: {
           url: 'url',
           dataType: 'json',
           delay: 250,
           cache: true,
           async: false,
           type: "POST",
           // 검색 Param 셋팅
           data: function (params) {
               return {
                 param1 : "param1",
                 param2: "param2" 
               };
           },
           // 결과를 표현한다.
           processResults: function (data) {
               return {
                 results: $.map(data.items.body, function (item) {
                     return {
                     text: item.text,
                     id: item.value,
                     value: item.value
                     }
                     })
                   };
               },
           },
         placeholder:"선택",
         tags: true, // 검색 값이 리스트에 없어도 입력한 검색값이 select 된다.
         width: 'resolve'
     }).on('select2:opening', function (e) {
     	// select2 오픈 전 이벤트 발생
        // 아래 코드가 핵심이다. -> 입력된 정보가 있을 경우 Cell 에 입력을 하고 return false를 한다.
        // 그렇게 되면 오픈이 되지않고 우선적으로 저장이 되고 다시 select2 박스를 클릭하면 정상적으로 오픈.
        if (Slick.GlobalEditorLock.isActive()){
            Slick.GlobalEditorLock.commitCurrentEdit();
            return false;
        }
       }).on("select2:select", function (e) {
           // 선택되었을 경우 이벤트 발생

       });

</memo>

주석 내용을 참고하여 코드 작성 바랍니다. 

 

Slick Grid 는 UI 는 좀 올드하지만 로딩 속도가 제가 아는 무료 Grid 중에서는 제일 빠른거 같습니다.

Text 형태로 표기하고 클릭하였을 때 Select2 박스가 나오는 경우가 필요하시면 위 링크를 참고하시면 되고 

저처럼 select2 박스가 바로 직관적으로 보이는 형태를 원하시면 제 코드 참고하여 진행하시면 되겠습니다.

 

 

⚠ 틀린 부분있다면 댓글 부탁드립니다.⚠