Jqgrid's powerful table plug-in application

Jqgrid's powerful table plug-in application_jquery

WBOY

Release： 2016-05-16 15:28:10

Original

1330 people have browsed it

jqGrid is a powerful table plug-in based on jQuery. Using jqGrid, you can easily implement ajax asynchronous communication between the front-end page and the background data. jqGrid runs very fast and can be well used in some background management systems to manage a large number of data situation.

jqGrid features:

Based on jquery UI theme, developers can change different themes according to customer requirements.
Compatible with all current popular web browsers.
Ajax paging can control the number of records displayed on each page.
Supports data sources in the form of XML, JSON, and arrays.
Provides rich option configuration and method event interface.
Supports table sorting, dragging columns, and hiding columns.
Supports scrolling data loading.
Supports real-time editing and saving of data content.
Supports subtables and tree tables.
Supports multiple languages.
The most important thing is that it is free at the moment.

How to use jqGrid

1. First, you need to download the latest version of the package from the jqGrid official website. You can download it from here: http://www.trirand.com/blog/
2. Create two new css and js folders in the WEB directory, place the relevant css and js files, create an index.html page file, open it with your favorite text editor, and enter the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid</title> 
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
</head> 
<body> 
... 
</body> 
</html>

Copy after login

3. Add the following code to the body:

<table id="list"></table> 
<div id="pager"></div>

Copy after login

#list is used to load the data list, and #page is used to display the paging bar.

4. Call the jqGrid plug-in and add the following js code to the page

$("#list").jqGrid({ 
  caption: '手机产品列表', 
  url:'server.php', 
  datatype: "json", 
    colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(￥)','操作'], 
    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" 
 });

Copy after login

At this time, when we preview index.html, we find that the table shape has been rendered, and only the data needs to be filled. If you still don't see any results at this point, please check that your file path is correct.

5. Load data.

We use php to read mysql data and return data in json format to jqGrid to display the data. We prepare a data table to record mobile phone product information. The structure is as follows:

CREATE TABLE IF NOT EXISTS `products` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `sn` varchar(10) NOT NULL, 
 `title` varchar(60) NOT NULL, 
 `size` varchar(30) NOT NULL, 
 `os` varchar(50) NOT NULL, 
 `charge` varchar(50) DEFAULT NULL, 
 `screen` varchar(50) DEFAULT NULL, 
 `design` varchar(50) DEFAULT NULL, 
 `price` int(10) NOT NULL, 
 `addtime` datetime NOT NULL 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Copy after login

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

//连接数据库 
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 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 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'>修改</a>"; 
  $responce->rows[$i]['cell'] = array ( 
    $row[sn], 
    $row[title], 
    $row[size], 
    $row[os], 
    $row[charge], 
    $row[price], 
    $opt 
  ); 
  $i++; 
} 
echo json_encode($responce);

Copy after login

At this point, if you enter data into the data table, you can display the data table on the page, and then you can sort and paging. Next, I will organize the jqGrid option description into a document and share it with everyone. Then, starting from the actual application of the project, I will give examples to explain the application of adding deletion, viewing, searching data and other services.