Javascript 为什么自定义渲染器不能按预期工作并导致奇怪的表格单元格行为？

我的自定义渲染器在handsontable中导致奇怪的单元格行为的原因是什么？当我尝试编辑单元格时，光标会自动向下移动到另一个单元格，而其他单元格则处于混乱状态，整个编辑过程从那时起就崩溃了

我需要根据值对一些单元格着色，这就是为什么我需要使用某种机制，我选择了在列定义中定义类型，如下所示：

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

不幸的是，当我这样做，然后一些奇怪的行为发生在单元格编辑。请在这里查看JSFIDLE： 行：191是有问题的问题

如何在不使用渲染器的情况下以其他方式对单元格着色，或者渲染器有什么问题

请帮忙

这是我的示例代码，完全在JSFIDLE上工作（上面的链接）

var COLUMN_TYPES=new Object（）；
//从后端通过Ajax获取的JSON：
var res=getJSON（）；
//基于获取的JSON创建网格头名称和定义：
变量列名称=[]；
var列_defs=[]；
对于（var i=0；i请尝试升级到：

看看

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

http://handsontable.com/