Jqgrid Use experience Sharing (i)--jqgrid simple use, JSON format and Jsonreader introduction

The vast number of readers friends of all good, very happy and can be in the blog and everyone to share my development experience.

This time, I am going to introduce you to a very useful jquery form plugin--jqgrid.

If you are experiencing the need for web-side tabular display functionality in a real-world project, and you don't know exactly which technology to use, Jqgrid is definitely your choice.

If you have decided to use Jqgrid technology to complete the form display in your project, and have no detailed instructions on how to develop it, this series of blogs is definitely your choice.

This blog will introduce you to the following:

1. Jqgrid simple to use;
2. Jqgrid General Options specific meaning of the introduction;
3. Jqgrid uses the JSON data format, as well as the actual changes in JSON format when used with Jsonreader and Repeatitems.

First of all, to show you a very simple demo. Draw a table using Jqgrid

Display effect:

Html:

1 ... 2 <  ID= "List2"></table>3<  ID= "Pager2"></div>

Javascript:

1 ...2JQuery ("#list2"). Jqgrid ({3URL: ' server.php?q=2 ',4DataType: "JSON",5colnames:[' Inv No ', ' Date ', ' Client ', ' Amount ', ' tax ', ' total ', ' Notes '],6 colmodel:[7{name: ' id ', index: ' id ', width:55},8{name: ' invdate ', index: ' Invdate ', width:90},9{name: ' name ', Index: ' name ASC, Invdate ', width:100},Ten{Name: ' Amount ', Index: ' Amount ', width:80, align: "right"}, One{name: ' tax ', Index: ' tax ', width:80, align: ' right '},         A{Name: ' Total ', index: ' Total ', width:80,align: ' Right '},         -{name: ' Note ', index: ' Note ', width:150, sortable:false}         -        ], theRownum:10, -rowlist:[10,20,30], -Pager: ' #pager2 ', -Sortname: ' ID ', +Viewrecords:true, -SortOrder: "desc", +Caption: "JSON Example" A }); atJQuery ("#list2"). Jqgrid (' Navgrid ', ' #pager2 ', {edit:false, add:falseDel:false});

Here is a detailed description of the above drawing the table, Jqgrid the meaning of the specific options.

• URL: This parameter specifies the Jqgrid request to fetch data from the server.
• datatype: This parameter specifies the format of the data that is called by the Jqgrid, and the common format is json,xml,local.
• colname: This parameter specifies the title of each column of the Jqgrid, in order, and you can see that it is actually a string array.
• Colmodel: This parameter specifies the specific format of the Jqgrid columns, "name" specifies the property name in the corresponding data, "index" is used for column sorting, "width" is obviously the specified column width, "align" alignment, "sortable" Specifies whether sorting is supported. In fact, each of the above settings are basically known, we can use it boldly. (Note: colname and Colmodel need one by one correspondence)
• rowNum: This parameter specifies the number of rows displayed Jqgrid, the default value of 20.
• rowlist: This parameter specifies the RowNum value that Jqgrid can accept, such as [10,20,30]. It's actually just an array.
• Pager: This parameter specifies the Jqgrid footer display location.
• sortname: This parameter specifies the Jqgrid default row sequence, which can be either a column name or a number.
• viewrecords: This parameter sets whether the total number of all records is displayed at Pager bar.
• sortorder: This parameter specifies the default sort order for the Jqgrid default column.
• caption: This parameter sets the title of the Jqgrid and, if set, it is displayed in the header layer of the grid.

The above is only the most commonly used, the most simple meaning of the option, Jqgrid also provides a lot of options for everyone to use, if the readers need a small series will be in the future of the blog to specifically introduce the Jqgrid option.

I believe that a lot of readers want to know exactly what format the JSON is Jqgrid using, and let's show you the JSON data used in the table above:

1{"page": "1", "Total": 2, "records": "13",2"Rows":[3{"id": "+", "cell": ["]", "2007-10-06", "Client 3", "1000.00", "0.00", "1000.00",NULL]},4{"id": "2", "Cell": ["]", "2007-10-06", "Client", "700.00", "140.00", "840.00",NULL]},5{"id": "One", "cell": ["One", "2007-10-06", "Client 1", "600.00", "120.00", "720.00",NULL]},6{"id": "Ten", "Cell": ["Ten", "2007-10-06", "Client 2", "100.00", "20.00", "120.00",NULL]},7{"id": "9", "Cell": ["9", "2007-10-06", "Client 1", "200.00", "40.00", "240.00",NULL]},8{"id": "8", "Cell": ["8", "2007-10-06", "Client 3", "200.00", "0.00", "200.00",NULL]},9{"id": "7", "Cell": ["7", "2007-10-05", "Client 2", "120.00", "12.00", "134.00",NULL]},Ten{"id": "6", "Cell": ["6", "2007-10-05", "Client 1", "50.00", "10.00", "60.00", "" "]}, One{"id": "5", "Cell": ["5", "2007-10-05", "Client 3", "100.00", "0.00", "100.00", "No.]}, A{"id": "4", "Cell": ["4", "2007-10-04", "Client 3", "150.00", "0.00", "150.00", "no tax"]} - ], -"UserData": {"Amount": 3220, "tax": 342, "Total": 3564, "name": "Totals:"}}

When you see the JSON format that Jqgrid actually calls, many of your readers will have questions. Can only JSON data that conforms to the above format be parsed by Jqgrid?

The answer is: negative.

Here we have to introduce an important option for Jqgrid Jsonreader,jsonreader is used to set how to parse JSON data sent back from the server side. The above table was able to parse successfully because of the default settings of Jsonreader.

Jsonreader Default settings:

1 Jsonreader: {2Root: "Rows",//a portal in JSON that represents the actual model data3Page: "Page",//data in JSON that represents the current page number4Total://data representing the total number of pages in JSON5Records: "Records",//data representing the total number of rows of data in JSON6Repeatitems:true,//if set to False, Jqgrid will search for the corresponding data element according to name when parsing the JSON (that is, the elements in the JSON can be out of order), and the name used is from the name setting in Colmodel. 7Cell: "Cell",8ID: "ID",9UserData: "UserData",Ten Subgrid: { OneRoot: "Rows",  ARepeatitems:true,  -Cell: "Cell" -     } the}

If the JSON data returned by the server side does not conform to the default settings (for example, the content structure is different) then it is necessary to modify this setting.

Usually Jsonreader and Repeatitems are used in conjunction if the data in the Repeatitems for False,json can be disorderly and allow data to be vacant. Jqgrid is parsed based on the name property of the Colmodel and the JSON data corresponding to the property names.

When Repeatitems is true:

1     ... 2     jsonreader: {3         root: "Rows",4         page: "Page",5          Total: "Total",6         Records: "Records"7    },8      ...

JSON structure:

1 { 2"page": "XXX", 3"Total": "yyy",4"Records": "ZZZ",5"Rows" : [6{"id": "1", "Cell": ["Cell11", "cell12", "Cell13"]},//The name of each column is not required in the cell, but it needs to correspond to Colmodel one by one7{"id": "2", "Cell": ["Cell21", "cell22", "cell23"]},8                  ...9     ]Ten}

When Repeatitems is false:

1     ... 2     false , 3     jsonreader: {4         root: "Rows",5         page: "Page", 6         Total: "Total",7         Records: "Records"8    },9     ...

JSON structure:

1 { 2"page": "XXX", 3"Total": "yyy",4"Records": "ZZZ",5"Rows" : [6{"Invid": "1", "invdate": "Cell11", "Amount": "Cell12", "tax": "Cell13", "Total": "1234", "note": "Somenote"},//The name of each column is required in the data, but it can be sorted out of column7{"Invid": "2", "Invdate": "Cell21", "Amount": "Cell22", "tax": "Cell23", "Total": "2345", "note": "Some note"},8          ...9     ]Ten}

Thank you very much for sticking to this blog post.

I know that a blog can not fully introduce the jqgrid of the many details, so in the future blog will continue to introduce Jqgrid other details.

Xiao Jqgrid hope that through the blog will be encountered in the use of their own various problems and solutions to share to the vast number of readers friends, hope can help you quickly learn jqgrid, to avoid wasting a lot of time in unnecessary details.

In addition, if you have reader friends and small jqgrid very favor, you can discuss Jqgrid in the comment area and small part of the many advantages and disadvantages, and discuss related solutions.

***************************

Thank you very much to the readers of the small series of support, small series very happy to share my development experience.

If my experience can help readers, it is a small part of the greatest motivation and pleasure.

Chi Jifa

Dalian University

2014-10-17 11:26:01

***************************

Jqgrid Use experience Sharing (i)--jqgrid simple use, JSON format and Jsonreader introduction