"reccount"を使用してjqGridでカスタムボタンを非表示にする方法

Question

jqGridにhideボタンとshow機能を持つカスタムボタンを実装しようとしています。私は基本的に、グリッドが空の場合はボタンを表示し、それ以外の場合は表示します。

グリッドが空であるかどうかをテストするjqGridの "reccount"メソッドで実装しました。しかし、私はそれを正しくやっているかどうかはわかりません。

コードの最後には、reccountが宣言されています。 「var count」を参照してください。

ありがとうございます。

$("#sessioninfoGrid"+row_id).jqGrid({ 
    url:'/starburst/sessioninfoes/jsonlistbylectureoutline/'+row_id, 
    datatype: "json", 
    colNames: ['Session No.','Date','Start Time','End Time','Duration/Hours','Session Type','Topic','Room'], 
    colModel: [ 
     {name:'sessionNumber',index:'SessionNumber', width:40, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'}, 
     {name:'sessionDate',index:'sessionDate', width:100, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text',    
      editoptions: { 
       dataInit: function(element) { 
        $(element).datepicker({dateFormat: 'DD, MM dd, yy'}) 
       } 
      } 
     }, 
     {name:'starttime',index:'starttime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text' 

     }, 
     {name:'endtime',index:'endtime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text' 

     }, 
     {name:'durationPerSession',index:'durationPerSession', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text' 
     }, 
     {name:'sessionType',index:'sessionType', width:50, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select', 
      editoptions:{value:{}} 
     }, 
     {name:'topic',index:'topic', width:200, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'text', 
      editoptions: { 
       dataInit: function(element) { 
        $(element).width(300) 
       } 
      } 
     }, 
     {name:'room',index:'room', width:35} 
    ], 
    rowNum:10, 
    autowidth: true, 
    pager: sessioninfoPager_id, 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    editurl: '<c:url value="/sessioninfoes/update"/>', 
    caption:"Session Info", 
    emptyrecords: "Empty Records"       

}); 
$("#sessioninfoGrid"+row_id).jqGrid('navGrid',"#"+sessioninfoPager_id,{edit:false,add:false,del:false,search:true},{ },{ },{ }, 
{ 
    sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], 
    closeOnEscape: true, 
    multipleSearch: true, 
    closeAfterSearch: true 
} 
); 
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id, 
{ 
    caption:"Add", 
    buttonicon:"ui-icon-plus", 
    onClickButton: addSessionInfoRow, 
    position: "last", 
    title:"Add New Session Info", 
    cursor: "pointer" 
} 
); 

$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id, 
{ 
    caption:"Edit", 
    buttonicon:"ui-icon-pencil", 
    onClickButton: editSessionInfoRow, 
    position: "last", 
    title:"Edit Session Info", 
    cursor: "pointer" 
} 
); 

var count= $("#sessioninfoGrid"+row_id).jqGrid('getGridParam','reccount'); 
if (count == 0){ 
    $("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id, 
     { 
      caption:"Load Sessions", 
      buttonicon:"ui-icon-plusthick", 
      onClickButton: function(){         
       $.post('<c:url value="/sessioninfoes/autocreate/"/>'+row_id,function(data){ 
        $("#sessioninfoGrid"+row_id).trigger("reloadGrid"); 
       });         
      }, 
      position: "last", 
      title:"Load Session Infos", 
      cursor: "pointer" 
     } 
    ); 
} 

Answer 1

あなたのコードの問題点は、グリッドがデータの瞬間で満たされている0ていても返すので、グリッドが、移入されreccountへのお電話はグリッド前が起こることができることを意味、非同期的にロードされることです後で。

解決策の1つは、サーバー要求によってデータが入力されたかどうかに基づいてボタンを動的に非表示にすることです。例：

$("#sessioninfoGrid"+row_id).jqGrid({ 
    ... 
    loadComplete: function() { 
     var count = jQuery("#sessioninfoGrid"+row_id) 
         .jqGrid('getGridParam','reccount'); 
     if (count === 0){ 
      jQuery('button[title="Load Session Infos"]').hide(); 
     } else { 
      jQuery('button[title="Load Session Infos"]').show(); 
     } 
    }, 
    ...