jQuery Grid Plugin - jqGrid

Here is the complete source:

function unformat(cellvalue, options, cellobject)

{

}

function torrentReq(value, options, rowObject)

{

var requestName = (!rowObject[2]) ? rowObject['requestname'] : rowObject[2];

var requestID = (!rowObject[1]) ? rowObject['request_id'] : rowObject[1];

var reqLink = (requestName) ? '<br><span id="request-link-'+requestID+'" class="ui-request-link">'+requestName+'</span>' : '';

return '<span>'+value+'</span>'+reqLink;

}

var torrentGrid = $("#tab-content-torrents").jqGrid({

url:'./json?{{G:AJAX_DATAS_TABLE}}',

datatype: "json",

mtype:'POST',

loadonce: true,

colNames:['id','rid', 'rname','catname','firstcom','ttlhave','',

'<span>{{Lng:Torrent}}</span>','<span>{{Lng:Added}}</span>','<span>{{Lng:Size}}</span>',

'<span>{{Lng:TTLends}}</span>','<span>{{Lng:TTL}}</span>',

'<div class="ui-icon ui-icon-comment" style="float:left;"></div>',

'<div class="ui-icon ui-icon-circle-check" style="float:left;"></div>',

'<div class="ui-icon ui-icon-check" style="float:left;"></div>',

'<div class="ui-icon ui-icon-arrowreturnthick-1-n" style="float:left;"></div>',

'<div class="ui-icon ui-icon-arrowreturnthick-1-s" style="float:left;"></div>',

'<span>{{Lng:TVS}}</span>'],

colModel:[

{name:'id',index:'id',align:'right',width:55,fixed:true,search:false,sorttype:"int",},

{name:'request_id',index:'request_id', width:40,fixed:true,sorttype:"int",hidden:true,},

{name:'requestname',index:'requestname', width:100,fixed:true,hidden:true,},

{name:'categoryname',index:'categoryname', width:80,fixed:true,},

{name:'first_new_comment',index:'first_new_comment', width:50,fixed:true,sorttype:"int",},

{name:'ttl_have',index:'ttl_have', width:50,fixed:true,},

{name:'specialcategory',index:'specialcategory', width:50,fixed:true,search:false},

{name:'torrentname',index:'torrentname', width:550,fixed:true,

formatter:torrentReq,

unformat:unformat,},

{name:'added',index:'added',align:'center',width:200,fixed:true,

searchoptions:{

dataInit:function(el)

{

$(el).datepicker({dateFormat:'yy-mm-dd',

changeMonth: true,

changeYear: true

});

},

dataEvents: [{type: 'change',

fn: function(e)

{

torrentGrid[0].triggerToolbar();

}

}]

},

formatter:"date",

formatoptions:{srcformat:"Y-m-d H:i:s",newformat:"{{U:DatetimeFormat}}"},

unformat:unformat,

},

{name:'size',index:'size', width:100,fixed:true,align:'right',sorttype:"int",search:false,

formatter:readableBytes,

formatoptions:{},

unformat:unformat,

},

{name:'ttl_ends',index:'ttl_ends',align:'center', width:200,fixed:true,

formatter:"date",

formatoptions:{srcformat:"Y-m-d H:i:s",newformat:"{{U:DatetimeFormat}}"},

unformat:unformat,},

{name:'ttl_diff',index:'ttl_diff',align:'center', width:100,fixed:true,sorttype:"int",},

{name:'comments',index:'comments',align:'center', width:45,fixed:true,sorttype:"int",},

{name:'snatched',index:'snatched',align:'center', width:45,fixed:true,sorttype:"int",},

{name:'downloaded',index:'downloaded',align:'center', width:45,fixed:true,sorttype:"int",},

{name:'seeders',index:'seeders',align:'center', width:45,fixed:true,sorttype:"int",},

{name:'leechers',index:'leechers',align:'center', width:45,fixed:true,sorttype:"int",},

{name:'TVS',index:'TVS',align:'center', width:45,fixed:true,}

],

ignoreCase:true,

width: ((window_width > $.minimal_window_width) ? window_width-108 : $.minimal_window_width-108),

height: window_height-311,

shrinkToFit: true,

sortorder: 'desc',

rowNum:100,

rowList:[20,50,100,200,500,1000],

pager: '#tab-content-torrents-pager',

viewrecords: true,

rownumbers: true,

caption:"JSON Example",

ExpandColClick: false,

loadError : function(xhr,st,err) {

$("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

},

loadComplete: function(data) {

if($("#tab-content-torrents").jqGrid('getGridParam','datatype') === "json")

{

setTimeout(function(){

$("#tab-content-torrents").trigger("reloadGrid");

},1);

}

},

});

$("#tab-content-torrents").jqGrid('navGrid','#tab-content-torrents-pager',{edit:true,add:true,del:true,search:true,refresh:false},

{}, // edit options

{}, // add options

{}, //del options

{multipleSearch:true} // search options

);

$("#tab-content-torrents").jqGrid('filterToolbar',{searchOnEnter:false,groupOp:'OR',defaultSearch: 'cn',});

$("#tab-content-torrents").jqGrid('navButtonAdd',"#tab-content-torrents-pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',

onClickButton:function(){

torrentGrid[0].toggleToolbar()

}

});

$("#tab-content-torrents").jqGrid('navButtonAdd',"#tab-content-torrents-pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',

onClickButton:function(){

torrentGrid[0].clearToolbar()

}

});

and here is JSON return from server:

{

"total":1,

"page":1,

"records":1,

"rows":[

{"id":"12",

"cell":["12","4","pokus4","Movies",null,"yes","1","Monty.Python's.Flying.Circus.Complete.Multisub.DVDRiP.DivX-HM","2009-03-27 17:58:40","4294967295","2010-10-31 05:06:49","-838:59:59","10","0","1","0","0","yes"]},

{"id":"33",

"cell":["33","3","pokus3","Movies",null,"yes","1","24.hodin.S03.COMPLETE.iNTERNAL.DVD.XviD.CZ-JarG","2010-01-21 13:39:28","4294967295",null,null,"15","0","1","0","0","yes"]},

{"id":"55",

"cell":["55","2","pokus 2","Movies",null,"yes","1","Buffy.premozitelka.upiru.1x12.DVD.DivX.CZ-sparhawk","2006-02-17 02:18:33","408793258",null,null,"17","0","1","0","0","no"]},

{"id":"5",

"cell":["5","1","Pokus 1 edit","Television",null,"yes","2","SG-Atlantis.201-210.DVD.XviD.EN","2006-08-20 17:16:06","3669432941","2010-11-21 11:33:22","-697:52:29","15","0","1","0","0","no"]},

{"id":"387",

"cell":["387","-1",null,"Covers",null,"no","4"," [REQ]The Prodigy-Live in Prague 28-10-2006-XviD-2006-mV4U","2007-07-14 10:07:58","366755329",null,null,"0","0","0","0","0","no"]}]

}

try it in this conf, and then change

function torrentReq(value, options, rowObject)

{

var requestName = (!rowObject[2]) ? rowObject['requestname'] : rowObject[2];

var requestID = (!rowObject[1]) ? rowObject['request_id'] : rowObject[1];

var reqLink = (requestName) ? '<br><span id="request-link-'+requestID+'" class="ui-request-link">'+requestName+'</span>' : '';

return '<span>'+value+'</span>'+reqLink;

}

to

function torrentReq(value, options, rowObject)

{

var requestName = rowObject[2];

var requestID = rowObject[1];

var reqLink = (requestName) ? '<br><span id="request-link-'+requestID+'" class="ui-request-link">'+requestName+'</span>' : '';

return '<span>'+value+'</span>'+reqLink;

}

and comment loadcomplete option in grid