javascript - كيف يمكنني إخفاء jqgrid تمامًا عند عدم إرجاع أية بيانات؟




jquery plugins (8)

أواجه صعوبة في محاولة عرض jqGrid فقط عند إرجاع السجلات من خدمة الويب الخاصة بي. لا أريد أن ينهار ذلك إلى حيث ترى شريط التسمية فقط ، ولكن إذا كان هذا أفضل ما يمكنني فعله ، أفترض أنه يمكنني وضع رسالة ذات معنى في التسمية التوضيحية. لا يزال ، فما استقاموا لكم فاستقيموا بدلا من ذلك بكثير مجرد إخفاء الشبكة وإظهار كتلة الرسالة "لا توجد سجلات" div.

وأعتقد أيضا أنه إذا جاء أسوأ الأسوأ ، يمكن أن أفعل الحل في هذا السؤال كيفية عرض المعلومات في 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> 

شكرا لأي مساعدة يمكن أن تقدمها.


Answers

يكفي عدم تضمين خيار "التسمية التوضيحية" في تعريف الشبكة. اختبار مع الإصدار 5.0.1


فقط قليلا تويست على حل :

  1. يمكنك استخدام بدلاً من var recs = $ ('# list'). jqGrid ('getGridParam'، ' records ')؛

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

    jkGrid grid option " records " default value = 'None'

    jqGrid الخيار ' reccount ' خيار الشبكة إلى 0 وسيقوم دائماً بإرجاع رقم حتى عندما لا توجد سجلات (إرجاع 0)

    انظر ويكي: خيارات @ jqGrid ويكي

  2. إذا كنت لا تريد استخدام التفاف div يمكنك إخفاء jqGrid بالكامل باستخدام $('.ui-jqgrid').hide() أو $('.ui-jqgrid').show() .

    يتم استخدام الفئة ui-jqgrid للوالدين jqGrid فقط.


الناس ، لا حاجة لإنشاء 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');
    }
  }

أجد أن هذا:

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

هو إرجاع "نان". يتم تعيين الخاصية "سجلات" إلى قيمة خالية في حالة عدم وجود سجلات في الشبكة. لذلك لا يمكنك إرساله إلى رقم والتحقق من أنه يساوي صفرًا.


يلف 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');
        }
    }

أتمنى أن يساعدك هذا.


<!-- 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();
    }
}

لنفترض أن لديك علامة أدناه ستنشئ فيها jqgrid:

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

الآن في البرنامج النصي الخاص بك js في كود jqgrid يمكنك تعديل خيار loadcomplete على النحو التالي:

loadComplete: function () {

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

سيكون defination of noDataError كـ:

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

استخدم هذا..

$("#myform input[type='radio']:checked").val();




javascript jquery plugins jqgrid