如何通过使用"reccount"隐藏和显示jqGrid中的自定义按钮. [英] How to hide and show custom buttons in jqGrid by using "reccount"

问题描述

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

I'm trying to implement a custom button on a jqGrid with hide and show functionalities. I basically want to show the button if the grid is empty otherwise show.

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

I have implemented it with the "reccount" method from jqGrid to test if the grid is empty. However i'm not sure if i'm doing it right.

在代码末尾是我声明的收款人的地方.请参见变量计数".

to the end of the code is where i declared the reccount. see "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"
        } 
    );
}

推荐答案

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

The problem with your code is that the grid is loaded asynchronously, which means your call to reccount can happen before the grid is populated, so it returns 0 even though the grid is filled with data a moment later.

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

One solution is to dynamically hide your button based on whether any data was populated by a server request. For example:

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

这篇关于如何通过使用"reccount"隐藏和显示jqGrid中的自定义按钮.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！