목적 : refresh 기능을 추가했더니 가끔 끄고 싶을때가 있더라..
그래서 버튼으로 추가구현.
사용기술 : jquery , jqgrid 의 custom button
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
setTimeout http://www.w3schools.com/js/js_timing.asp
1. set global variable
var timeoutHnd
var LIST_ID = "#mylist";
var BTN_ID = "#reload";t
2. add refresh function
// listid : list div element id ex) #mylist
// btnid : button element id ex) #myrefreshbuttono
// timeoutHnd : global variable for timeout handler
// change : boolean . if you want change button text, icon then true.
function gridRefresh(listId, btnId,timeoutHnd,change){
if(timeoutHnd){
clearTimeout(timeoutHnd);
timeoutHnd = null;
}
var on = $(btnId).attr("title")=="start refresh";
if(change&&on || !change&&!on){
timeoutHnd = setTimeout(function () { $(listId).trigger('reloadGrid'); },10000);
}
if(change){
changeRefreshButton(btnId);
}
return timeoutHnd;
};
function changeRefreshButton(btnId){
if($(btnId).attr("title")=="stop refresh"){
$(btnId).attr("title","start refresh");
$(btnId).find(".ui-icon").removeClass("ui-icon-cancel").addClass("ui-icon-refresh");
}else{
$(btnId).attr("title","stop refresh");
$(btnId).find(".ui-icon").removeClass("ui-icon-refresh").addClass("ui-icon-cancel");
}
}
3. set timer
loadComplete: function(){
if( $( LIST_ID ).jqGrid("getGridParam", "records")>0){
timeoutHnd = gridRefresh(LIST_ID, BTN_ID ,timeoutHnd, false);
$( BTN_ID ).show();
}else{ // 0건이면 refresh 안하고 버튼 숨김.
if(timeoutHnd){
clearTimeout(timeoutHnd);
timeoutHnd = null;
}
$( BTN_ID ).hide();
}
},
3. add button to navigator
}).navGrid("#pager")
.navButtonAdd("#pager5",
{title:"stop refresh",
caption:"",
buttonicon:"ui-icon-cancel",
id:"reload" ,
onClickButton: function(){ gridRefresh(LIST_ID, BTN_ID ,timeoutHnd,true);}
} );