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

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

最棘手的一点是让消息分散显示在各个栏目中。我不认为有一个简单的方法可以做到这一点；您必须隐藏除第一列以外的所有列，设置第一列的宽度以填充网格，并将消息放入第一列。然后，当你重新加载时，你必须撤销所有这些。应该可以，但有点乱

但是，假设您只想将消息放在第一列中，其余的则为空。基本上，您可以实现“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”等是列的名称。

将消息放在一个div中，样式为：hidden。把这个放在你的寻呼机分区内

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

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

---

我一直在寻找这个问题的答案，并提出了以下解决方案，但我不是在和服务器说话，所以我必须使用除“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
    }
}
jQuery（'#test'）.jqGrid({
…//一些设置
gridComplete:loadCompleteFunction，
emptyDataText:'没有记录。如果要添加记录，请单击下面的“添加新…”按钮。'，//您可以随意命名此参数。
…//更多设置
});
函数LoadComplete（）
{
if（$（'test'）.getGridParam（'records'）==0）//是否有任何记录？
DisplayEmptyText（真）；
其他的
DisplayEmptyText（假）；
}
函数DisplayEmptyText（显示）
{
变量网格=$（“#测试”）；
var emptyText=grid.getGridParam（'emptyDataText'）；//获取空文本
var container=grid.parents（'.ui jqgrid view'）；//查找网格的容器
如果（显示）{
container.find（'.ui jqgrid hdiv，.ui jqgrid bdiv'）.hide（）；//隐藏列标题和下面的单元格
container.find（'.ui jqgrid titlebar'）。在（''+emptyText+''）之后；//插入空数据文本
}
否则{
container.find（'.ui jqgrid hdiv，.ui jqgrid bdiv'）.show（）；//显示列标题
container.find（'#EmptyData'+dataObject）.remove（）；//删除空数据文本
}
}

我发现最好的方法是不带行返回默认参数，并允许网格处理它。例如，我使用的是JSON数据，因此这将是返回的JSON

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

---

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

我早期设置jqGrid默认选项的代码片段（甚至在网格加载到我的页面之前）：

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

编辑：您也可以参考此答案并执行以下两项操作之一：

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

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

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


 }

onload成功：函数（）{
**var rows=$（this.datagrid（“getRows”）**
如果（rows.length==0）
{
$（“#errordiv”）.show（）；
$（“.datagrid视图”）.append（'Ur Message'）；
}
其他的
$（“#errordiv”）.hide（）；
}

---

我知道这个问题有点老了，但对我来说这很好：

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

$（“#网格”）.jqGrid({
loadComplete:function（）{
if（$（“#网格”）.getGridParam（“记录”）==0）{
$（“#网格”）.addRowData(
$（“网格”）
.empty（）
.append（'没有要显示的记录'）
);
}
}
});

尝试了此操作，但似乎没有任何结果。有什么隐藏的把戏吗？+1这真的很有用。也有人可以参考。阅读评论部分，了解重要内容

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

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

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