在jqgrid:我想显示一个没有分页的空网格并显示一条消息"没有找到记录"如果没有记录

时间:2015-04-17 06:37:35

标签: grails jqgrid

我需要显示一个没有分页的空网格并显示一条消息“你没有找到记录”如果jqGrid.i中的空结果对这个jqgrid来说很新。

2 个答案:

答案 0 :(得分:0)

我添加了以下代码。请找到Oleg Demo1Demo2

$(function () {
            var $grid = $("#oversight-sample"),
                //mydata = [{actions: "a", url: "http://stackoverflow.com/q/24609566/315935", created: "7/7/2014"}];
                mydata = [];
                emptyMsgDiv = $("<div><span style='color:red;font-size:24px'>You have no records found</span></div>");

            $grid.jqGrid({
                //autowidth: true,
                caption: "Evaluated URLs",
                colNames: ["Actions", "URL", "Fetch Date"],
                colModel: [
                    { name: "actions", align: "center", title: false, width: 60, resizable: false, sortable: false },
                    { name: "url", width: 400 },
                    { name: "created", align: "center", width: 125, sorttype: "date" }
                ],
                data: mydata,
                datatype: "local",
                emptyrecords: "0 records found",
                localReader: {
                    page: function (obj) {
                        return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
                    }
                },
                loadComplete: function () {
                    var ts = this;
                    if (ts.p.reccount === 0) {
                        $(this).hide();
                        emptyMsgDiv.show();
                    } else {
                        $(this).show();
                        emptyMsgDiv.hide();
                    }
                },
                height: "auto",
                sortname: "created",
                toppager: true,
                pager: "#url-pager",
                viewrecords: true
            });
            // place div with empty message insde of bdiv
            emptyMsgDiv.insertAfter($grid.parent());
        });



<table id="oversight-sample"><tbody><tr><td></td></tr></tbody></table>
    <div id="url-pager"></div>

答案 1 :(得分:0)

以下是fiddler的链接,其中包含“未找到记录”消息。我希望它能让您了解如何创建基本的jqgrid以及需要哪些库引用。 https://jsfiddle.net/99x50s2s/2/

<table id="sg1"></table>
<div id="psg1"></div>

jQuery("#sg1").jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    emptyrecords: 'No records found',
    pager: '#psg1',  
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:80},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, 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 = [];//pass empty data

for(var i=0;i<=mydata.length;i++)
    jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);