Jgrid

Posted by imomins on July 11, 2011 at 7:42 AM

jsonReader as FunctionIn certain situation you will obtain the data from a web service. In this case it is not possible to configure all the properties of the response so that the grid will work properly. As of version 3.6.4 it is possible to define the elements of the jsonReader as function. Below is a example on how this can be used:

jsonReader: {

repeatitems: false,

id: "Id",

root: function (obj) { return obj; },

page: function (obj) { return 1; },

total: function (obj) { return 1; },

records: function (obj) { return obj.length; }

}Where obj is the response from the service/server

Array DataDespite the fact that the primary goal of jqGrid is to represent dynamic data returned from a database, jqGrid includes a wide range of methods to manipulate data at client side: Array data.

Related options in options array: datataype

Related options in colModel: sorttype, datefmt

Related methods : getRowData, delRowData, setRowData, addRowData, updateGridRows See Methods

As of version 3.7 we introduce two additional parameters data and localReader. The data parameter is described in grid options.The localReader has the same sense as jsonReader described above, but applied to array data that is stored locally.

The initial configuration of the localReader is the same as those from jsonReader

localReader = {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: false,

cell: "cell",

id: "id",

userdata: "userdata",

subgrid: {root:"rows", repeatitems: true, cell:"cell"}

}All operations that are valid for jsonReader can be applied to localReader.

If we have defined a pager for grid with client side data, the buttons in pager are automatically disabled. In other words, the current release of grid does not support client side paging and serching.

First we must instruct jqGrid that the data that will be present is at client side. This is done with the option datatype. To use this we must set

jQuery("#grid_id").jqGrid({

...

datatype: "clientSide",

...

});The other option that can be used is “local” i.e. datatype: “local” These are the same.

Having this it is a good idea to set the sorttypes for the columns. If the sorttype is not set the default sorttype is “text”. Let's consider our example in terms of array data.

...

<script>

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

datatype: 'clientSide',

colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],

colModel :[

{name:'invid',index:'invid', width:55, sorttype:'int'},

{name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'},

{name:'amount',index:'amount', width:80, align:'right',sorttype:'float'},

{name:'tax',index:'tax', width:80, align:'right',sorttype:'float'},

{name:'total',index:'total', width:80,align:'right',sorttype:'float'},

{name:'note',index:'note', width:150, sortable:false} ],

pager: '#pager',

rowNum:10,

viewrecords: true,

caption: 'My first grid'

});

...

});

</script>You can see the new setting here: datatype, sortype and datefmt.

The possible values for the sorttype are:

int - the data is interpreted as integer,

float - the data is interpreted as decimal number

date - the data is interpreted as date

text - the data is interpreted as text

We need this information for the appropriate sorting of these types. Additionally for the sorttype date we must known the format of the data that will be present in the grid. The default format is a ISO format 'Y-m-d'. The description of the date format is like a PHP way. For more information refer to php.net.

Let's add some data. This can be done with the method addRowData.

The parameters to this method are:

jQuery("#grid_id").addRowData( rowid, data, position, srcrowid );where:

rowid: this value will be set as the id of the row data: is the array of data in pair name:value, where the name is the name from colModel first” adds the new row at the top of the grid; “last” adds the data in the last position; “before” and “after” refer to the row identified in srcrowid. srcrowid: the id of a row which the new data is to be added either “before” or “after”<script>

...

var myfirstrow = {invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"};

jQuery("#list").addRowData("1", myfirstrow);

...

</script>With this line we have added our first row. It is important to note that the order of the name-value pairs is arbitrary. Moreover, we can set a single name-value pair, like this.

<script>

...

jQuery("#list").addRowData("2", {amount:"300.00"});

...

</script>With this line we have added second row with only a value in the amount column.

To get data from the particular row we should use getRowData method:

jQuery("#grid_id").getRowData( rowid );where rowid is the id for the row which values we will obtain

jQuery("#list").getRowData( "1" );will return array of name-value pairs - the result is

{invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"};To delete a row we should use delRowData method:

jQuery("#grid_id").delRowData( rowid );where rowid is the id of the row that can be deleted.

jQuery("#list").delRowData( "2" );will delete the row with the id = 2.

This method returns true if the deletion is successfully, false otherwise

To change all or part of the values in a given row, we can use a setRowData method.

jQuery("#grid_id").setRowData( rowid, data );whererowid is the id of the row which values will be changed

data is a array of data that contain the new values. The structure of array is in type name:value.

jQuery("#list").setRowData( "1", { tax:"5", total:"205" });will change the values tax and total of row with id = 1.

The method returns true if update is successful, otherwise false.

To update a set of grid rows at once we can use updateGridRows. For more info refer to Addon methods

FunctionThis option does not really define the datatype at all, but rather how to handle the data that is provided by the server (which would still come as either xml or json data). The functions defined as a Datatype should (or can) call addXMLData, addJSONData or addRowData once the data has been received.

Calling Convention:

datatype : function(postdata) {

// do something here

}Datatype functions are supplied with a single object containing the request information (parameter postdata), which normally would have been transformed into GET or POST arguments. This object is compatible with the data: option supplied to the jQuery $.ajax function.

Consider our example here is how this will work with datatype function:

<script type="text/javascript">

...

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

datatype: function(postdata) {

jQuery.ajax({

url: 'example.php',

data:postdata,

dataType:"xml",

complete: function(xmldata,stat){

if(stat=="success") {

var thegrid = jQuery("#list")[0];

thegrid.addXmlData(xmldata.responseXML);

}

}

});

},

colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],

colModel :[

{name:'invid', index:'invid', width:55},

{name:'invdate', index:'invdate', width:90},

{name:'amount', index:'amount', width:80, align:'right'},

{name:'tax', index:'tax', width:80, align:'right'},

{name:'total', index:'total', width:80, align:'right'},

{name:'note', index:'note', width:150, sortable:false}

],

pager: '#pager',

rowNum:10,

rowList:[10,20,30],

sortname: 'invid',

sortorder: 'desc',

viewrecords: true,

caption: 'My first grid'

});

});

...

</script>User DataIn some cases we need to have custom data returned from the request that is not automatically displayed by jqGrid, that we use either in a later process or to display additional information somewhere in the HTML page or associated with the grid. To do that a userdata tag can be used.

In xmlReader this is defined as:

xmlReader: {

...

userdata: "userdata",

...

}This describes the tag where our custom data is. The important part here is that the XML tag should have a attribute name in order to associate data.

In the data received from the server, this could be structured as follows

<invoices>

<request>true</request>

<userdata name="totalinvoice"> 240.00 </userdata>

<userdata name="tax"> 40.00</userdata>

...

<result>

<row>

<cell>data1</cell>

<cell>data2</cell>

<cell>data3</cell>

<cell>data4</cell>

<cell>data5</cell>

<cell>data6</cell>

</row>

...

</result>

</invoices>If using json data, the definition might look like this:

jsonReader: {

...

userdata: "userdata",

...

}and the data received, like this:

{

total: "xxx",

page: "yyy",

records: "zzz",

userdata: {totalinvoice:240.00, tax:40.00},

rows : [

{id:"1", cell:["cell11", "cell12", "cell13"]},

{id:"2", cell:["cell21", "cell22", "cell23"]},

...

]

}When this data has been received, this information is stored in the userData array of the options array. Whichever format the data comes in, in this case we would have:

userData = {totalinvoice:240.00, tax:40.00}The data can be accessed two ways.

1. Using a getGridParam method. To do that we need to request this data:

jQuery("grid_id").getGridParam('userData')2. Using the user contributed Post Data Module

jQuery("grid_id").getUserData()to get the entry array or

jQuery("grid_id").getUserDataItem( key )to get particular value with name = key

 


Categories: JavaScript, JQUERY, AJAX

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

You must be a member to comment on this page. Sign In or Register

0 Comments