slickgrid에서 편집 가능한 사용자 정의 열을 구현하는 방법은 편집기가 사용자 정의 선택 편집기입니까?

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을 가리키는 것을 의미 한 ㄴ다는 것을 짐작한다. 참고 : fieldIdx을 참조하는 포맷터를 설정하지 않으면 격자 세트에 field 속성이 표시됩니다.

코드 :

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

대신에 이것을 시도.

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