Jquery table control-use jqgrid

The jqgrid table control of jquery is used in the project, which is powerful. It is difficult to encapsulate JSON data. First, let's look at the JSON data format required by grid:

{"Total": 1, "page": 1, "records": 10, "rows": [{"ID": 1, "cell ": ["Field 1", "Field 2",...]}, {[ID ": 2," cell ": [" Field 1 "," Field 2 ",...]}

Total: Total number of pages, page: Current page number, records: number of records displayed per page, rows is a set of records. If you want to use paging, set these parameters to the paging parameters of the background paging class.

First, let's look at the front-end Page code,

<LINK rel = "stylesheet" type = "text/CSS" Media = "screen" href = "$ {CTX}/themes/basic/grid.css" mce_href = "$ {CTX} /themes/basic/grid.css "/> <br/> <MCE: script src = "$ {CTX}/JS/jquery. JS "mce_src =" $ {CTX}/JS/jquery. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <MCE: script src =" $ {CTX}/JS/jqgrid/jquery. jqgrid. JS "mce_src =" $ {CTX}/JS/jqgrid/jquery. jqgrid. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <MCE: Script Type = "Text/JavaScript"> <! -- <Br/> // we use a document ready jquery function. <br/> jquery (document ). ready (function () {<br/> jquery ("# List "). jqgrid ({<br/> // The URL parameter tells from where to get the data from server <br/> // Adding? ND = '+ new date (). gettime () Prevent ie caching <br/> URL: 'terminal-users! Loadbyfilters ', <br/> // datatype parameter defines the format of data returned from the server <br/> // in this case we use a JSON data <br/> datatype: "JSON", <br/> // colnames parameter is a array in which we describe the names <br/> // In the columns. this is the text that apper in the head of the grid. <br/> colnames: ['user Code', 'user name', 'department ', 'security region', 'Bind terminal', 'operation'], <br/> // colmodel array describes Model of the column. <br/> // name is the name of the column, <br/> // index is the name passed to the server to sort data <br/> // note that we can pass here nubers too. <br/> // width is the width of the column <br/> // align is the align of the column (default is left) <br/> // sortable Defines if this column can be sorted (default true) <br/> colmodel: [<br/> {Name: 'userid', index: 'userid', wi DTH: 80 },< br/> // The data obtained by grid is only related to the order in which the cell is placed in the background. <br/> {Name: 'username', index: 'username ', <br/> // index indicates the name of the sorting parameter. <br/> width: 80, formatter: 'showlink', formatoptions: {baselinkurl: 'terminal-users! Input. action ', showaction: '', idname:" entityid "}}, <br/> // after the field is added to the baselinkurl attribute, hyperconnections are supported. <br/> {Name: 'destentname', index: 'destentinfo. required mentid ', width: 80}, <br/> {Name: 'domainname', index: 'securitydomain. domainid ', sortable: false, width: 150}, <br/> // set sortable of the field to false if no sorting is required <br/> {Name: 'computername ', sortable: false, width: 150 },< br/> {Name: 'option', index: 'option', width: 120, sortable: false, alig N: 'center'} <br/>], <br/> // pager parameter define that we want to use a pager bar <br/> // In this case this must be a valid HTML element. <br/> // note that the pager can have a position where you want <br/> Pager: jquery ('# pager '), <br/> // rownum parameter describes how many records we want to <br/> // view in the grid. we use this in example. PHP to return <br/> // the needed data. <br/> row Num: 10, <br/> // rowlist parameter construct a select box element in the pager <br/> // in wich we can change the number of the visible rows <br/> rowlist: [10, 20, 30], <br/> // path to mage location needed for the grid <br/> imgpath: 'themes/basic/images ', <br/> // sortname sets the initial sorting column. can be a name or number. <br/> // this parameter is added to the URL <br/> sortname: 'userid ', // Default sorting field <br/> // viewrecords defines the view the total records from the query in the pager <br/> // bar. the related tag is: records in XML or JSON definitions. <br/> viewrecords: True, <br/> // sets the sorting order. default is ASC. this parameter is added to the URL <br/> sortorder: "ASC", // default sorting method <br/> weight: 600, <br/> Height: 200, <br/> multiselect: True, <br/> prmnames: {rows: "page. pagesize ", Pa Ge: "page. pageno ", sort:" page. orderby ", order:" page. order "} <br/> // in my project, struts2 is used and the page class is used as the page, after you set these <br/> // parameters, struts2 blocks them on the page to complete the paging and sorting <br/>. If you do not need struts2, these parameters can be obtained in the request. <br/> // The names are rows, page, sort, and order. <Br/>}); </P> <p> // --> </MCE: SCRIPT> <br/> <! -- The grid definition in HTML is a table tag with class 'scroll' --> <br/> <Table id = "list" class = "scroll" cellpadding = "0" cellspacing = "0"> </table> <br/> <! -- Pager definition. class scroll tels that we want to use the same theme as grid --> <br/> <Div id = "pager" class = "scroll" style = "text-align: center; "mce_style =" text-align: center; "> </div>

 

 

Let's look at the background. We need a paging class and paste it with my paging class.

Import Java. util. collections; <br/> Import Java. util. list; </P> <p> Import Org. apache. commons. lang. stringutils; </P> <p>/** <br/> * Paging parameters irrelevant to specific ORM implementations and query result encapsulation. <br/> * @ Param <t> type of record in page. <br/> * @ author Calvin <br/> */<br/> public class page <t> {<br/> // public variable <br/> Public static final string ASC = "ASC "; <br/> Public static final string DESC = "DESC"; </P> <p> Public static final int min_pagesize = 5; <Br/> Public static final int max_pagesize = 200; </P> <p> // paging parameter <br/> protected int pageno = 1; <br/> protected int pagesize = min_pagesize; <br/> protected string orderby = NULL; <br/> protected string order = NULL; <br/> protected Boolean autocount = true; </P> <p> // return result <br/> protected list <t> result = collections. emptylist (); <br/> protected int totalcount =-1; </P> <p> // constructor </P> <p> Public page () {<br/> Super (); <br/>}</P> <p> Public page (final int pagesize) {<br/> setpagesize (pagesize ); <br/>}</P> <p> Public page (final int pagesize, final Boolean autocount) {<br/> setpagesize (pagesize); <br/> This. autocount = autocount; <br/>}</P> <p> // query parameter functions </P> <p>/** <br/> * obtain the page number of the current page, the sequence number starts from 1. The default value is 1. <br/> */<br/> Public int getpageno () {<br/> return pageno; <br/>}</P> <p>/** <br/> * set the page number of the current page. The sequence number starts from 1 and is automatically adjusted to 1 when it falls below 1. <br/> */< Br/> Public void setpageno (final int pageno) {<br/> This. pageno = pageno; </P> <p> If (pageno <1) {<br/> This. pageno = 1; <br/>}</P> <p>/** <br/> * obtain the number of records on each page. The default value is 10. <br/> */<br/> Public int getpagesize () {<br/> return pagesize; <br/>}</P> <p>/** <br/> * set the number of records on each page. this parameter is automatically adjusted when the value exceeds the min_pagesize and max_pagesize ranges. <br/> */<br/> Public void setpagesize (final int pagesize) {<br/> This. pagesize = pagesize; </P> <p> If (pagesize <min_pagesize) {<br/> This. pagesize = min_pagesize; <br/>}< br/> If (pagesize> max_pagesize) {<br/> This. pagesize = max_pagesize; <br/>}</P> <p>/** <br/> * calculate the position of the first record on the current page in the summary result set based on pageno and pagesize., the sequence number starts from 0. <br/> */<br/> Public int getfirst () {<br/> return (pageno-1) * pagesize ); <br/>}</P> <p>/** <br/> * obtain the sorting field. No default value exists. multiple sorting fields are separated by commas (,). They are only valid for criterion queries. <br/> */<br/> Public String getord Erby () {<br/> return orderby; <br/>}</P> <p>/** <br/> * sets the sorting field. separate multiple sorting fields with commas. valid only for criterion queries. <br/> */<br/> Public void setorderby (final string orderby) {<br/> This. orderby = orderby; <br/>}</P> <p>/** <br/> * Whether a sorting field has been set, which is only valid for criterion queries. <br/> */<br/> Public Boolean isorderbysetted () {<br/> return stringutils. isnotblank (orderby); <br/>}</P> <p>/** <br/> * obtains the sorting direction. The default value is ASC, which is only valid for criterion queries. <br/> * <br/> * @ Param order the optional values are desc or ASC. Separate multiple sorting fields with commas. <br/> */<br/> Public String getorder () {<br/> return order; <br/>}</P> <p>/** <br/> * sets the sorting direction, which is only valid when the criterion query is performed. <br/> * @ Param order the optional values are desc or ASC. Separate multiple sorting fields with commas. <br/> */<br/> Public void setorder (final string order) {<br/> // check the valid value of the order string <br/> string [] orders = stringutils. split (stringutils. lowercase (Order), ','); <br/> for (string orderstr: ORD ERS) {<br/> If (! Stringutils. Equals (DESC, orderstr )&&! Stringutils. equals (ASC, orderstr) <br/> throw new illegalargumentexception ("sorting direction" + orderstr + "invalid value "); <br/>}</P> <p> This. order = stringutils. lowercase (order); <br/>}</P> <p>/** <br/> * Whether to automatically execute the Count query to obtain the total number of records when querying an object, the default value is false, which is only valid when querying criterion. <br/> */<br/> Public Boolean isautocount () {<br/> return autocount; <br/>}</P> <p>/** <br/> * determines whether to automatically execute count to query the object and obtain the total number of records, valid only for criterion queries. <br/> */<br/> Public void setautocount (final Boolean autocount) {<br/> This. autocount = autocount; <br/>}</P> <p> // query result function </P> <p>/** <br/> * obtain the record list on the page. <br/> */<br/> public list <t> getresult () {<br/> return result; <br/>}</P> <p> Public void setresult (final list <t> result) {<br/> This. result = result; <br/>}</P> <p>/** <br/> * obtain the total number of records. The default value is-1. <br/> */<br/> Public int gettotalcount () {<br/> return totalcount; <br/>}</P> <p> Public void settotalcount (final int totalcount) {<br/> This. totalcount = totalcount; <br/>}</P> <p>/** <br/> * calculate the total number of pages based on pagesize and totalcount. The default value is-1. <br/> */<br/> Public int gettotalpages () {<br/> If (totalcount <0) <br/> return-1; </P> <p> int COUNT = totalcount/pagesize; <br/> If (totalcount % pagesize> 0) {<br/> count ++; <br/>}< br/> return count; <br/>}</P> <p>/** <br/> * Whether the next page exists. <br/> */<br/> Public Boolean ishasnext () {<br/> return (pageno + 1 <= gettotalpages ()); <br/>}</P> <p>/** <br/> * obtain the page number on the next page. The sequence number starts from 1. <br/> */<br/> Public int getnextpage () {<br/> If (ishasnext () <br/> return pageno + 1; <br/> else <br/> return pageno; <br/>}</P> <p>/** <br/> * Whether the previous page exists. <br/> */<br/> Public Boolean ishaspre () {<br/> return (pageno-1> = 1 ); <br/>}</P> <p>/** <br/> * obtain the page number on the previous page. The sequence number starts from 1. <br/> */<br/> Public int getprepage () {<br/> If (ishaspre () <br/> return pageno-1; <br/> else <br/> return pageno; <br/>}< br/>

 

Jqgrid is an Ajax request for data. When the backend receives a request, it first saves the paging parameter in the page, and then queries by page, finally, save the data in JSON format and return it to the grid.

Page <terminalusers> pageterminalusers = search (PAGE); // query the data obtained after the page <br/> List <Map <string, object> rows = new arraylist <Map <string, Object> (); // record <br/> for (terminalusers terminaluser: result) {<br/> int userid = terminaluser. getuserid (); <br/> string username = terminaluser. getUserName (); <br/> string departmentname = terminaluser. getdepartmentinfo () <br/>. getdepartmentname (); <br/> string domainna MEs = terminaluser. getdomainnames (); <br/> string computernames = terminaluser. getcomputernames (); <br/> // put the data to be displayed in an array of objects <br/> object [] Cell ={< br/> userid, <br/> username, <br/> departmentname, <br/> domainnames, <br/> computernames, <br/> "<a href ="/"mce_href ="/"" terminal-users! Input. Action? Entityid = "<br/> + userid <br/> +"/"> modify </a>" <br/> + "" <br/> + "<a href = "#" mce_href = "#" onclick =/"jqgriddel ('# list ', 'terminal-users! Delete. action ', "<br/> + userid + ") /"Title = 'delete'> Delete </a>" <br/> + "" <br/> + "<a href =/" terminal-users! Copy. Action? Copyid = "<br/> + userid +"/"> copy </a>" };< br/> Map <string, Object> map = new linkedhashmap <string, object> (); <br/> map. put ("ID", userid); <br/> map. put ("cell", cell); <br/> rows. add (MAP); <br/>}</P> <p> Map <string, Object> map = new hashmap <string, Object> (); <br/> map. put ("Total", pageterminalusers. gettotalpages (); <br/> map. put ("page", pageterminalusers. getpageno (); <br/> map. put ("records", pageterminalusers. getpagesize (); <br/> map. put ("rows", rows); <br/> // generate a JSON object <br/> jsonobject JSON = jsonobject. fromobject (MAP );

The time is tight and the writing is very simple. If you have any questions, please submit them.