Как обновить datagrid
Я создаю dojox.сетка.datagrid и я заполняем контент из массива, как на примере последний пример на странице. Со временем я изменяю значение этого массива в коде. Как обновить содержимое этой сетки ? Как загрузить новые данные из измененного массива ?
6 ответов
чтобы изменить значения в сетке, вам нужно будет изменить значение в хранилище сетки. Данные сетки привязаны к данным хранилища, и сетка будет обновляться по мере необходимости.
таким образом, ключ должен понять api данных Dojo и как магазины работают в Dojo. Вместо того, чтобы манипулировать данными непосредственно в сетке, манипулируйте ими в хранилище.
В идеале хранилище-это Ваш массив, которым вы управляете при запуске приложения, и вам не нужно синхронизировать массив с сетка. Просто используйте ItemFileWriteStore в качестве держателя данных, если это невозможно.
кроме того, использование Dojo Data identity api упрощает поиск элементов в сетке, если это возможно. Предполагая, что вы знаете, когда элемент обновляется, удаляется или изменяется в приложении, вы должны иметь возможность изменять хранилище сетки по мере необходимости, когда происходит действие. Это определенно предпочтительный подход. Если вы не можете этого сделать, вам придется сделать общую выборку и использовать onComplete обратный вызов для ручной синхронизации массивов, которые будут очень медленными и не будут масштабироваться хорошо, в этом случае вы можете просто создать новый магазин все вместе и назначить его сетке с сеткой.setStore (myNewStore)
вот скрипка с базовой операцией создания, обновления и удаления:http://jsfiddle.net/BC7yT/11/
все эти примеры используют преимущества объявления идентификатора при создании хранилища.
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier : 'planet',
items: itemList
}
});
ОБНОВИТЬ EXISITNG Пункт:
//If the store is not in your scope you can get it from the grid
var store = grid.store;
//fetchItemByIdentity would be faster here, but this uses query just to show
//it is also possible
store.fetch({query : {planet : 'Zoron'},
onItem : function (item ) {
var humans = store.getValue(item, 'humanPop');
humans += 200;
store.setValue(item, 'humanPop', humans);
}
});
ВСТАВИТЬ НОВЫЙ ПУНКТ:
store.newItem({planet: 'Endron', humanPop : 40000, alienPop : 9000});
} catch (e) {
//An item with the same identity already exists
}
УДАЛИТЬ ЭЛЕМЕНТ:
store.fetchItemByIdentity({ 'identity' : 'Gaxula', onItem : function (item ) {
if(item == null) {
//Item does not exist
} else {
store.deleteItem(item);
}
}});
для обновления сетки можно использовать следующий фрагмент кода:
var newStore = new dojo.data.ItemFileReadStore({data: {... some new data ...});
var grid = dijit.byId("gridId");
grid.setStore(newStore);
EDIT:
Dogo data grid справочное руководство (пример добавления/удаления строк, обновление примеров данных сетки )
(Я полагаю, у вас уже есть рабочая сетка, и вы хотите полностью изменить магазин сетки)
-
создать новое хранилище данных с новым значением :
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
(данные-это ответ из запроса ajax для меня)
-
измените магазин сетки на новый:
grid.store = dataStore;
-
Render:
grid.render();
это обновит Grid Store и обновит представление сетки в последней версии Dojo 1.9
grid.store = store;
grid._refresh();
У меня был серверный отфильтрованный EnhancedGrid, который радостно обновлялся, изменяя магазин и показанный в других ответах.
однако у меня была другая EnhancedGrid, которая не обновлялась при применении фильтра. Возможно, это связано с тем, что он был отфильтрован на стороне клиента (но данные все еще поступают с сервера с помощью jsonrest store), но я действительно не знаю причину. Eitherway, решение состояло в том, чтобы обновить следующий код:
grid.setFilter(grid.getFilter());
это суховато и странно, но если все остальное провалится...
С этим я могу обновить строку спецификации. этот пример для treegrid.
var idx = this.treeGrid.getItemIndex(item);
if(typeof idx == "string"){
this.treeGrid.updateRow(idx.split('/')[0]);
}else if(idx > -1){
this.treeGrid.updateRow(idx);
}