javascript - 如何在jqGrid中显示没有任何数据的信息？

Question

当 jqGrid 为空时，我想在网格内显示单个空行，并显示没有任何数据的信息消息。这怎么可能？谢谢

Answer 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'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
    }
}

Answer 2

棘手的一点是让消息显示在列中。我认为没有简单的方法可以做到这一点。例如，您必须隐藏除第一列之外的所有列，设置第一列的宽度以填充网格，然后将消息放在第一列中。然后，当您重新加载时，您必须撤消所有这些。它应该工作，但它有点混乱。

但是，假设您只想将消息放入第一列并将其余部分留空。基本上，您实现“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”是网格容器的 ID，“blankRow”是您为添加的新行指定的任意 ID，“firstCol”、“secondCol”等是列的名称.

Answer 3

1. 为 json 数组设置"rows":[]

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

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

我按如下方式实现它（尽管这确实取决于我使用提供的寻呼机功能这一事实）。没有返回记录时显示的只是标题栏和一个显示“没有要查看的记录”的寻呼栏。

早期设置 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();
        }
    }
});

编辑：您也可以参考这个答案How can I hide the jqgrid fully when no data returned? 并做以下两件事之一：

1) 将您的消息放在一个 div 中，将网格放在另一个中。隐藏网格并显示消息。

2) 将您的消息放在网格正下方的 div 中。按照我上面的方法，但隐藏所有寻呼机（不仅仅是一个）。在同一个事件处理程序中显示您的 div。您应该看到的只是标题栏和您的消息 div。

Answer 6

我找到了执行此操作并允许网格处理它的最佳方法是返回不带行的默认参数。例如，我使用的是 JSON 数据，所以这将是返回 JSON。

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

Answer 7

将您的消息放在一个带有 style: hidden 的 div 中。将它放在您的寻呼机 div 中。

在 loadComplete 事件中执行以下操作：

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

Answer 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;
}