jQuery Grid Plugin - jqGrid

//Custom parameter values

var listDataURL = '/cms/getDashboardCampaignData.do';

var initialPageSize = 20;

var maxRecords = 10000;

var pageSizes = [initialPageSize, 40, 80, maxRecords];

// jqGrid Configurations

jq(function() {

jQuery("#campaignPerformanceGrid").jqGrid({

url:listDataURL,

datatype: 'json',

mtype: 'POST',

colNames:['campaignID', 'flightID', 'Name', 'Start','End', 'Proj %', 'Ordered', 'Delivered', 'CTR','Priority','Interval',''],

colModel:[

{name:'campaignId',index:'campaignId', hidden:true, key:true},

{name: 'flightId', index: 'flightId', hidden: true},

{name:'name',index:'name',sorttype:"text", width:400},

{name:'startDateStr',index:'startDate',sorttype:"date", width:200},

{name:'endDateStr',index:'endDate',sorttype:"date", width:200},

{name:'projectedPercentage',index:'completionPercentage',sorttype:"float", width:200},

{name:'ordered',index:'ordered',sorttype:"int"},

{name:'delivered',index:'delivered',sorttype:"int"},

{name:'ctr',index:'ctr',sorttype:"float"},

{name:'priority',index:'priority',sorttype:"int"},

{name:'interval',index:'interval',sorttype:"string"}, //has mouseover

{name:'flightIdMoreInfo', index:'flightId', formatter:moreInfoFormatter, sortable:false}

],

postData: { },

rowNum:initialPageSize,

rowList:pageSizes,

height: "auto",

width: 1200,

//autowidth: true,

altRows : true,

ignoreCase: true, //Filter and Sort is case-insensitive

pager: '#pager',

viewrecords: true,

sortname: 'name',

sortorder: "asc",

caption:"",

emptyrecords: "No data found",

loadonce: true,

loadComplete: setupMoreInfo,

jsonReader : {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: false,

cell: "cell",

id: "id",

subgrid: {

root:"rows",

repeatitems: false,

cell:"cell"

}

},

treeGrid: true,

treedatatype: 'json',

treeGridModel : 'adjacency',

treeReader: { level_field: 'tree_level', parent_id_field: 'tree_parent', leaf_field: 'tree_leaf', expanded_field: 'tree_expanded', loaded: 'tree_loaded', icon_field: 'tree_icon' },

ExpandColumn: 'name'

});