Как отображать информацию в jqGrid, что нет данных?

Ответ 1

Я искал ответ на этот вопрос и придумал следующее решение, но я не говорю с сервером, поэтому мне нужно использовать что-то помимо события loadComplete. Я подключился к событию "gridComplete" и проверил, есть ли записи. Если нет, отобразите пустой текст, в противном случае скройте его.

jQuery('#test').jqGrid({
        ... // some settings
        gridComplete: loadCompleteFunction,
        emptyDataText:'There are no records. If you would like to add one, click the "Add New ..." button below.', // you can name this parameter whatever you want.
        ... // more settings

});

function LoadComplete()
{
    if ($('test').getGridParam('records') == 0) // are there any records?
        DisplayEmptyText(true);
    else
        DisplayEmptyText(false);
}

function DisplayEmptyText( display)
{
    var grid = $('#test');
    var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
    var container = grid.parents('.ui-jqgrid-view'); // find the grid container
    if (display) {
        container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below
        container.find('.ui-jqgrid-titlebar').after('' + emptyText + ''); // insert the empty data text
    }
    else {
        container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show(); // show the column headers
        container.find('#EmptyData' + dataObject).remove(); // remove the empty data text
    }
}

Ответ 2

Сложный бит позволяет отображать сообщение по всем столбцам. Я не думаю, что есть простой способ сделать это; вам придется, скажем, скрыть все столбцы, кроме первого, установить первую ширину столбца для заполнения сетки и поместить сообщение в первый столбец. Затем, когда вы перезагружаете, вам придется отменить все это. Он должен работать, но это вроде беспорядочно.

Однако, скажем, вы просто хотите поместить сообщение в первый столбец и оставить все остальное пустым. В принципе, вы реализуете функцию события loadloadplete и управляете содержимым сетки.

Добавьте свойство к вашему объекту сетки, например:

//Various other grid properties...
loadComplete: function() {
     if (jQuery("#grid_id").getGridParam("records")==0) {
          jQuery("#grid_id").addRowData(
                "blankRow", {"firstCol":"No data was found". "secondCol":"", "thirdCol":""
          );
     }
}

Где "#grid_id" - это идентификатор вашего контейнера сетки, "blankRow" - это произвольный идентификатор, который вы указали для новой строки, которую вы добавили, и "firstCol", "secondCol" и т.д. - это имена столбцов.

Ответ 3

• Установите "rows": [] для массива json

• Добавляйте свой контейнер ошибок к успеху как

  onLoadSuccess: function() {
      **var rows = $(this).datagrid("getRows");**
  if(rows.length == 0)
  {
  
    $("#errordiv").show();
    $(".datagrid-view").append('<div class="errordiv" id="errordiv">Ur Message</div>');
  }
  else
   $("#errordiv").hide();
  
  
   }
  

Ответ 4

$('#grid').jqGrid({
     loadComplete: function() {
            if ($("#grid").getGridParam("records")==0) {
                $("#grid").addRowData(
                $("#grid")
                    .empty()
                    .append('<tr class="yourClass"><td>No records to display</td></tr>')
                 );
            }
        }
});

Ответ 5

Поместите свое сообщение внутри div со стилем: hidden. Поместите это в свой пейджер.

В loadComplete событие сделайте что-то вроде:

if($('#results').getGridParam("records")==0) { 
 $("#noResultsDiv").show();   
}

Ответ 6

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

{"d":"{"page":"1","total":"0","records":"0","rows":[]}"}

Ответ 7

Я реализовал его следующим образом (хотя это зависит от того, что я использовал предоставленные функции пейджера). Все, что отображается, когда никакие записи не возвращаются, это панель Caption и одна панель Pager, отображающая "Нет записей для просмотра".

Фрагмент моего кода с установкой параметров jqGrid по умолчанию раньше (до того, как сетка даже загружена на мою страницу):

// jQuery jqGrid default options
$.extend($.jgrid.defaults, {
    pager: '#gridPager',
    emptyrecords: "No records to view", // Unnecessary (default in grid.locale-en.js)
    recordpos: 'left',
    recordtext: "Viewing {0} - {1} of {2}", // Overriding value in grid.locale-en.js
    viewrecords: true
});

Фрагмент моего кода при загрузке jqGrid:

$('#grid').jqGrid({
    loadComplete: function () {
        // Hide column headers and top pager if no records were returned
        if ($('#grid').getGridParam('records') === 0) {
            $('#grid_toppager').hide();  // I used top & bottom pagers, so I hid one
            $('.ui-jqgrid-htable').hide();
        }
    }
});

EDIT: вы также можете ссылаться на этот ответ Как скрыть jqgrid полностью, когда данные не вернулись? и выполните одну из двух задач:

1) Поместите свое сообщение в один div и сетку в другой. Скройте сетку и покажите сообщение.

2) Поместите свое сообщение в div непосредственно под сеткой. Следуйте моему подходу выше, но скройте все пейджеры (не только один). Покажите свой div в том же обработчике событий. Все, что вы должны увидеть, это панель Caption и ваше сообщение div.

Ответ 8

Я знаю, что этот вопрос немного стар, но для меня это отлично работает:

$('#tableid').jqGrid({
  ...
  datatype: dataLoad,
  ...
})

function dataLoad(postdata, sid) {
  var id = sid.replace('load_', '');
  var result = loadDataFromServer('/my/server/url', postdata);

  if (result) {
    if (result.records > 0) {
      var thegrid = $("#"+id)[0];
      thegrid.addJSONData(result);
    }
    else
      $("#"+id+" tbody")
       .empty()
       .append('<tr><td class="emptyDataMsg">This table is empty</td></tr>');
  }
}

В основном, я загружаю данные с сервера, проверяю, получаю ли я некоторые записи, и если не просто опустят все строки в таблице и добавят одну ширину только строку с моим пользовательским текстом. С некоторым CSS результат довольно опрятный:

.emptyDataMsg {
  background-color: #EEEEEE;
  border-bottom: 1px solid #CCCCCC;
  color: #666666;
  font-size: 1.2em;
  font-weight: bold;
  padding: 5px;
  text-align: center;
}