Можно ли иметь ячейку типа объекта в wijgrid?
Я использую наблюдаемый массив KnockOut для заполнения wijgrid. В wijgrid я хотел бы использовать объект JavaScript в качестве значения некоторых ячеек. К сожалению, кажется, что wijmo конвертирует объекты в строки в своей собственной модели.
Пожалуйста, посмотрите на этот пример. Я хотел бы отобразить имя владельца транспортного средства в таблице, но мне также нужно сохранить идентификатор (и структуру данных модели).
KnockOut ViewModel
var someData =[ { AssetCode: "Truck 5",
Owner: {
id: 1,
name: 'Pete'},
VIN: "T3SN2ADN",
Odo: 232109,
TimeStamp: "2012-07-21T09:13:12Z"},
{ AssetCode: "Car 8",
Owner: {
id: 3,
name: 'Brian'},
VIN: "COFAQ211",
Odo: 433299,
TimeStamp: "2012-07-17T15:34:54Z"}];
function ViewModel() {
var self = this;
self.gridData = ko.observableArray(someData);
}
ko.applyBindings(new ViewModel());
Вейгрид
<table id="t1" data-bind="wijgrid: {
data: gridData,
columns: [
{ headerText: 'Asset Code', dataKey: 'AssetCode', dataType: 'string'},
{ headerText: 'Owner name', dataKey: 'Owner'}, <!-- PROBLEM LINE -->
{ headerText: 'VIN', dataKey: 'VIN', dataType: 'string' },
{ headerText: 'Odometer', dateKey: 'Odo', dataType: 'number' },
{ headerText: 'Time', dataKey: 'TimeStamp', dataType: 'datetime', dataFormatString: timePattern }
]}"></table>
Я пробовал:
- Стандартный подход KnockOut:
{ headerText: 'Owner name', dataKey: 'Owner.name'}
- создание собственного cellFormatter:
{ headerText: 'Owner name', dataKey: 'Owner', cellFormatter: MY_FORMATTER}
Я попробовал почти все, что мог придумать, чтобы заставить это работать, но Wijmo кажется довольно жестким здесь....
Кроме того, когда я отлаживаю в Chrome, кажется, что wijmo преобразовал объект в строку в своей собственной модели перед любым форматированием. Это не очень полезно..
Редактировать - мы используем Wijmo 2.3.9. До сих пор у нас были проблемы с производительностью Wijmo 3. *, поэтому обновление не является неизбежным.
2 ответа
Хорошо, получается, что вы можете получить значение ячейки как объект, используя cellFormatter
... Чтобы заставить это работать, не указывайте dataKey
приписывать. Вот исправленный код:
<table id="t1" data-bind="wijgrid: {
data: gridData,
columns: [
{ headerText: 'Asset Code', dataKey: 'AssetCode', dataType: 'string'},
{ headerText: 'Owner name', cellFormatter: MY_FORMATTER}, <!-- FIXED LINE -->
{ headerText: 'VIN', dataKey: 'VIN', dataType: 'string' },
{ headerText: 'Odometer', dateKey: 'Odo', dataType: 'number' },
{ headerText: 'Time', dataKey: 'TimeStamp', dataType: 'datetime', dataFormatString: timePattern }
]}"></table>
И следующие JS:
var MY_FORMATTER = function(args) {
if (args.row.data && args.row.dataRowIndex >= 0) {
args.formattedValue = args.row.data.Owner.name;
}
};
Вы можете установить произвольное значение для любой ячейки (или отобразить имя владельца транспортного средства в вашем случае), обрабатывая cellStyleFormatter следующим образом:
cellStyleFormatter: function (args) {
//check for specific column and header row
if (args.column.headerText == "Owner name" && args.row.dataRowIndex >= 0) {
//set the custom value to cell i.e. vehicle owner name
args.$cell.text(args.row.data.Owner.name);
}
}
Для получения дополнительной информации о CellStyleFormatter вы можете обратиться по адресу: http://wijmo.com/wiki/index.php/Grid