我正在尝试使用隐藏和显示功能在jqGrid上实现自定义按钮。我基本上想要显示按钮,如果网格是空的,否则显示。
我已经使用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"
}
);
}
答案 0 :(得分:2)
代码的问题在于网格是异步加载的,这意味着在填充网格之前,您对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();
}
},
...