Jqgrid's powerful table plugin application _jquery

Jqgrid is a powerful form based on jquery plug-ins, using Jqgrid can easily achieve front-end page and background data Ajax asynchronous communication, Jqgrid running very fast, can be very good application in some background management system to manage a large number of data.

Jqgrid Features:

Based on the jquery UI theme, developers can change different topics according to customer requirements.
Compatible with all current popular web browsers.
Ajax paging allows you to control the number of records displayed per page.
Supports Xml,json, array-type data sources.
Provides rich option configuration and method event interfaces.
Supports table sorting, which supports dragging columns and hiding columns.
Supports scrolling load data.
Supports real-time editing of data content.
Supports child tables and tree tables.
Supports multiple languages.
The key is free at the moment.

How to use Jqgrid

1, first, you need to Jqgrid official website Download the latest version of the package, you can download from here: http://www.trirand.com/blog/
2, in the Web directory, respectively, new CSS and JS two folders, to place the relevant CSS and JS files, create a index.html page file, with your favorite text editor open, input code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ 
Xhtml1-transitional.dtd "> 
 
 

3, add the following code in the body:

<table id= "List" ></table> 

#list用来加载数据列表, #page用来显示分页条的.

4, call the Jqgrid plug-in, add the following JS code in the page

$ ("#list"). Jqgrid ({ 
  caption: ' Mobile Product list ', 
  URL: ' server.php ', 
  datatype: "JSON", 
    colnames:[' number ', ' name ', ' Main screen Size ', ' operating system ', ' battery capacity ', ' Price (￥) ', ' Operation '], 
    colmodel:[ 
      {name: ' sn ', index: ' SN ', width:80,align: ' Center '}, 
      { Name: ' title ', Index: ' title ', width:180}, 
      {name: ' Size ', index: ' Size ', width:120}, 
    {name: ' OS ', Index: ' OS ', WIDTH:120}, 
      {name: ' Charge ', index: ' Charge ', width:100,align: ' Center '}, 
    {name: ' Price ', index: ' Price ', Width:80,align: ' Center '}, 
      {name: ' opt ', index: ' opt ', width:80, Sortable:false, align: ' center '}     
    ], 
    Rownum:10, 
    rowlist:[10,20,30], 
    Pager: ' #pager ', 
    sortname: ' id ', 
  autowidth:true, 
  height : 280, 
  viewrecords:true, 
  multiselect:true, 
  multiselectwidth:25, 
  sortable:true, 
  SortOrder: "ASC" 
 

This time we preview the index.html found that the form has been rendered and the data is populated. If you don't see any effect at this point, check that your file path is correct.

5, loading data.

We use PHP to read MySQL data and return JSON-formatted data to Jqgrid to display the data. We prepare a data sheet to record mobile phone product information, the structure is as follows:

CREATE TABLE IF not EXISTS ' products ' ( 
 ' id ' int (one) not null auto_increment, 
 ' sn ' varchar (%) not NULL, 
 ' TITL  E ' varchar NOT NULL, 
 ' size ' varchar is not NULL, 
 ' OS ' varchar is not NULL, 
 ' charge ' varchar (d) DEFAULT NULL, 
 ' screen ' varchar (%) default NULL, 
 ' design ' varchar ' default NULL, ' Price 
 ' int (x) not null 
 , ' Addtime ' datetime not NULL 
 PRIMARY KEY (' id ') 

Next, read the data in the server.php and output the JSON data:

Connection Database include_once (' connect.php '); 
$page = $_get[' page ']; 
$limit = $_get[' rows ']; 
$sidx = $_get[' Sidx ']; 
$sord = $_get[' Sord ']; 
if (! $sidx) $sidx = 1; 
$result = mysql_query ("SELECT count (*) as COUNT from the products where deleted=0"); 
$row = Mysql_fetch_array ($result, MYSQL_ASSOC); 
$count = $row [' count ']; 
if ($count > 0) {$total _pages = ceil ($count/$limit); 
else {$total _pages = 0; 
if ($page > $total _pages) $page = $total _pages; 
$start = $limit * $page-$limit; 
$SQL = "SELECT * from the products WHERE deleted=0 order by $sidx $sord LIMIT $start, $limit"; 
$result = mysql_query ($SQL) or Die ("couldn t execute query.". Mysql_error ()); 
$responce->page = $page; 
$responce->total = $total _pages; 
$responce->records = $count; 
$i = 0; 
  while ($row = Mysql_fetch_array ($result, Mysql_assoc)) {$responce->rows[$i] [' id '] = $row [id]; 
  $opt = "<a href= ' edit.php ' > Modify </a>"; $responce->rows[$i] [' cell '] = Array ($row [SN],
    $row [title], $row [size], $row [OS], $row [charge], $row [price], $opt); 
$i + +;  echo Json_encode ($responce);

At this point, if you enter data into the datasheet, you can display the datasheet on the page, and then you can sort, paging. Next I will jqgrid the choice of the description of the written, shared with you, and then from the actual application of the project, for example to increase the deletion, view, find data and other business applications.