Как выровнять одну строку по вершине в JQGrid? - PullRequest
Новая
       32

Как выровнять одну строку по вершине в JQGrid?

0 голосов
/ 22 января 2011

JQGrid отлично подходит для отображения данных с помощью jQuery , но у него точно нет отличной документации.

У меня проблема с сеткой, когда сетка имеет только один элемент для отображения. По какой-то причине он выравнивает один ряд по низу, а не по верху.

Вот изображение единственного смещенного ряда :

A single misaligned row

Вот jqgrid options Я передаю: 

jQGridOptions = {
            "recordtext": '{0} - {1} of {2}',
            "url": 'data.json',
            'datatype': 'json',
            'mtype': 'GET',
            'colModel': [
                { 'name': 'Rank', 'align': 'center', 'index': 'Rank', 'sortable': false, 'search': false },
                { 'name': 'Name', 'index': 'Name', 'sortable': false, 'search': true },
                { 'name': 'Score', 'index': 'Score', 'sortable': false, 'search': false }
            ],
            'pager': '#ranking-pager',
            'rowNum': 10,
            'altRows': true,
            'scrollOffset': 0,
            'colNames': ["Rank", "Name", "Score"],
            'width': 696,
            'height': 'auto', // '100%',  // 300,
            'page': 1,
            'sortname': 'Rank',
            'sortorder': "asc",
            'hoverrows': true,
            'viewrecords': true,
            'gridComplete': function () {
                $('.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });

                if (selectedRank !== -1) {
                    selectRank(selectedRank);
                    selectedRank = -1;
                }
            },
            'jsonReader': {
               id : 'Rank',
               'repeatitems': false
        }
    };

По запросу, вот результат из data.json : 

{
    "page":1,
    "total":1,
    "records":1,
    "rows":  [{
                  "Name":"Gil Agostini",
                  "Score":94,
                  "Rank":1
             }]
}

Позвоните в jQGrid : 

$(document).ready(function () {
        $("#ranking-table").jqGrid(jQGridOptions);
});

Html 

 <div style="float: left;">
                <div class="hvy-border1">
                    <div class="hvy-border2">
                        <div class="hvy-top-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-top-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div id="table-and-pager" style="margin: 3px;">
                            <table id="ranking-table" class="scroll" cellpadding="0" cellspacing="0" style="height: 300px">
                            </table>
                            <div id="ranking-pager" class="scroll" style="text-align: center;">
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div class="hvy-bottom-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-bottom-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Может кто-нибудь подсказать мне, что я здесь делаю неправильно?

Как сделать так, чтобы ряд выравнивался по верху, а не по низу?

1 Ответ

1 голос
/ 22 января 2011

Я не могу воспроизвести проблему, которую вы описываете.Я полагаю, что вы используете некоторые дополнительные настройки для jqGrid: вы не публикуете весь код JavaScript вашего примера.

Тем не менее я могу однозначно сказать, что у вас есть некоторые проблемы в формате данных JSON, возвращаемых изсервер.Важно то, что каждая строка данных должна иметь уникальный идентификатор.Например, 

{ "id":123, "Name":"Gil Agostini", "Score":94, "Rank":1 }

вместо 

{ "Name":"Gil Agostini", "Score":94, "Rank":1 }

id может также иметь строковый тип и быть не только числовым.Более того, вы должны определить jsonReader параметр jqGrid, потому что ваши данные имеют именованные элементы вместо стандартного массива строк (который является более компактными и маленькими данными).В случае, если вам нужно хотя бы использовать jsonReader: {repeatitems: false}.

Если какой-либо другой столбец сетки (например, столбец Name) можно интерпретировать как идентификатор, вы можете включить key:true в определение соответствующего столбца.или используйте id:'Name' в качестве свойства jsonReader.

Например, следующие jsonReader

jsonReader: {
    repeatitems: false,
    id: 'Name'
}

могут использоваться для чтения текущих данных JSON (см. в реальном времени здесь ).Используя любой инструмент, который вы предпочитаете, вы можете проверить значение id элемента <tr> сетки.

...