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

Question

我已按照jqGrid with no data - how to set a more prominent 'no data' message? 此处给出的答案显示“未找到记录”消息。效果很好，但是我有以下问题，

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 1234567890123456789",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 1234567890123456789",
            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），并且“灰条”的问题也已修复。