Как выровнять одну строку в верхней части в 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 
     } 
    }; 

В соответствии с просьбой, вот результат от данные.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":123, "Name":"Gil Agostini", "Score":94, "Rank":1 } 

вместо

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

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

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

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

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

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