jqGrid custom formatter for userData
Is there any workaround to add custom 'formatter' to userData
in jqGrid? i found this question and it helps me a lot. below is the code that i use to populate jqGrid. please note that i populate a custom userData
object in the jsonReader
and set it to the grid in loadComplete
i need to add separate 'formatter' to total columns. please let me know if there is a way. Thanks in advance.
var userDataTotals;
jq("#testGrid").jqGrid({
url:'local',
datatype: 'local',
mtype: 'GET',
colNames:[
'rowId','unitId',
'<fmt:message key="report.col1"/>',
'<fmt:message key="report.col2"/>',
],
colModel :[
{name:'rowId', index:'rowId',hidden: true,sortable: true,key:true},
{name:'unitId', index:'unitId',hidden: true,sortable: true,key:true},
{name:'outboundReadyDate', index:'outboundReadyDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
{name:'outboundDate', index:'outboundDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
],
// this will enable the footer row to display totals
footerrow : true,
//userDataOnFooter : true,
altRows : true,
//to hide pager buttons
pgbuttons:false,
recordtext:'',
pgtext:'',
gridview: true,
height:270,
loadonce: true,
sortname: 'rowId',
sortorder: 'asc',
viewrecords: true,
rowNum:30000,
loadComplete: function() {
// This will increase the column header height ( to show two rows in the header)
jq(".ui-jqgrid-sortable").css('white-space', 'normal');
jq(".ui-jqgrid-sortable").css('height', 'auto');
//Set the total values after load complete,otherwise
// custom formatter will format the total value as well.
jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);
//check the data type to avoid this code to execute when the pageload
var checkDatatype = myGrid.jqGrid("getGridParam","datatype");
if(checkDatatype =='json' && myGrid.getGridParam('records') == 0){
// when no records are displaying alert it to the user
alert(noRecordsMsg);
}
},
jsonReader : {
root: "dtos",
records: "records",
repeatitems: false,
cell: "cell",
id: "rowId",
userdata :function(obj) {
userDataTotals = {"outboundReadyDate":obj.totalOutBounded,
"outboundDate":obj.totalOutBoundReady};
}
},
//This will format the date of the grid (without displaying time)
function dateOnlyFmatter (cellvalue, options, rowObject){
var opts = options.colModel.formatoptions;
if(cellvalue==null || cellvalue=='undefined'){
return '-';
}else{
if(opts != undefined && rowObject.projectTypeName =='IOD'){
return 'N/A';
}
var now = new Date(cellvalue);
return now.format('M j, Y');
}
}
i use custom dateFormat.js
to format the date.
and the json Response is -
{
"dtos": [
{
"unitId": 1068,
"outboundDate": null,
"outboundReadyDate": 1317619303000,
"rowId": 13,
},
{
"unitId": 1105,
"outboundDate": 1317616970000,
"outboundReadyDate": 1317617213000,
"rowId": 14,
}
],
"totalOutBounded": 0,
"totalOutBoundReady": 4,
"rowTotal"开发者_JAVA百科: 15,
"returnCode": 0,
"msg": ""
}
i used sortType
as integer
because from the server i am passing a 'java' Date
object directly to the grid. in order to sort it i need to set sortType
to integer
Basic problem what i am having was in IE8 i cannot see the 'userData' total values. but in other browsers i can see it. i need to format userData
total values as 'hyperlinks'.
without userData
formatting i can see the totals in IE8. so that i am thinking that without using the column 'formatter'
adding a custom formatter to the total values (userData
).
You have many small syntax errors:
- The usage of trailing comma (like ',}') is a syntax error. You have to remove trailing comma from JSON data and from
colNames
andcolModel
. The"rowId": 13,}
and"rowId": 14,}
can't be read. - You define
jQuery("#testGrid")
, but usejQuery("#mainReportGrid")
to set the footer. - The
url: 'local'
or any otherurl
parameter has no sense in case ofdatatype: 'local'
. Theurl
parameter will be just ignored (not used) in case ofdatatype: 'local'
. - You use
myGrid
which you not defined in the posted code. Either you should definevar myGrid = jQuery("#testGrid");
somewhere at the beginning of your code or definevar myGrid = $(this);
at the beginning ofloadComplete
event handler. - You use
now.format('M j, Y')
and not post the extension methodformat
of theDate
. You can use jqGrid method instead:return $.fmatter.util.DateFormat(undefined, now, 'M j, Y', $.jgrid.formatter.date);
. - I recommend you to use strict equality
===
always instead of==
and!==
instead of!=
. Read for example here for more information. - I recommend you to use
height: 'auto'
orscrollOffset: 0
if you use jqGrid without having scroll bars. I recommend you to read the answer. If you use the described bug fix you can modify the line
jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);
to the linemyGrid.jqGrid("footerData", "set", myGrid.jqGrid('getGridParam', 'userData'), false);
The variable
userDataTotals
will be not needed and the methoduserdata
from theuserdata
can be defined asuserdata: function (obj) { return { outboundReadyDate: obj.totalOutBounded, outboundDate: obj.totalOutBoundReady }; }
You can see here modified version of your code.
精彩评论