Summary of Internship (vi)---jQuery grid user Guide

Last week, we need to change the ordinary table of a project to use the form of jquery plug-in forms, found the Jqgrid this plug-in, this thought to find a demo, check the API can solve, did not think it is a cost of Kung fu, here record summary.

The main content of this article is: the basic table drawing, realizes the paging function, changes the Jqgrid to the response table.

Put a table in the picture first

Jqgrid Source: Https://github.com/tonytomov/jqGrid

English api:http://trirand.com/blog/jqgrid/jqgrid.html

Chinese Demo:http://blog.mn886.net/jqgrid/

Chinese api:53375073

1. Introduction of CSS and JS files

First, the Jqgrid must be used in the HTML5 page , otherwise the table style will be garbled, affecting the use.

Css,js files and some icons and fonts that need to be introduced

The file structure is as follows

Picture of the icon in the table under the images file

Different theme styles for tables in theme

Font file required for using the font awesome icon under the fonts file

css File

<!--Jqgrid Component Base Style pack-necessary -<Linkrel= "stylesheet"type= "Text/css"href= "Jqgrid/css/ui.jqgrid.css" /><!--Jqgrid Theme Pack-non-essential - <!--in the Jqgrid/css/theme this directory there are other theme packages, you can try to change the look of the effect -<Linkrel= "stylesheet"type= "Text/css"href= "Jqgrid/css/theme/start/jquery-ui-1.8.20.custom.css" /><!--basic style, no theme - <!--<link rel= "stylesheet" type= "Text/css" href= "Jqgrid/css/jquery-ui.css"/> -<!--icon Style - <Linkrel= "stylesheet"type= "Text/css"href= "Jqgrid/css/font-awesome.min.css">

js file

<!--jquery Plugin Package-necessary -<Scripttype= "Text/javascript"src= "Jqgrid/js/jquery-3.3.1.min.js"></Script><!--Jqgrid Plug-in package-necessary -<Scripttype= "Text/javascript"src= "Jqgrid/js/jquery.jqgrid.min.js"></Script><!--Jqgrid Plug-in multi-language pack-non-essential -<Scripttype= "Text/javascript"src= "Jqgrid/js/grid.locale-cn.js"></Script>

2. Place the table in the page

 <  div  class  = "col-xs-12"     >  <  table  id  = "Jqgrid"  ></ table     >  <  div  id  = "Jqgridpager"  ></ div  >  </ div  >  

Table is the body of the table, the following div is to display the table's paging, record the number of bars and other information.

3, Write JS

<Scripttype= "Text/javascript">$ (function () {$ ("#jqGrid"). Jqgrid ({url: '<%=path%>/student/allstu.do ', Mtype: "Post", DataType: "JSON", Colmodel: [{label: ' Student number ', Name: ' stu_id ', Key:true, width:100,align: ' Center '}, {label: ' Student name ', Name: ' Stu_name ', width:1 00,align: ' Center '}, {label: ' Sex ', Name: ' Sex ', Width:150,align: ' Center '}, {label: ' Birthday ', Name: ' Birthday ', width:150,align: ' Center '/*, formatter: ' Date ', formatoptions: {srcformat: '                ', Newformat: ' y-m-d '} */}, {label: ' School ', Name: ' School ', Width:150,align: ' Center ', Sortable:false}, {label: ' Operation ', Name: ' Flag ', width:45, align: ' center ', Formatter:edit}], Viewrecord S:true,//define whether you want to display the total number of records rownum:5,//per page number of bars displayed height: ' Auto ', rowlist: [5, 10, 20],//To change the number of display records pager: "#jqGridPager"//define navigation bar for page flipping});
Jqgrid the icon of adding and removing the operation, click to do the corresponding operation */$ ("#jqGrid"). Jqgrid (' Navgrid ', ' #jqGridPager ', {add:false, Del:true, edit:true, Position: ' Left '}); */
Because the Jqgrid table does not support responsive operations, it is necessary to manually write code//settings Jqgrid the same width as the container var Parent_dom = $ ("#jqGrid"). Closest (' [class*= ' col-']        ‘);        $ ("#jqGrid"). Jqgrid (' Setgridwidth ', Parent_dom.width ()); Change the browser window large hours $ (window). On (' Resize.jqgrid ', function () {///re-scratch the parent container new width var parent_dom = $ (            "#jqGrid"). Closest (' [class*= ' col-'] ');        $ ("#jqGrid"). Jqgrid (' Setgridwidth ', Parent_dom.width ());    });        }); Add a button function edit (cellvalue, Options, Rowobject) to the table {return ['<Buttontype= "button"onclick= "Show (' +options.rowid+ ')"><Iclass= "fa Fa-edit"></I></Button>' + '<Buttontype= "button" ><Iclass= "fa Fa-trash"></I></Button>']; }
The button corresponds to the method function Show (ROWID) {alert (ROWID); }</Script> 

　　

4. Background Data acquisition

@ResponseBody @RequestMapping ("/allstu") Public Map<String,Object> Getallstu (intPageintrows) throws Exception {// Get Start Page        intStart = Rows*page-rows; Paging Get Data Map<String,Object> params =NewHashmap<string,object>(); Params.put ("Pagestart", start); Params.put ("PageSize", rows); List<Student> Withpage =stuservice.getallstudentwithpage (params);
Define a map map to send data to the foreground<String,Object> map =NewHashmap<string,object>(); intRecords =Stuservice.getstucount ();//Get Total Pages        intTotalpage = 0; intm = Records/rows; intn = records%rows; //+1 If the result has a remainderTotalpage = (n = = 0)? M:m + 1; Map.put ("Rows", withpage);//data obtained by pagingMap.put ("Records", List.size ());//total number of recordsMap.put ("page", page);//Current PageMap.put ("Total", totalpage);//Total PagesMap.put ("PageSize", rows);//number of record bars per page                returnmap; }

If you need to use paging, you do not have to pass the entity class object to the foreground, you need some additional information.

For example, the data from the start page of the article is:

{"Total": 3, "records": +, "pageSize": 5, "page": 1, "Rows": [{"stu_id": 1, "Stu_name": "Zhang San", "Age": 0, "Birthday": Dec 31, 1998 12:00:00 AM "," sex ":" Male "," school ":" Npu "},{" stu_id ": 2," Stu_name ":" Wang Liu "," age ": 0," Birthday ":" Feb 2, 1999 12:00:00 AM " , "Sex": "female", "school": "Xi ' an XI ' an"},{"stu_id": 3, "Stu_name": "66", "age": 0, "Birthday": "Jan 1," 12:00:00 AM "," Sex ":" Female "," School ":" Changan "},{" stu_id ": 4," Stu_name ":" Zhang Yi "," age ": 0," Birthday ":" June, 1994 12:00:00 AM "," Sex ":" female "," school ":" Shaanxi Normal "}, {"stu_id": 5, "Stu_name": "Zhao Liu", "age": 0, "Birthday": "Dec, 12:00:00 AM", "Sex": "Male", "school": "123"}]}

An important option for Jqgrid Jsonreader,jsonreader is to set up 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.

Specific settings can refer to this blog

Jqgrid simple use, JSON format and Jsonreader introduction: 68482771

It is now possible to draw a simple jqgrid table, and to customize some other information, you can refer to the API for modification.

Summary of Internship (vi)---jQuery grid user Guide