Fluent jqGrid HTML Helper

Door Daan l, 17 jaar geleden, 6.670x bekeken

Om de mogelijkheden van de jqGrid HTML Helper te demonstreren heb ik een voorbeeld applicatie opgezet.

De voorbeeld applicatie is hier http://jqgrid.clockspeed.nl/ te vinden en de broncode is hier https://github.com/daanl/jqGrid-Helper-PHP te downloaden (voor niet git gebruikers, klik op downloads en je krijgt een popup scherm om de broncode te downloaden).

Mocht je alleen de Helper willen gebruiken heb je alleen het bestand jqGrid.php nodig.

Benodigdheden
Om jqGrid te gebruiken heb je minimaal het volgende nodig (dit zit ook allemaal in de voorbeeld applicatie):

* jqGrid 3.6.5 of nieuwer, je kan de nieuwste versie downloaden op de jqGrid download pagina, je hebt minimaal Grid Base, formatter en custom nodig (http://www.trirand.com/blog/?page_id=6
* jQuery 1.3 of nieuwer, je kan de laatste versie downloaden op http://jquery.com
* jQuery theme, je kan een eigen thema maken op http://jqueryui.com/themeroller
* De jqGrid PHP HTML Helper te downloaden via github http://github.com/daanl/jqGrid-Helper-PHP.

Installatie & Gebruik
Na het downloaden van de HTML Helper kan je direct aan de slag. Onderstaande code geeft een simpel voorbeeld.

Code (php)

1
2
3
4
5
6
7
8
9
10
11

<?php echo Grid::create('myFirstGrid')
    ->addColumn(Column::create('film_id'))
    ->addColumn(Column::create('title')
      ->setLabel('Title'))
    ->setUrl('datafeed.php')
    ->setRowNum(10)
    ->setRowList(array(10, 20, 30))
    ->setPager('mypager')
    ->setCaption('My first grid')
    ->setWidth(840)
?>

De methode create wordt altijd als eerste aangeroepen op het grid object, in de parameter wordt het id van de grid meegegeven. Dit grid id wordt in het grid gebruikt om een tabel met het opgegeven id te genereren. Alle andere opties, functies en events zijn vervolgens beschikbaar via “Method Chaining” ook wel bekend als Fluent Interface, de volgorde van de aanroepen heeft geen invloed op het resultaat.

Doormiddel van SetUrl('url') kan je de url voor de AJAX request specificeren.

Voorbeeld applicatie:

1. Download de voorbeeld applicatie op github (download source https://github.com/daanl/jqGrid-Helper-PHP) en pak deze uit
2. Zet de test database op, met behulp van de twee SQL bestanden: sakila-schema.sql en sakila-data.sql (te vinden in de voorbeeld applicatie).
3. Verander de database connectie gegevens in datafeed.php
4. Ga naar index.php en je hebt een werkend voorbeeld.

Om het makkelijk te maken heb ik de helper ook hierbij gevoegd!

Mocht je nog vragen of opmerkingen hoor ik het graag.

Orginele blog artikel -> http://www.webpirates.nl/webpirates/daan-le-duc/50-fluent-jqgrid-helper-for-php