如何在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上實現可編輯的自定義列，編輯器是自定義選擇編輯器？

回答

相關問題