如何使用“reccount”在 jqGrid 中隐藏和显示自定义按钮

Question

我正在尝试在具有隐藏和显示功能的 jqGrid 上实现自定义按钮。如果网格为空，我基本上想显示按钮，否则显示。

我已经使用 jqGrid 中的“reccount”方法实现了它，以测试网格是否为空。但是我不确定我是否做得对。

到代码的末尾是我声明记录的地方。请参阅“变量计数”。

提前致谢。

$("#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

您的代码的问题是网格是异步加载的，这意味着您对 reccount 的调用可能发生在填充网格之前，因此即使网格是稍后充满数据。

一种解决方案是根据服务器请求是否填充任何数据来动态隐藏您的按钮。例如：

$("#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();
      }
    },
    ...