在jqgrid 4.6.0中显示并删除“​​No Record Found”消息

Question

我已按照此处给出的答案jqGrid with no data - how to set a more prominent 'no data' message?显示“No Record Found”消息。它工作的很好，但是，我有以下问题：

a）如何在网格中填充数据时删除自定义的“未找到记录”消息。

b）如何删除当网格为空时IE9上出现的灰色条（请参见下面的快照）。

这里是小提琴手：https://jsfiddle.net/99x50s2s/148/

HTML：

<table id="sg1"></table> 
<div id="psg1"></div> 
</br> 
<button type="button" id="PopulateDataBtn">Populate Data</button> 
<button type="button" id="RemoveDataBtn">Remove Data</button> 

CSS

.alert-info-grid{background-color:#ffffe5;color:black; font-size:14px; font-weight:600; padding:4px; text-align:center;} 

JS

$("#sg1").jqGrid({ 
    datatype: "local", 
    cmTemplate: { sortable: !0, resizable: !0 }, 
    gridview: true, 
    loadonce: true, 
    shrinkToFit: false, 
    autoencode: true, 
    width:500, 
    height: 'auto', 
    viewrecords: true, 
    pgbuttons: true, 
    pager: "#psg1", 
    pgtext: "Page {0} of {1}", 
    rowList: [], 
    sortorder: "desc", 
    scrollrows: true, 
    loadui: 'disable', 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:90, sorttype:"int"}, 
     {name:'invdate',index:'invdate', width:190, sorttype:"date"}, 
     {name:'name',index:'name', width:180}, 
     {name:'amount',index:'amount', width:180, align:"right",sorttype:"float"}, 
     {name:'tax',index:'tax', width:180, align:"right",sorttype:"float"},   
     {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ], 
    caption: "Test Grid" 
}); 

var mydata = [ 
     {id:"1",invdate:"2007-10-01",name:"test 123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"} 
     ]; 

$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter($("#sg1").parent()); 

$('#PopulateDataBtn').on('click', function(){ 

    var gridObj = $("#sg1"); 

    gridObj.clearGridData(); 

    for(var i=0;i<=mydata.length;i++) 
     gridObj.jqGrid('addRowData',i+1,mydata[i]); 
}); 

$('#RemoveDataBtn').on('click', function(){ 
    var gridObj = $("#sg1"); 

    gridObj.clearGridData();  

$("<div class='alert-info-grid'>No Record(s) Found</div>").insertAfter(gridObj.parent());   
}); 

注：我使用的jqGrid 4.6.0

Answer 1

你的问题的主要原因是：你填写一个错误的方式有datatype: "local"网格的数据。您使用addRowData，这是我知道的最糟糕的方式。

我将您的演示修改为以下内容：https://jsfiddle.net/OlegKi/99x50s2s/150/现在可以正常工作。

的变化代码的主要部分是如下：

$("#sg1").jqGrid({ 
    datatype: "local", 
    ... 
    localReader: { 
     page: function (obj) { 
      return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page; 
     } 
    }, 
    onInitGrid: function() { 
     $("<div class='alert-info-grid'>No Record(s) Found</div>") 
      .insertAfter($(this).parent()); 
    }, 
    loadComplete: function() { 
     var $this = $(this), p = $this.jqGrid("getGridParam"); 
     if (p.reccount === 0) { 
      $this.hide(); 
      $this.parent().siblings(".alert-info-grid").show(); 
     } else { 
      $this.show(); 
      $this.parent().siblings(".alert-info-grid").hide(); 
     } 
    }, 
    caption: "Test Grid" 
}); 

var mydata = [ 
     {id:"1", invdate:"2007-10-01", name:"test 123456789", 
      note:"note", amount:"200.00", tax:"10.00", total:"210.00"}, 
     {id:"2", invdate:"2007-10-02", name:"test2", 
      note:"note2",amount:"300.00", tax:"20.00", total:"320.00"} 
    ]; 

function setGridDataAndReload ($grid, data) { 
    var p = $grid.jqGrid("getGridParam"); 
    p.data = data; 
    $grid.trigger("reloadGrid", [{page: 1}]); 
} 

$('#PopulateDataBtn').on('click', function(){ 
    setGridDataAndReload($("#sg1"), mydata); 
}); 

$('#RemoveDataBtn').on('click', function(){ 
    setGridDataAndReload($("#sg1"), []); 
}); 

演示还是有一些小问题（如网格的右边框和其他一些）。要解决这个问题，可以将jqGrid 4.6升级到支持Bootstrap css的免费jqGrid（版本4.10.0）的最新版本，并且“灰色条”的问题也已修复。