显示和删除“找不到记录”消息在jqgrid 4.6.0 [英] Show and remove "No Record Found" message in jqgrid 4.6.0
问题描述
我已遵循此处给出的答案
这里是提琴手： https://jsfiddle.net/99x50s2s/148/
HTML：
< table id =sg1>< / table>
< div id =psg1>< / div>
< / br>
< button type =buttonid =PopulateDataBtn>填充数据< / button>
< button type =buttonid =RemoveDataBtn>删除数据< / button>
CSS
.alert-info-grid {background-color：＃ffffe5; color：black; font-size：14px; font-weight：600; padding：4px; text-align：center;}
JS
$ b
$（＃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：{0} ，
rowList：[]，
sortorder：desc，
scrollrows：true，
loadui：'disable'，
colNames： 'date'，'Client'，'Amount'，'Tax'，'Total'，'Notes']，
colModel：[
{name：'id'，index：'id' ：90，sorttype：int}，
{name：'invdate'，index：'invdate'，width：190，sorttype：date}，
{name：'name' ：'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：测试网格
}）;
var mydata = [
{id：1，invdate：2007-10-01，name：test 1234567890123456789，note：note，amount： ，税：10.00，总计：210.00}，
{id：2，invdate：2007-10-02，name：test2 300.00，tax：20.00，total：320.00}
];
$（< div class ='alert-info-grid'>找不到记录< / 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'>找不到记录< / div>）。insertAfter（gridObj.parent ）;
}）;
注意：我使用jqgrid 4.6.0
您的问题的主要原因：您以错误的方式填充网格的数据 datatype：local 。您使用 addRowData ，这是我知道的最糟糕的方式。
我将您的演示修改为以下： a href =https://jsfiddle.net/OlegKi/99x50s2s/150/ =nofollow> https://jsfiddle.net/OlegKi/99x50s2s/150/ 现在可以正常工作。
更改代码的主要部分如下：
$ ＃sg1）。jqGrid（{
datatype：local，
...
localReader：{
page：function（obj）{
return .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）。
} 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： 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到最新版本的免费jqGrid（版本4.10.0）支持Bootstrap css和灰色条的问题也是固定的。
I have followed the answer given here jqGrid with no data - how to set a more prominent 'no data' message? to display a "No Record Found" Message. It works great but, I have the following questions,
a) How to remove the custom "No Record Found" message while populating data in the grid.
b) How to remove the gray bar (please see the snapshot below) that appears on IE9 when the grid is empty.
Here is the fiddler: 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());
});
Note: I am using jqgrid 4.6.0
The main reason of your problem: you fill the data of the grid having datatype: "local" in a wrong way. You use addRowData, which is the worst way which I know.
I modified your demo to the following: https://jsfiddle.net/OlegKi/99x50s2s/150/ which works now correctly.
The main part of the changes code is below:
$("#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"), []);
});
The demo still have minor problems (like the right border of the grid and some other). To fix the problem you can upgrade jqGrid 4.6 to the latest version of free jqGrid (version 4.10.0) which support Bootstrap css and the problem with "the gray bar" is fixed too.
这篇关于显示和删除“找不到记录”消息在jqgrid 4.6.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
