Статьи

Семейство виджетов dojox.grid и странный случай модификации предметов

Январь 25, 2019

Итак, вы создаете веб-приложение и решили использовать отличный фреймворк Dojo. Вероятно, если вам нужно использовать сетки, вы решите использовать некоторые из доступных подклассов виджетов dojox.grid .

Ну, мой друг, будь в курсе данных, которые ты используешь для заполнения хранилища сетки !!!

Сценарий

Начните создавать фрагмент кода для выполнения, когда страница будет готова. Он будет использовать виджет DataGrid с хранилищем ItemFileWriteStore :

require(['dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/domReady!'],
 
function(DataGrid, ItemFileWriteStore){

Теперь создайте объект данных с набором случайных элементов:

// Set up data store
var data = {
    identifier: "id",
    items: []
};
// Initialize with random elements.
var rows = 10;

Обратите внимание, что мы храним наши товары в другом массиве:

var items = [];
for(var i = 0; i < rows; i++){
    items.push({ id: i+1, col1: "the first column", col2: false, col3: 'A column with a long description', col4: Math.random()*50 });
}
data.items = items;

Теперь создайте магазин и установите макет сетки:

var store = new ItemFileWriteStore({data: data});
 
// Set up layout
var layout = [[
        {'name': 'Column ID', 'field': 'id', 'width': '100px'},
        {'name': 'Column 1', 'field': 'col1', 'width': '100px'},
        {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
        {'name': 'Column 3', 'field': 'col3', 'width': 'auto'},
        {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

Наконец, создайте сетку (не забудьте вызвать на ней запуск):

    // Create a new grid
    var grid = new DataGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'
    });
 
    // Append the new grid to the div
    grid.placeAt("gridDiv");
 
    // Call startup() to render the grid
    grid.startup();
});

Код сетки требует от нас наличия HTML-элемента на нашей странице:

<div id="gridDiv"></div>

Вот результат предыдущего кода:

Проблема

Наша идея хранить элементы в массиве заключается в том, чтобы:

  • служить входными данными для хранилища сетки
  • хранить исходный массив для выполнения других операций: для использования в других хранилищах, для простой итерации… всего, что мы хотим.

Проблема заключается в том, что массив элементов, используемых для инициализации хранилища данных, изменяется после выполнения метода startup () сетки .

Давайте посмотрим на это в действии. Проверьте значение массива элементов до и после запуска метода grid () :

Перед

 

 

После

Да, объекты в массиве items модифицируются для внутренних потоков.

Выводы

Эта простая проблема может иметь серьезные последствия в зависимости от вашего пути к коду.

Предположим, вы получаете файл JSON с информацией о сотрудниках и о каждой компании, с которой они работали. Вы будете хранить эту информацию в массиве объектов JavaScript и можете быть заинтересованы в использовании для:

  • искать босса среди сотрудников
  • инициализируйте TreeGrid, чтобы показать весь список данных.

Проблема в том, что вы не можете использовать один и тот же массив объектов для двух задач, потому что в тот момент, когда TreeGrid выполнит свой метод startup (), массив элементов изменит свою структуру.

Как это решить? Создайте новый массив объектов из исходного или сохраните их в хранилище памяти .

Рекомендации

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/index.html

http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html

http://dojotoolkit.org/reference-guide/1.7/dojo/data/ItemFileWriteStore.html

Подключение магазина к DataGrid —  http://dojotoolkit.org/documentation/tutorials/1.7/store_driven_grid/

 

 

34
Share: