如何在jqGrid中隐藏和显示自定义按钮通过使用"reccount”;

How to hide and show custom buttons in jqGrid by using "reccount"

本文关键字:quot reccount 按钮 jqGrid 隐藏 自定义 显示      更新时间:2023-09-26

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

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

代码末尾是我声明reccount的地方。请参阅"var计数"。

提前谢谢。

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

代码的问题是网格是异步加载的,这意味着在填充网格之前,对reccount的调用可能会发生,因此即使稍后网格填充了数据,它也会返回0

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

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