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

Question

Когда jqGrid пуст, я хочу отобразить одну пустую строку внутри сетки с информационным сообщением об отсутствии данных. Как это возможно? Спасибо

Answer 1

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

</p> <pre> 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's 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 } } </pre> <p>

Answer 2

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

Answer 3

1. Набор "строк": [] для массива json

2. Добавьте ваш контейнер ошибок при успехе как

   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();
   
   
    }
   

Answer 4

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

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

Добавьте свойство к вашему объекту сетки следующим образом:

//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" и т. Д. - имена колонн.

Answer 5

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

$('#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;
}

Answer 6

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

Фрагмент моего кода от ранней настройки параметров по умолчанию в 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();
        }
    }
});

РЕДАКТИРОВАТЬ: Вы также можете сослаться на этот ответ Как полностью скрыть jqgrid, когда данные не возвращены? и выполнить одно из двух:

1) Поместите ваше сообщение в один блок, а сетку - в другой. Скрыть сетку и показать сообщение.

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

Answer 7

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

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

Answer 8

Поместите ваше сообщение в div со стилем: скрытый. Поместите это в ваш пейджер div.

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

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