Usage of the "Jqgrid" Jqgrid API

Jqgrid is a jquery plug-in that handles table displays, supporting paging, scrolling loading, searching, locking, dragging, and a series of routine operations on the table. The following is a recent project in the practice of Jqgrid finishing

1, introduced to the project to

Jqgrid's homepage is in http://www.trirand.com/blog/, which provides downloads, demos, wikis, and more detailed documentation. Especially http://www.trirand.com/jqgridwiki/doku.php in the development of a lot of attention. OK, after downloading, you need to introduce in the header file of the project:

JS code <link rel= "stylesheet" type= "Text/css" href= "$request. Contextpath/script/jqgrid/css/ui.jqgrid.css"/> ; script type= "Text/javascript" src= "$request. Contextpath/script/jqgrid/js/jquery.jqgrid.min.js" ></script > <script type= "text/javascript" src= "$request. Contextpath/script/jqgrid/js/i18n/grid.locale-cn.js" >< /script>

Jqgrid uses the jQueryUI CSS theme, needs to download the corresponding topic http://jqueryui.com/themeroller/find the corresponding topic download, if the DatePicker control is used, also need UI. As follows: JS code <link rel= "stylesheet" type= text/css "href=" $request. contextpath/script/jqgrid/css/ Jquery-ui-1.8.22.custom.css "media=" All "/> <script type=" Text/javascript "src=" $request. contextpath/script/ Ui/jquery-ui-1.8.22.custom.min.js "></script> <script type=" Text/javascript "src=" $request. ContextPath /script/ui/jquery.ui.datepicker-zh-cn.js "></script>

2, use in the page

Use in the page such as VM, JSP, need two basic element JS code <table id= "Jqgridid" ></table>//This is a must <div id= "pager" ></div>/ /This is the information that displays the paging bar, as needed

Then JS in JS code $ ("#jqGridId"). Jqgrid ({options})

This is one of the most basic settings, focusing on the options here, including basic parameter settings and functions. Specifically visible official website documents: wrote Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

3. Parameters (Options)

A parameter is a property that sets various attributes in the Jqgrid object, and the specific settings are set in the Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

The following example lists the commonly used parameters and describes the parameters: JS code    $ ("#jqGridId"). Jqgrid ({        url : s2web.appurl +  "Jq/queryware.action",        datatype: " Local ",  //not loaded for local, support Json,xml         mtype: " POST ",         colnames:[' number ',  ' author ',  ' ISBN ', ' weight ', ' description '], //header          colmodel:[ //here will be based on the index to resolve the properties of the root object in Jsonreader, fill cell            {name: ' id ',  index: ' id ',  width:55, align: ' Center ",sortable:false},           {name: ' Author ',  index: ' Author ', width:100, sortable:false},             {name: ' ISBN ',  index: ' ISBN ',  width:120,align: "Right", sortable:false},       &nbSp;    {name: ' Weight ',  index: ' Weight ',  width:80,align: "Center",  sortable: false},            {name: ' WareDesc ',  index: ' Waredesc ', width:400, sortable:false}        ],        width:  ' Auto ',  //digital  &  ' auto ', ' 100% '          height: 200,        rownum: 5, //number of records per page         rowlist:[5, 10,20,30], //The number of records per page optional list          pager:  ' #pager2 ',  //paging label divid        viewrecords :  true, //display the number of records information, if this is set to False, the following will not show  recordtext:  "{0} to {1},  total {2} records",  //default display as {0}-{1}  a total of {2}  scroll: false, //scrolling page, the page will not display when set to True        /** Here is the default setting for sorting, which will be based on the listHeader click Sort when covering */ sortable: false,        sortname:  "Warename",         sortorder:  "desc",            caption: "Product List",  //display query results table title         rownumbers: true,  //set list display serial number, you need to note that in Colmodel can not use RN as index        rownumwidth: 20,  //sets the width of the display ordinal number, the default is 25        multiselect: true, //multi-selection box          multiboxonly: true, //only supports radio when clicking on the table row, but only when clicking the checkbox. Need multiselect=true is valid         prmnames : { //if the current query entity is ware, These can be set in the query object's superobject             page:  " Waredetail.page ",            rows: " waredetail.rows ",            sort:  "Waredetail.sidx",             order:  "Waredetail.sord",             search:  "Waredetail.search"         },        jsonreader:{ //server returns JSON resolution settings              root:  "List",  //for data lists in JSON              page:  "page",            total:  " Totalpage ",            records: " TotalCount ",            repeatitems: false,         }   });       $ ("#jqGridId"). Jqgrid (' Navgrid ', ' #pager2 ' {edit : False,add:False,del:false,search:false})//This sets the information for the page bar display   

The meaning of each of the above parameters has been explained, the detailed description of the above documents can be seen.

prmnames: These parameters are passed to the server side each time as a request parameter, generally maintaining paging, sorting, and so on. You can declare these properties uniformly in a query object, consistent with the settings here. such as: Java code