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

10

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

Ваш Ответ

8   ответов
2
Set "rows":[] for json array

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


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

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

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

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

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

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

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

{"d":"{"page":"1","total":"0","records":"0","rows":[]}"}
Пробовал это и, кажется, не имеет никакого результата. Есть какие-то скрытые трюки
1

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

Однако предположим, что вы просто хотите поместить сообщение в первый столбец, а остальные оставить пустыми. По сути, вы реализуете «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":""
          );
     }
}

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

0

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

Фрагмент моего кода от ранней настройки параметров по умолчанию в 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) Поместите ваше сообщение в один div, а сетку в другой. Скрыть сетку и показать сообщение.

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

9

но я не разговариваю с сервером, поэтому мне нужно использовать что-то кроме «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'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
    }
}

+1 Это действительно полезно. Также можно сослаться наthis demo by Oleg заmy question, Прочитайте раздел комментариев, чтобы получить важные вещи

Похожие вопросы