Question

我的slickgrid有可编辑的列。其中一列是自定义列，因为我想显示和编辑该对象的名称。为了编辑该名称，我需要自定义选择。为了正确显示网格中的数据，我在网格选项dataItemColumnValueExtractor上设置，因此数据显示正确，但问题是当我编辑该列或添加新行时，从选择中选择的值不会显示在网格上。请参见下面的代码：

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();

};

我怎么能让这个工作？谢谢

Answer 1

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

您的代码：

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

试试这个。

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

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

1 个答案: