Dojo DataGrid Виртуальная прокрутка How-To? - PullRequest
Новая
       36

Dojo DataGrid Виртуальная прокрутка How-To?

0 голосов
/ 13 марта 2012

Я довольно долго копался в этом. Я использую dojox.grid.datagrid, и у меня есть вызов ajax, который возвращает 200-300 строк.

Сетка прекрасно отображает и прокручивает в Chrome, но прокрутка в IE 7 и 8 мучительно медленная. Я хотел бы использовать виртуальную прокрутку, чтобы попытаться устранить проблему, но не могу найти пример кода.

Вот как выглядит мой код в настоящее время. 

function setupAvailableScenes(location) {
var avaiableScenesGridPane = dijit.byId("AvaiableScenesGridPane");
var availableScenesGrid = dijit.byId("AvailableScenesGrid");
if (_isFirstLoad) {

    availableScenesGrid = new dojox.grid.DataGrid({
        id: 'AvailableScenesGrid',
        store: availableScenesStore,
        query: { Id: "*" },
        sortInfo: "1",
        rowsPerPage: 20,
        autoHeight:20,
        style: "width:315px",
        structure: [
                { name: "Available Scenes", field: "Name", width: "85%" },
                {   name: " ",
                    field: "_item",
                    rowsPerPage: "25",
                    type: dojox.grid.cells._Widget,
                    editable: false,
                    width: "15%",
                    formatter: function (scene) {
                        return new dijit.form.Button(
                        {
                            label: "+",
                            onClick: function () {
                                AddSceneToSelectedScenes(scene);
                            }
                        })
                    }
                }
            ]
    });

    avaiableScenesGridPane.set('content', availableScenesGrid);
}

var availableScenesStore = new dojo.data.ItemFileWriteStore({
    url: _applicationPath + "/Location/" + location.Id + "/Scene.json",
    preventUrlCache: true
});

availableScenesGrid.setStore(availableScenesStore);

}

Ответы [ 2 ]

2 голосов
/ 13 марта 2012

Часто одна из самых важных вещей, которую вы можете сделать для улучшения производительности DataGrid, - это выбросить ItemFileReadStore / WriteStore и использовать оптимизированное хранилище данных (лично мне нравится QueryReadStore).Это означало бы, что для обработки виртуальной прокрутки / нумерации страниц необходим какой-нибудь сервлет-сервер (PHP / JSP / etc), но я видел значительные улучшения производительности по сравнению с использованием хранилища, поддерживаемого файлом JSON.

Некоторые другие вещи, которые следует учитывать, которые могут или не могут помочь:

  • дайте имя вашей анонимной функции форматирования и попробуйте прокрутить таблицу с включенными профилями Chrome или Firebug, чтобы увидеть, не перегружает ли онамного циклов (или, как сказал Виджай Агравал, вы можете попробовать заменить dijit.form.Button на ванильный тег html <button>)
  • , вам не нужно указывать тип dojox.grid.cells._Widget дляэта клетка;наличие собственного средства форматирования, возвращающего действительный Dijit, должно быть достаточно для правильной работы Grid.
1 голос
/ 13 марта 2012

Поскольку вы указали rowPerPage = 25, он уже выполняет виртуальную прокрутку (он вытягивает новый набор строк только тогда, когда пользователь выполняет прокрутку вниз)

Поскольку вы упоминаете, что прокрутка очень медленная, кажется, что проблема с производительностьювокруг рендеринга новых строк - вы можете попробовать пару вещей для повышения производительности: 1) удалить атрибут autoHeight.Вместо этого, укажите фиксированную высоту в атрибуте стиля 2) в функции форматера, вместо того, чтобы возвращать ди-джит, попробуйте вернуть простую HTML-кнопку / якорь, стилизованный как кнопка, поэтому удалите атрибут type: dojox.grid.cells._Widget и вфункция форматирования возвращает HTML, который вы хотите использовать

...