JQGrid数据格式.docx

1、JQGrid数据格式Table of Contents Data Manipulation XML Data XML String XML Notes and Limitations JSON Data JSON String JSON dot notation Array Data Function User Data DiscussionData ManipulationWith the first release of jqGrid, the only possible way to obtain data was via xml as described in the tutorial

2、 above. Later, many people requested the ability to obtain data via JSON, then with an array and finally with real names. After lot of work and with the help of the community we now have a wide range of methods for obtaining data. The related options (in options array) for manipulating different typ

3、es of data are: datatype: the possible options are xml json jsonp local or clientSide xmlstring jsonstring script function ()It is very important to read this chapter, in order to understand how you should work with the data! The default mapping for xml data is as follows: jQuery(#gridid).jqGrid(. x

4、mlReader : root: rows, row: row, page: rowspage, total: rowstotal, records : rowsrecords, repeatitems: true, cell: cell, id: id, userdata: userdata, subgrid: root:rows, row: row, repeatitems: true, cell:cell ,.);If your server can provide data in this structure, you need to do nothing more; but if n

5、ot, there is a way (several ways) to handle the data you are given. See XML Data below. The default mapping for json data is as follows: jQuery(#gridid).jqGrid(. jsonReader : root: rows, page: page, total: total, records: records, repeatitems: true, cell: cell, id: id, userdata: userdata, subgrid: r

6、oot:rows, repeatitems: true, cell:cell ,.);In colModel, the related options are xmlmap for the description of an xml field, and jsonmap for the description of a json field. For example: jQuery(#gridid).jqGrid(. colModel : name:amount,., xmlmap:amt.,.);will cause jqGrid to search in the xml data for

7、an amt tag (when the repeatitems option is set to false. See below.). XML DataAs mentioned above, if we do not set the datatype and xmlReader parameter in the options array, the grid expects xml data, and the structure of this data is as described in our example. But what if we do not have the chanc

8、e to manipulate the server response? The solution to this problem is xmlReader, again with some additions in colModel. Here is a brief description of xmlReader. Important note: the rules of accessing the element from xml are the same as those used in jQuery library, i.e. CSS patterns. For more infor

9、mation refer to: http:/www.w3.org/TR/REC-CSS2/selector.html jQuery(#gridid).jqGrid(. xmlReader : root: rows, row: row, page: rowspage, total: rowstotal, records : rowsrecords, repeatitems: true, cell: cell, id: id, userdata: userdata, subgrid: root:rows, row: row, repeatitems: true, cell:cell ,.);Al

10、l the elements in the XML reader will be explained as examples rather than as strong description. root elementThe first setting here defines the root element. This describes where our data begins and all other loops begin from this element. For example, . true . data1 data2 data3 data4 data5 data6 .

11、 If we set the root element to “result” all data will be processed from there. In this case, because our rows are tagged and our cells tagged , all that is needed is to set jQuery(#gridid).jqGrid(. xmlReader: root:result ,.);The next element is the row element.This describes the information for part

12、icular row. Note that row must be a child of the root element. Here, if the xml looks like this, . true . data1 data2 data3 data4 data5 data6 . the setting to properly interpret this data would be jQuery(#gridid).jqGrid(. xmlReader: root:result, row:invoice ,.);The page total and recordselements des

13、cribe the information needed for the pager. These elements can be, but do not have to be, a child of the root element. For example, to interpret this data, . true . 1 10 20 data1 data2 data3 data4 data5 data6 . the xmlReader will have to look like this: jQuery(#gridid).jqGrid(. xmlReader: root:resul

14、t, row:invoice, page:invoicescurrentpage, total:invoicestotalpages, records:invoicestotalrecords ,.);The * repeatitems and * cell elements tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. For this example, .

15、 true . 1 10 20 data1 data2 data3 data4 data5 data6 . the xmlReader will look like this: jQuery(#gridid).jqGrid(. xmlReader: root:result, row:invoice, page:invoicescurrentpage, total:invoicestotalpages, records:invoicestotalrecords, repeatitems:true, cell:invcell ,.);Next is the idelement. If repeat

16、items is set to true and key option in colModel is set to false the id, if present in xml data, must be a attribute of the row element. Lets look at the example: . true . 1 10 20 data1 data2 data3 data4 data5 data6 . In this case the xmlReader is: jQuery(#gridid).jqGrid(. xmlReader: root:result, row

17、:invoice, page:invoicescurrentpage, total:invoicestotalpages, records:invoicestotalrecords, repeatitems:true, cell:invcell, id : asin ,.);Lets suppose that the structure of the xml document returned from the server has the following format: . true . 1 10 20 12345 data1 data2 data3 data4 data5 data6

18、. where the tag describes the unique id and this should be set as the row id in the grid and not displayed in the grid. Following the rules we can construct the following: jQuery(#gridid).jqGrid(. xmlReader: root:result, row:invoice, page:invoicescurrentpage, total:invoicestotalpages, records:invoic

19、estotalrecords, repeatitems:false, id : asin ,.);and our colModel from the example should look like this:jQuery(#gridid).jqGrid(. colModel : name:invid, index:invid, width:55, xmlmap:invoiceno, name:invdate, index:invdate, width:90, xmlmap:invoicedate, name:amount, index:amount, width:80, align:righ

20、t, xmlmap:invoiceamount, name:tax, index:tax, width:80, align:right, xmlmap:invoicetax, name:total, index:total, width:80, align:right, xmlmap:invoicetotal, name:note, index:note, width:150, sortable:false, xmlmap:notes , xmlReader: root:result, row:invoice, page:invoicescurrentpage, total:invoicest

21、otalpages, records:invoicestotalrecords, repeatitems:false, id : asin ,.);We can use another trick. If the names in colModel are not important for you, you can do the following. jQuery(#gridid).jqGrid(. colModel : name:invoiceno, index:invid, width:55, name:invoicedate, index:invdate, width:90, name

22、:invoiceamount, index:amount, width:80, align:right, name:invoicetax, index:tax, width:80, align:right, name:invoicetotal, index:total, width:80, align:right, name:notes, index:note, width:150, sortable:false , xmlReader: root:result, row:invoice, page:invoicescurrentpage, total:invoicestotalpages,

23、records:invoicestotalrecords, repeatitems:false, id : asin ,.);In other words, jqGrid first looks to see if there is an xmlmap option available; if this option is not available the name is used as the xmlmap. But all of this is true only if the repeatitems element in xmlReader is set to false. The subgrid option is included in several of the xmlReader examples above. The principles in constructing the rules for this data are the same as those described above. More details about subgrids can be found in the section on Subgrids. XML StringThe xmlst