slickgrid 맞춤 편집기에서 클릭 이벤트를 어떻게 처리합니까?

Question

나는처럼 보이는 slickgrid에서 사용자 지정 편집기가 있습니다

는

사용자 정의 편집기 코드가 보이는을 같은 :

function GroupsSelectEditor(args) { 
    var $groups; 
    var defaultValue; 

    this.init = function() { 
     $groups = $("<div class=\"editor-groups\">" + 
       "<ul>"+ 
        "<li><input type='checkbox'> group1</li>" + 
        "<li><input type='checkbox'> group2</li>" + 
        "<li><input type='checkbox'> group3</li>" + 
        "<li><input type='checkbox'> group4</li>" + 
        "<li><input type='checkbox'> group5</li>" + 
       "</ul>" + 
       "<button class=\"btn btn-mini\" >done</button>" + 
      "</div"); 
     $groups.appendTo(args.container); 
    }; 

    this.destroy = function() { 
     $groups.remove(); 
    }; 

    // ... 
    } 

그리고 문제의 열이 사용자 정의 편집기를 사용

columns = [ 
    {id: "groups", name: "Groups", field: "groups", editor: GroupsSelectEditor}, 
]; 

을

아마도 "done"버튼을 사용하여 "$ groups"div 요소를 닫을 수 있습니다. 아마도 destroy() 함수를 호출하면됩니다.

가장 좋은 방법은 무엇입니까? 슬릭 그리드가 자체 이벤트를 사용한다는 것은 알고 있지만, 제 버튼을 어떻게 참여 시킬지, 또는 그것이 적절한 지 모릅니다.

Answer 1

slickgrid 이벤트를 사용하지 않아도된다는 사실이 밝혀졌습니다. 현재 활성 편집기를 폐기하는 올바른 방법이 그리드 함수 호출이다

이하

grid.getEditController().commitCurrentEdit(); 

는 DOM은 구분 적 방식으로 구성되는 변형 된 코드가, 그리고 클릭 핸들러는 버튼에 결합되는 이 commitCurrentEdit() 함수라고합니다.

function (args) { 
    var $groups; 
    var defaultValue; 

    this.init = function() { 
     $groups = $("<div class=\"editor-groups\"></div>"); 
     var ul = $("<ul></ul>"); 
     $groups.append(ul); 
     for (var i=0;i<5;i++) { 
      var li = $("<li><input type='checkbox'> group"+i+"</li>"); 
      ul.append(li); 
     } 
     var btn = $("<button class=\"btn btn-mini\" >done</button>"); 
     btn.click(function() { 
      args.grid.getEditController().commitCurrentEdit(); 
     }); 
     $groups.append(btn); 
     $groups.appendTo(args.container); 
     $groups.focus(); 
    }; 

    this.destroy = function() { 
     $groups.remove(); 
    }; 

    ... 
    ... 

    } 

참고로 전화 할 수있는 cancelCurrentEdit()가 있습니다.