jQuery

Flexible Datentabellen für jede Website mit dem jQuery-Plugin pqGrid

14. Januar 2013
von

Das moderne Plugin für jQuery, das Sie in diesem Beitrag kennen lernen, hört auf verschiedene Namen. Offenbar kann sich der Entwickler Paramvir Dhindsa nicht so recht entscheiden. Wenn Sie im Netz unterwegs sind, könnten Sie unter den Bezeichnungen ParamQuery, jQuery Grid Plugin oder pqGrid darauf stoßen. Es handelt sich stets um das gleiche Stück Software. Und ganz egal, welchen Namen es nun schlussendlich offiziell trägt, es lohnt auf jeden Fall einer näheren Betrachtung.

Datentabellen, die sogar im IE 6 funktionieren

pqGrid – ich verwende einfach mal diesen Namen, weil der kürzeste ist – ist ein kleines jQuery-Plugin in der Tradition von Excel oder Google Sheets. Es wandelt Daten in Tabellen mit unterschiedlicher Funktionalität. Von reinem Anschauen bis zum vollen Editieren kann man seinen Tabellen jegliche Möglichkeit angedeihen lassen.

pqGrid steht unter der liberalen MIT-Lizenz, sowohl für private, wie auch kommerzielle Projekte auf der Homepage des Tools und auf Github zum Download zur Verfügung. Die Dokumentation ist ausgesprochen detailliert. Alle Möglichkeiten sind mit Beispiel-Quelltext und Live-Demos versehen und ausführlich erläutert. pqGrid setzt neben jQuery auch die jQuery UI voraus, auf dessen Design es weitestgehend basiert.

Der Entwickler verspricht, dass die Lösung in allen großen Browsern funktioniert. Er will sogar den Internet Explorer 6 positiv auf Kompatibilität getestet haben. Das wäre ja mal ein Ding…


Homepage des Projekts

pqGrid: Verschiedene Datenquellen flexibel einzubinden

pqGrid entkoppelt das Datenmodell (Model) von der Präsentation (View). So ist das Tool in der Lage, die Ausgangsdaten in völlig restrukturierter Form zu verarbeiten und darzustellen. Die so gewonnene Flexibilität ermöglicht auch responsive Ansätze. Ähnlich wie in Excel lassen sich Spalten fixieren, nur der Rest scrollt. Nicht nur im responsiven Webdesign setzt sich diese Art der Darstellung aus Platzgründen durch. Auch inhaltlich ergibt es häufig genug Sinn, die wesentlichen Informationen ständig sichtbar zu lassen.

Über API-Funktionen kann pqGrid völlig frei konfiguriert werden. Standarddatenquelle für eine Tabelle ist das Array. In der Praxis dürfte man seltener auf die Speisung als Array zurück greifen wollen, muss man doch die Inhalte so im Quelltext übergeben. Das hat man nicht so gern, wenn es sich vermeiden lässt. Da ist es gut, dass auch HTML-Tables oder XML-Dateien als Quelle dienen können.

Von der reinen sortierten Anzeige der Daten im Frontend bis hin zu umfassenden Bearbeitungsfunktionen kann pqGrid den Anforderungen des konkreten Projekts genügen. Der Basisaufruf ist nicht schwierig. Zunächst muss pqGrid mit seinen Abhängigkeiten eingebunden werden:

1
2
3
4
5
6
7
8
   <!--jQuery dependencies-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
 
    <!--ParamQuery grid files-->
    <link rel="stylesheet" href="path to pqgrid.min.css" />
    <script type="text/javascript" src="path to pqgrid.min.js" />

Definiert man die Datequelle über ein Array sähe das beispielsweise so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
 
$(function(){
    var data = [ [1,'Exxon Mobil','339,938.0','36,130.0'],
            [2,'Wal-Mart Stores','315,654.0','11,231.0'],
            [3,'Royal Dutch Shell','306,731.0','25,311.0'],
            [4,'BP','267,600.0','22,341.0'],
            [5,'General Motors','192,604.0','-10,567.0'],
            [6,'Chevron','189,481.0','14,099.0'],
            [7,'DaimlerChrysler','186,106.3','3,536.3'],
            [8,'Toyota Motor','185,805.0','12,119.6'],
            [9,'Ford Motor','177,210.0','2,024.0'],
            [10,'ConocoPhillips','166,683.0','13,529.0'],
            [11,'General Electric','157,153.0','16,353.0'],<br />
            [12,'Total','152,360.7','15,250.0'],<br />
            [13,'ING Group','138,235.3','8,958.9'],
            [14,'Citigroup','131,045.0','24,589.0'],
            [15,'AXA','129,839.2','5,186.5'],
            [16,'Allianz','121,406.0','5,442.4'],
            [17,'Volkswagen','118,376.6','1,391.7'],
            [18,'Fortis','112,351.4','4,896.3'],
            [19,'Crédit Agricole','110,764.6','7,434.3'],
            [20,'American Intl. Group','108,905.0','10,477.0']];
 
var obj = {};
obj.width = 700;
obj.height = 400;
obj.colModel = [{title:"Rank", width:100, dataType:"integer"},
    {title:"Company", width:200, dataType:"string"},
    {title:"Revenues ($ millions)", width:150, dataType:"float", align:"right"},
    {title:"Profits ($ millions)", width:150, dataType:"float", align:"right"}];
obj.dataModel = {data:data};
$( "#grid_array" ).pqGrid( obj );                                
});
</script>

Innerhalb des Body-Tags gilt es nun nur noch ein Div als Platzhalter zu definieren:

1
<div id="grid_array"></div>

Ein mitgeliefertes CSS-File vermittelt anschaulich, wie sich die optische Anmutung der dargestellten Tabellen drastisch verändern lässt und taugt als Startpunkt für eigene Ausflüge in Farb-Abenteuer, zum Beispiel dieses:

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , , ,

Ein Kommentar zu „Flexible Datentabellen für jede Website mit dem jQuery-Plugin pqGrid
  1. Michael am 14. Januar 2013 um 12:12

    Wie sieht es denn mit Pagination Events oder ähnlichem aus? Ziel wäre es, große Datenmengen nur in Häppchen ins Grid zu laden. Sortierung würde in diese Fall serverseitig erfolgen müssen.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!