JQuery UI 1.9.2를 사용하여 자동 완성 SlickGrid 편집기를 만드는 방법

Question

다른 질문의 조언을 따라 왔지만 제대로 작동하지 않습니다. 나는 JQuery 1.8.3과 JQuery UI 1.9.2를 사용하고있다.

화살표 키를 누르면 자동 완성이 다음 옵션을 선택하지 않는다. 왜?

모든 이벤트 처리기에서 stopPropagation을 시도했습니다. 나는 keypress, keyup, keydown, handlers를 사용했다. 나는 부모 태그에 입력 요소를 싸서 그 이벤트에 stopPropagation을 넣었고 화살표 키는 여전히 자동 완성 요소에서 작동하지 않습니다. 그들은 단지 유효성 검사기 기능이 예방하는 셀을 변경하려고 시도합니다.

$input.bind("keydown.nav", function (e) {function AutoCompleteEditor(args) { 
     var $input, 
       defaultValue, 
       scope = this; 

     this.init = function() { 
       $input = $("<INPUT type=text class='editor-text' />"); 
       $input.appendTo(args.container) 
         .focus() 
         .select() 
         .autocomplete({ 
           delay: 0, 
           minLength: 0, 
           source: args.column.options 
         }) 
         .bind("keydown.nav", function (e) { 
           if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) { 
             e.stopImmediatePropagation(); 
             e.stopPropagation(); 
           } else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) { 
             e.stopImmediatePropagation(); 
             e.stopPropagation(); 
           } 
         }) 
     }; 

     this.destroy = function() { 
       $input.autocomplete('destroy'); 
       $input.remove(); 
     }; 

     this.focus = function() { 
       $input.focus(); 
     }; 

     this.getValue = function() { 
       return $input.val(); 
     }; 

     this.setValue = function (val) { 
       $input.val(val); 
     }; 

     this.loadValue = function (item) { 
       defaultValue = item[args.column.field] || ""; 
       $input.val(defaultValue); 
       $input[0].defaultValue = defaultValue; 
       $input.select(); 
     }; 

     this.serializeValue = function() { 
       return $input.val(); 
     }; 

     this.applyValue = function (item, state) { 
       item[args.column.field] = state; 
     }; 

     this.isValueChanged = function() { 
       return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
     }; 

     this.validate = function() { 
       var val = $input.val(); 
       return { 
         valid: args.column.options.indexOf(val) > -1, 
         msg: null 
       }; 
     }; 

     this.init(); 
} 

Answer 1

일부 SlickGrid 열의 편집기로 Kendo UI ComboBox를 사용하고 있습니다. 키보드 탐색 동작을 수정하기 위해 수행 한 작업을 확인하십시오.

먼저, 그리드 및 보조 기능의 몇 만들 수있는 몇 가지 코드 : 코드, 내가 초기화에서 이러한 함수를 호출 편집기 내부

var data = []; // some data 
var columns = []; // some columns 
var options = { 
    editable: true, 
    autoEdit: false 
}; 
var grid = new Slick.Grid('#myGrid', data, columns, options); 
grid.render(); 

function editing_keydown(e, args) { 
    if (!e.shiftKey && !e.altKey && !e.ctrlKey) { 
     if (e.which >= 37 && e.which <= 40) { 
      e.stopImmediatePropagation(); 
     } 
    } 
} 

function disableGridCellNavigation() { 
    grid.onKeyDown.subscribe(editing_keydown); 
}; 

function enableGridCellNavigation() { 
    grid.onKeyDown.unsubscribe(editing_keydown); 
}; 

다음

, 는 및 를 파괴 방법 :

this.init = function() { 
    // initialization stuff 
    // last line: 
    disableGridCellNavigation(); 
}; 

this.destroy = function() { 
    // termination stuff 
    // last line: 
    enableGridCellNavigation(); 
}; 

이 솔루션을 시작점으로 사용할 수 있습니다. 너를 정교하게 만들어라.