如何在slickgrid上实现可编辑的自定义列，编辑器是自定义选择编辑器？

我的slickgrid有可编辑的列。其中一列是自定义列，因为我想显示和编辑该对象的名称。为了编辑该名称，我需要一个自定义选择。为了正确显示网格中的数据，我在网格选项dataItemColumnValueExtractor上设置了数据，所以数据显示正确，但问题出在我编辑该列或添加新行时，从选择中选择的值未显示在网格上。请参阅下面的代码：如何在slickgrid上实现可编辑的自定义列，编辑器是自定义选择编辑器？

var gridOptions = { 
editable: true, 
enableAddRow: true, 
enableCellNavigation: true, 
asyncEditorLoading: false, 
autoEdit: true, 
rowHeight: 30, 
dataItemColumnValueExtractor: function getValue(item, column) { 
    var values = item[column.field]; 
    if (column.fieldIdx !== undefined) { 
     return values && values[column.fieldIdx]; 
    } else { 
     return values; 
    } 
}

};

var alternatesGridColumns = [ 
     { id: "DetailId", name: "DetailId", field: "DetailId", width: 0, minWidth: 0, maxWidth: 0, cssClass: "gridColumnHidden", headerCssClass: "gridColumnHidden" }, 
     { id: "Alternate", name: "Alternate", field: "Alternate", fieldIdx: 'Name', width: 220, cssClass: "cell-title", editor: selectAlternates, selectvalidator: requiredFieldValidator }, 
     { id: "Conversion", name: "Qty Per", field: "Conversion", width: 200, editor: Slick.Editors.Text, validator: requiredFieldValidator }, 
     { id: "Id", name: "Action", field: "Id", width: 80, resizable: false, formatter: Slick.Formatters.DeleteSelects }

];

initAlternatesGrid = function (selections) { 
alternatesGrid = new Slick.Grid("#AlternatesGrid", selections, alternatesGridColumns, gridOptions); 
alternatesGrid.setSelectionModel(new Slick.CellSelectionModel()); 
alternatesGrid.onAddNewRow.subscribe(function (e, args) { 
    data = alternatesGrid.getData(); 
    var item = args.item; 
    if (!validateSelection(args.item)) { 
     return false; 
    } 
    alternatesGrid.invalidateRow(data.length); 
    data.push(item); 
    alternatesGrid.updateRowCount(); 
    console.log(data); 
    alternatesGrid.render(); 
});

}

function selectAlternates(args) { 
var $select; 
var defaultValue = ""; 

this.init = function() { 
    option_str = ""; 
    $.each(List, function (index, value) { 
     option_str += "<OPTION value='" + value.Text + "'>" + value.Text + "</OPTION>"; 
    }); 
    $select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>"); 
    $select.appendTo(args.container); 
    $select.focus(); 
}; 
this.destroy = function() { 
    $select.remove(); 
}; 

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

this.loadValue = function (item) { 
    var fnDicve = args.grid.getOptions().dataItemColumnValueExtractor; 
    defaultValue = (fnDicve ? fnDicve(item, args.column) : item[args.column.field]) || ""; 
    $select.val(defaultValue); 
    $select.select(); 
}; 

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

this.applyValue = function (item, state) { 

    item[args.column.fieldId] = state; 
}; 

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

this.validate = function() { 
    if (args.column.validator) { 
     var validationResults = args.column.validator($select.val(), args); 
     if (!validationResults.valid) { 
      return validationResults; 
     } 
    } 
    return { 
     valid: true, 
     msg: null 
    }; 
}; 
this.init(); 
return $select.val();

};

我该如何做这项工作？谢谢

来源

2016-09-06 Moni

fieldId不是列定义的一部分。我想你的意思是指fieldIdx。注意：除非您设置格式化程序指，否则设置的field属性将显示在您的网格中。

代码：

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

试试这个吧。

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

来源

2016-09-07 04:58:32 winghei

如何在slickgrid上实现可编辑的自定义列，编辑器是自定义选择编辑器？

回答

相关问题