Cохранение состояния колонок в проекте Pir.

Отнаследуемся от класса Ext.grid.Panel, чтобы наш новый класс имел возможность сохранять сосотояние колонок. Вынесем его в отдельный файл AppCode\KeepingStateGrid.ts. Будем использовать localStorage у браузера, чтобы хранить состояние колонок.

При инициализации грида в методе initComponent можно подписаться на события перемещения/изменения сортировки/изменение состояния видимости/изменения ширины у колонок и при каждом вызове сохранять состояние. Для сохранения состояния вызывается метод Omnis.DockedViewState.SaveState(), который записывает в localStorage состояние. И для каждого грида будет хранить собственный объект под именем me.cmpStateId = me.id + '_columnsState', а также отдельно сортировку для каждого грида под именем me.cmpSortStateId = me.id + '_sortState'.
В методе getColumns рекурсивно определяем структуру колонок и сравниваем эту структуру с уже сохраненной в localStorage.

me.getColumns = function () {
    if (this.getLocalStorageItem(me.cmpStateId).length && Omnis.Application.Config.keepingStateGrid === true) {

        var grid = me,
            transformColumns = [],
            initColumns = grid.columns.map(function (c) { return me.cloneObj(c) });

        function deepSearchColumn(initColumns, modelColumn) {
            var resultColumn = [],
                spliceColumnIndex;
            for (var i = 0; i < initColumns.length; i++) {
                if (initColumns[i].columns) {
                    for (var j = 0; j < initColumns[i].columns.length; j++) {
                        resultColumn = initColumns[i].columns.filter(function (f, index) {
                            if (f.header == modelColumn.text) {
                                spliceColumnIndex = index;
                                return true;
                            }
                        });
                        if (resultColumn && resultColumn.length > 0) {
                            initColumns[i].columns.splice(spliceColumnIndex, 1);
                            break;
                        }
                    }
                };
                if (resultColumn && resultColumn.length > 0)
                    break;
            };
            return resultColumn;
        };

        function setAttrs(column, modelColumn) {
            column.hidden = modelColumn.hidden;
            column.width = modelColumn.width;
        };

        function searchColumn(initColumns, modelColumn) {
            var resultColumn = initColumns.filter(function (c) { 
                return (c.text && c.text == modelColumn.text) || (!c.text && c.dataIndex == modelColumn.dataIndex)
            });

            if (!resultColumn.length)
                resultColumn = deepSearchColumn(me.columns, modelColumn);

            if (modelColumn.columns && modelColumn.columns.length > 0) {
                var res = [];
                Ext.each(modelColumn.columns, function (childColumn) {
                    var resultChildColumn = resultColumn[0].columns.filter(function (f) { return f.header == childColumn.text });

                    if (!resultChildColumn.length)
                        resultChildColumn = deepSearchColumn(me.columns, childColumn);

                    setAttrs(resultChildColumn[0], childColumn);
                    res.push(resultChildColumn[0]);
                });
                resultColumn[0].columns = res;
            };
            setAttrs(resultColumn[0], modelColumn);

            return resultColumn;
        };


        Ext.each(this.getLocalStorageItem(me.cmpStateId), function (modelColumn) {
            if (modelColumn.dataIndex != null && modelColumn.dataIndex.indexOf('gridcolumn') < 0) {
                var result = searchColumn(initColumns, modelColumn);
                transformColumns.push(result[0]);
            }
        });

        return transformColumns;

    } else {

        return me.columns;

    }
};

И дальше на основе сохраненной копии состава колонок в localStorage мы трансформируем наши колонки в такое же состояние.

Весь процесс проходит так:

1. Сначала проверяем localStorage

Ext.each(this.getLocalStorageItem(me.cmpStateId), function (modelColumn) {
    if (modelColumn.dataIndex != null && modelColumn.dataIndex.indexOf('gridcolumn') < 0) {
        var result = searchColumn(initColumns, modelColumn);
        transformColumns.push(result[0]);
    }
});

2. В localStorage у нас находится общая модель состояния, которую мы хотим видеть при следующем отображении страницы. По dataIndex каждой модель-колонки в localStorage находим через функцию searchColumn соотсветствующую колонку, которая будет инициализироваться через ExtJS. И сохраняем эту колонки в новый массив, который потом будем инициализировать.

3. В функции searchColumn, происходит проверка, если у колонки есть подгруппа колонок, то уже выполняется функция deepSearchColumn, чтобы найти подколонку среди всех колонок.

4. После того, как у нас есть готовый массив колонок в правильном порядке присваиваем их me.columns.

5. И в конце устанавливаем сортировку:

me.setSort = function () {
    var gridSortState = this.getLocalStorageItem(this.cmpSortStateId);
    if (gridSortState.length)
        this.getStore().sort(gridSortState[0].property, gridSortState[0].direction);
};

Готово, теперь наш грид при перезагрузке страницы имеет такую же структуру, как и раньше.

Также дополнительно установим в конфиге приложения флаг, чтобы можно было включать/выключать возможность сохранения колонок: Omnis.Application.Config.keepingStateGrid.

Нет комментариев

Добавить комментарий