suchen

Heim >Web-Frontend >js-Tutorial >Jqgrids leistungsstarkes Tabellen-Plug-in application_jquery

Jqgrids leistungsstarkes Tabellen-Plug-in application_jquery

WBOY
WBOYOriginal
2016-05-16 15:28:101352Durchsuche

jqGrid ist ein leistungsstarkes Tabellen-Plug-in, das auf jqGrid basiert. Mit jqGrid können Sie problemlos eine asynchrone Ajax-Kommunikation zwischen der Front-End-Seite und den Hintergrunddaten implementieren, die sehr schnell ausgeführt wird und in einigen Hintergrundverwaltungssystemen gut verwendet werden kann um eine große Anzahl von Datensituationen zu verwalten.

jqGrid-Funktionen:

Basierend auf dem Jquery-UI-Theme können Entwickler verschiedene Themes entsprechend den Kundenanforderungen ändern.
Kompatibel mit allen gängigen Webbrowsern.
Ajax-Paging kann die Anzahl der auf jeder Seite angezeigten Datensätze steuern.
Unterstützt Datenquellen in Form von XML, JSON und Arrays.
Bietet umfangreiche Optionskonfiguration und Methodenereignisschnittstelle.
Unterstützt das Sortieren von Tabellen, das Ziehen von Spalten und das Ausblenden von Spalten.
Unterstützt das Laden von Bildlaufdaten.
Unterstützt das Bearbeiten und Speichern von Dateninhalten in Echtzeit.
Unterstützt Untertabellen und Baumtabellen.
Unterstützt mehrere Sprachen.
Das Wichtigste ist, dass es im Moment kostenlos ist.

So verwenden Sie jqGrid

1. Zuerst müssen Sie die neueste Version des Pakets von der offiziellen jqGrid-Website herunterladen. Sie können es hier herunterladen: http://www.trirand.com/blog/
2. Erstellen Sie zwei neue CSS- und JS-Ordner im WEB-Verzeichnis, platzieren Sie die relevanten CSS- und JS-Dateien, erstellen Sie eine index.html-Seitendatei, öffnen Sie sie mit Ihrem bevorzugten Texteditor und geben Sie den Code ein: 

<!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>

3. Fügen Sie dem Text den folgenden Code hinzu: 

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

#list wird zum Laden der Datenliste und #page zum Anzeigen der Paging-Leiste verwendet.

4. Rufen Sie das jqGrid-Plugin auf und fügen Sie den folgenden js-Code zur Seite hinzu 

$("#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" 
 });

Zu diesem Zeitpunkt stellen wir bei der Vorschau von index.html fest, dass die Tabellenform gerendert wurde und nur die Daten ausgefüllt werden müssen. Sollten Sie zu diesem Zeitpunkt immer noch keine Ergebnisse sehen, überprüfen Sie bitte, ob Ihr Dateipfad korrekt ist.

5. Daten laden.

Wir verwenden PHP, um MySQL-Daten zu lesen und Daten im JSON-Format an jqGrid zurückzugeben, um die Daten anzuzeigen. Wir bereiten eine Datentabelle zur Aufzeichnung von Mobiltelefonproduktinformationen vor. Die Struktur ist wie folgt: 

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;

Als nächstes lesen Sie die Daten in server.php und geben die JSON-Daten aus: 

//连接数据库 
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);

Wenn Sie an dieser Stelle Daten in die Datentabelle eingeben, können Sie die Datentabelle auf der Seite anzeigen und dann sortieren und blättern. Als Nächstes werde ich die Beschreibung der jqGrid-Option in einem Dokument organisieren und mit allen teilen. Anschließend werde ich, ausgehend von der eigentlichen Anwendung des Projekts, Beispiele geben, um die Anwendung des Hinzufügens von Lösch-, Anzeige- und Suchdiensten sowie anderer Dienste zu erläutern.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Sortieralgorithmus mit halber Einfügung Beispiel_Javascript-KenntnisseNächster Artikel：JS-Sortieralgorithmus mit halber Einfügung Beispiel_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen