如何在 JQGrid 中将单行对齐到顶部？

Question

JQGrid 非常适合用 jQuery 显示数据，但它并没有很好的文档。

当网格只有一个要显示的元素时，我遇到了网格问题。出于某种原因，它将单行对齐到底部而不是顶部。

这是一张未对齐的单行的图片：

这是我传入的 jqgrid 选项：

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>

谁能告诉我我在这里做错了什么？

如何让行对齐顶部而不是底部？

Answer 1

我无法重现您描述的问题。我想你为 jqGrid 使用了一些额外的设置：你没有发布你的示例的整个 JavaScript 代码。

不过，我可以肯定地说，您在从服务器返回的 JSON 数据的格式方面存在一些问题。重要的是每一行数据都必须有一个唯一的 id。例如

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

而不是

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

id 也可以是字符串类型，而不仅仅是数字。此外，您必须定义 jqGrid 的 jsonReader 参数，因为您的数据具有命名元素而不是标准的字符串数组（更紧凑和小数据）。在这种情况下，您至少应该使用jsonReader: {repeatitems: false}。

如果某些其他网格列（如 Name 列）可以解释为 id，您可以在相应的列定义中包含 key:true 或使用 id:'Name' 作为 jsonReader 的属性。

例如下面的jsonReader

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

可用于读取您当前的 JSON 数据（见直播here）。使用您喜欢的任何工具，您可以验证网格的<tr> 元素的id 值。