사용자 지정 렌더러가 예상대로 작동하지 않아 이상한 표 셀 동작을하는 이유는 무엇입니까?

Question

내 사용자 지정 렌더러가 handsontable에서 이상한 셀의 동작을 유발합니까? 셀을 편집하려고하면 커서가 자동으로 다른 셀로 이동하고 다른 셀은 끊어지며 전체 편집 프로세스가 그 순간부터 중단됩니다.

columns: { data: "some-property", type: {renderer: colorRenderer, editor:colorRenderer}} 

을 불행하게도 나는이 다음 몇 가지를 수행 할 때 : 그 같은 열 정의에 정의 유형을 선택한,

나는 값에 따라 약간의 세포를 색상 화 할 필요가 내가 몇 가지 메커니즘을 사용해야하는 이유입니다 셀 편집 중에 이상한 동작이 발생합니다. 여기 jsfiddle을 살펴보십시오. http://jsfiddle.net/6QEtF/3/ 줄 : 191은 문제가되는 문제입니다.

렌더러를 사용하지 않거나 렌더러에 문제가없는 다른 방법으로 셀을 색칠 할 수 있습니까?

도와주세요

...

여기에 완벽하게 작업 (위 링크) JsFiddle에, 내 샘플 코드입니다. latest version에

var COLUMN_TYPES = new Object(); 

// JSON fetched via Ajax from backend: 
var res = getJSON(); 

// Create grid header names and definitions based on fetched JSON: 
var column_names = []; 
var column_defs = []; 
for (var i=0; i<res.headers.length; i++) { 
    column_names[i] = res.headers[i].name; 
    column_defs[i] = { 
     data: "valueDTO." + i + ".value", 
     type: {renderer: colorRenderer, editor:colorEditor}, // 1 way <--- cause a problem! 
     //type: res.headers[i].type, // 2nd way is correct but without custom renderer which I need to colorize some cells. 
     source: res.headers[i].sources, 
     readOnly: res.headers[i].readOnly, 
     strict: res.headers[i].strict 
    }; 
    COLUMN_TYPES["valueDTO."+i+".value"] = res.headers[i].type; 
} 

// Create grid table: 
createHandsontable(res.rows, column_names, column_defs, res.values); 

function createHandsontable(row_names, column_names, column_defs, values) { 
    var $container = $("#spreadsheet"); 
    var $parent = $container.parent(); 
    $container.handsontable({ 
     startRows: 4, 
     startCols: 20, 
     manualColumnResize: true, 
     manualColumnMove: true, 
     columnSorting: true, 
     contextMenu: true, 
     rowHeaders: row_names, 
     colHeaders: column_names, //grid.headers, 
     data: values, // data init only once at start 
     columns: column_defs, 
     cells: function (row, col, prop) { 
      //return {type: {renderer: colorRenderer, editor: colorEditor}}; 
     } 
    }); 
} 

function colorRenderer (instance, td, row, col, prop, value, cellProperties) { 
    switch (COLUMN_TYPES[prop]) { 
     case 'text': 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      if (value != null) { 
       if (value.toString().toLowerCase() === "green") { 
        $(td).css({ 
         background: '#00DC00' 
        }); 
       } 
       else if (value.toString().toLowerCase() === "amber") { 
        $(td).css({ 
         background: '#FAE600' 
        }); 
       } 
       else if (value.toString().toLowerCase() === "red") { 
        $(td).css({ 
         background: 'red' 
        }); 
       } 
      } 
      break; 
     case 'autocomplete': 
      Handsontable.AutocompleteCell.renderer.apply(this, arguments); 
      Handsontable.AutocompleteCell.editor.apply(this, arguments); 
      break; 
     case 'checkbox': 
      Handsontable.CheckboxCell.renderer.apply(this, arguments); 
      Handsontable.CheckboxCell.editor.apply(this, arguments); 
      break; 
     case 'numeric': 
      Handsontable.NumericCell.renderer.apply(this, arguments); 
      Handsontable.NumericCell.editor.apply(this, arguments); 
      break; 
     case 'date': 
      Handsontable.DateCell.renderer.apply(this, arguments); 
      Handsontable.DateCell.editor.apply(this, arguments); 
      break; 
     case 'handsontable': 
      Handsontable.HandsontableCell.renderer.apply(this, arguments); 
      Handsontable.HandsontableCell.editor.apply(this, arguments); 
      break; 
     default: 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
    } 
}; 

function colorEditor (instance, td, row, col, prop, value, cellProperties) { 
    switch (COLUMN_TYPES[prop]) { 
     case 'text': 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
     case 'autocomplete': 
      Handsontable.AutocompleteCell.renderer.apply(this, arguments); 
      Handsontable.AutocompleteCell.editor.apply(this, arguments); 
      break; 
     case 'checkbox': 
      Handsontable.CheckboxCell.renderer.apply(this, arguments); 
      Handsontable.CheckboxCell.editor.apply(this, arguments); 
      break; 
     case 'numeric': 
      Handsontable.NumericCell.renderer.apply(this, arguments); 
      Handsontable.NumericCell.editor.apply(this, arguments); 
      break; 
     case 'date': 
      Handsontable.DateCell.renderer.apply(this, arguments); 
      Handsontable.DateCell.editor.apply(this, arguments); 
      break; 
     case 'handsontable': 
      Handsontable.HandsontableCell.renderer.apply(this, arguments); 
      Handsontable.HandsontableCell.editor.apply(this, arguments); 
      break; 
     default: 
      Handsontable.TextCell.renderer.apply(this, arguments); 
      Handsontable.TextCell.editor.apply(this, arguments); 
      break; 
    } 
}; 

Answer 1

시도 업그레이드 :

http://handsontable.com/ 

그리고 conditional formatting

를 보라