Подтвердить что ты не робот

Как я могу полностью скрыть jqgrid, когда данные не вернулись?

У меня чертовски время, пытаясь отобразить только мой jqGrid, когда записи возвращаются из моего веб-сервиса. Я не хочу, чтобы он был свернут туда, где вы видите только заголовок, но если это самое лучшее, что я могу сделать, я полагаю, что я мог бы поместить в заголовок содержательное сообщение. Тем не менее, я бы скорее просто спрятать сетку и показать блок сообщений "Нет записей".

Я также предполагаю, что если худшее пришло в худшее, я мог бы сделать решение по этому вопросу Как отобразить информацию в jqGrid о том, что данных нет? (ссылка как альтернативное возможное решение для других).

Я попытался сделать .hide() внутри как функции, используемой при загрузке данных из функции, так и из события GRIDCOMPLETE, и не завершил скрытие сетки. Я новичок в JQuery, не говоря уже о совершенно новом для использования jqGrid.

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'Service/JQGridTest.asmx/AssetSearchXml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid',
        gridComplete: function() {
            var recs = $("#list").getGridParam("records");
            if (recs == 0) {
                $("#list").hide();
            }
            else {
                alert('records > 0');
            }
        }
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div> 

И попробовал это тоже:

$(document).ready(function() {
    $("#list").jqGrid({
        datatype: function(postdata) {
            jQuery.ajax({
                url: 'Service/JQGridTest.asmx/AssetSearchXml',
                data: postdata,
                dataType: "xml",
                complete: function(xmldata, stat) {
                    if (stat == "success") {
                        var thegrid = $("#list")[0];
                        thegrid.addXmlData(xmldata.responseXML);
                        var recs = $("#list").getGridParam("records");

                        if (recs == 0) {
                            $("#list").hide();
                            alert('No rows - grid hidden');
                        }
                        else {
                            alert(recs);
                        }
                    }
                    else {
                        alert('FAIL');
                    }
                }
            });
        },
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid'
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div> 

Спасибо за любую помощь, которую вы можете предоставить.

4b9b3361

Ответ 1

jqGrid обертывает вашу таблицу специальным соусом и divs, чтобы вы могли делать то, что хотите, обертывая эту таблицу своим собственным div, который вы можете скрыть:

 <div id="gridWrapper">
    <table id="list" class="scroll"></table> 
 </div>

Затем в вашем gridComplete:

   gridComplete: function() {
        var recs = parseInt($("#list").getGridParam("records"),10);
        if (isNaN(recs) || recs == 0) {
            $("#gridWrapper").hide();
        }
        else {
            $('#gridWrapper').show();
            alert('records > 0');
        }
    }

Надеюсь, что это поможет.

Ответ 2

немного подкрутите решение seth:

  • вы можете использовать вместо var recs = $('# list'). jqGrid ('getGridParam', 'records');

    var recs = $('#list').jqGrid('getGridParam','reccount');

    Значение сетки jqGrid "записи" по умолчанию = "Нет"

    Параметр сетки jqGrid " reccount" по умолчанию равен 0 и всегда будет возвращать число, даже если нет записей (возвращает 0)

    см. wiki: options @jqGrid Wiki

  • Если вы не хотите использовать обертку div, вы можете скрыть весь jqGrid, используя $('.ui-jqgrid').hide() или $('.ui-jqgrid').show().

    Класс ui-jqgrid используется только для родителя jqGrid.

Ответ 3

Я нахожу это:

parseInt($("#grid").getGridParam("records"),10);

возвращает "NaN". Свойство "records" имеет значение null, если в сетке нет записей. Таким образом, вы не можете наложить его на число и проверить, равна ли оно нулю.

Ответ 4

<!-- table for Pagination START -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <div id="pager" class="scroll" style="text-align: right;" />
        </td>
    </tr>
</table> 
<!-- table for Pagination END -->
<table id="tblCompany" class="scroll" width="100%" cellpadding="0" cellspacing="0">
</table>
<div id="NoRecord" class="NoRecord">
    <%: CommonText.NoRecords %>
</div>

JqGrid Нет проверки записей

gridComplete: function () {
    var recs = $("#").getGridParam("records");
    if (recs == 0 || recs == null) {
        $(tableContacts).setGridHeight(100);
        $("#NoRecordContact").show();
    }
}

Ответ 5

Попробуйте использовать этот метод, чтобы скрыть jqGrid:

$("#someGridTableName").jqGrid("GridUnload");

Обязательно включите:
Файл jquery.jqGrid-x.x.x/src/grid.custom.js.

См. этот пост, в котором больше говорится об этом методе. Или jqGrid wiki, где говорится об этом методе в разделе Add on Grid Methods.

Еще один момент для рассмотрения:
Избегайте использования обертки (см. post) <div> теги на jqGrid, чтобы скрыть его, потому что атрибут overflow: auto; не работает, если вы попытаетесь сделать столбцы сетки более широкими и превысить ширину обёртки.
Другими словами, jqGrid уже оснащен логикой для создания горизонтальной полосы прокрутки без помощи внешних div.

Примечание: Протестировано на IE8 и 9

Ответ 6

Предположим, что у вас есть тег ниже, в котором вы будете создавать jqgrid:

<div id=jqgridcontent>
<table id="jqgridtab"></table>
</div>

Теперь в js script в коде jqgrid вы можете изменить параметр loadcomplete как:

loadComplete: function () {

if(jQuery("#jqgridtab").getDataIDs().length==0){
            noDataError();
        }
    }

Обозначение noDataError будет следующим:

function noDataError(){
       document.getElementById("jqgridcontent").style.visibility="hidden";
       document.getElementById("jqgridcontent").style.display="none"; 
}

Ответ 7

Достаточно не включать опцию "подпись" в определении сетки. Протестировано с версией 5.0.1

Ответ 8

Люди, не нужно создавать divs или использовать CSS. Он доступен с помощью setGridState:

gridComplete: function ()
  {
    var recs = $('#myGrid').jqGrid('getGridParam', 'reccount');

    if (isNaN(recs) || recs == 0)
    {
      $("#myGrid").jqGrid('setGridState', 'hidden');
    }
    else
    {
      $("#myGrid").jqGrid('setGridState', 'visible');
    }
  }