Как мы динамически заполняем сигма-сетку?

Question

Это должно быть так просто и все же...

Следующий код работает просто отлично (я обрезал информацию, которая здесь не нужна):

$(function() 
{
    .
    ..
    ...
    // Defining the data options.
    var datasetOptions = 
    {
        fields: fieldArray,
        recordType: 'array',
        data: rowData
    };

    // Putting together the column options.
    var columnOptions = new Array();
    for (var i = 0; i < fieldNames.length; i++)
    {
        columnOptions.push({id: fieldNames[i], header: fieldNames[i], width: columnWidth});
    }

    // Defining the grid options.
    var toolbar = 'filter state';
    var gridOptions =
    {
        id: 'SigmaGridID',
        container: 'SigmaGridDiv', 
        height: gridHeight,
        pageSize: rowCount,
        replaceContainer: true, 
        resizable: true,
        selectRowByCheck: false,
        showGridMenu : false,
        showIndexColumn: false,
        skin: "vista",
        toolbarContent: toolbar,
        toolbarPosition: 'bottom',
        width: gridWidth, 

        dataset: datasetOptions,
        columns: columnOptions
    };

    // Displaying the grid.
    var grid = new Sigma.Grid(gridOptions);
    Sigma.Util.onLoad(Sigma.Grid.render(grid)); 
});

Когда страница загружается, сетка заполняется и все хорошо. Но я не хочу перезагружать всю страницу каждый раз.

Я преуспел, динамически заполняет сетку, используя:

var grid = Sigma.$grid("SigmaGridID");
grid.refresh(rowData);
Sigma.Grid.render(grid);

но это не регулирует столбцы. Поэтому, если я добавляю столбец, данные обновляются, но отсутствует столбец. Если я удаляю столбец, то отображаются данные, но с дополнительным столбцом все пусто.

Так. Как настроить столбцы или есть ли лучший способ динамического повторного рендеринга и повторного отображения Sigma Grid? Другими словами, как мы отображаем Сигма-сетку, но не только при загрузке страницы?

Благодарю.

Майкл

Answer 1

Ну наконец то я нашел то, что работает.

Когда я хочу снова заселить Сигма-сетку, я сначала делаю уборку:

        Sigma.destroyGrids();
        gGrid = null;

        var oldSigmaGridDiv = document.getElementById("SigmaGridDiv");
        if (!isEmpty(oldSigmaGridDiv))
        {
            oldSigmaGridDiv.parentNode.removeChild(oldSigmaGridDiv);
        }

        var newSigmaGridDiv = document.createElement("div");
        newSigmaGridDiv.id = "SigmaGridDiv";
        var parentDiv = document.getElementById("SigmaGridParentDiv");
        parentDiv.appendChild(newSigmaGridDiv);

Примечание: gGrid - это просто "var grid", над которым я установил global, чтобы иметь возможность установить его в null (чтобы сборщик мусора уничтожил его и обеспечил использование нового пространства памяти).

Затем я вызываю предыдущий код (который я вставил в функцию, чтобы иметь возможность вызывать его по желанию) с одним изменением (в конце):

    gGrid = new Sigma.Grid(gridOptions);
    if (pOnPageLoad)
    {
        Sigma.Util.onLoad(Sigma.Grid.render(gGrid));
    }
    else
    {
        gGrid.render();
    }

Вуаля!

Кроме того, вы можете настроить таргетинг на клетки. Вот пример кода, который показывает, что мы меняем значение столбца "ColumnA", чтобы оно содержало новое значение во всех выбранных строках в Sigma Grid:

var newValue = 'Some amazing new value';

var selectedRows = gGrid.selectedRows;
for (var i = 0; i < selectedRows.length; i++)
{
    // Retrieving the current selected row's index in the grid.
    var indexStr = selectedRows[i].getAttribute("__gt_ds_index__");

    // Changing the value.
    gGrid.setCellValue('ColumnA', parseInt(indexStr), newValue);
    gGrid.refreshRow(selectedRows[i]);
}

gGrid.reload();