Laboratorija za Elektronsko poslovanjeSKRIPTA IZ PREDMETA INTERNET TEHNOLOGIJEjqGrid skriptaNovembar 2013Sadraj2Sadraj

3Uvod

3Funkcionalnosti jqGrid-a

5Instalacija jqGrid-a u okviru web projekta

7Princip rada jqGrid-a

9Implementacija standardnog grid-a

9Klijentski deo

11Serverski deo

15Operacije nad gridom

17Insert

18Update

19Delete

20Search

UvodjqGrid je reenje za AJAX reprezentaciju i manipulaciju tabelarnih podataka na vebu. jqGrid koristi jQuery Java Script Library i razvijen je kao plugin za jQuery. S obzirom da je grid reenje klijentske strane gde se podaci uitavaju dinamiki kroz AJAX poziv, ovo reenje se moe integrisati sa bilo kojom serverskom tehnologijom (PHP,ASP, Java Servlets, JSP, ColdFusion, andPerl). jqGrid je tehnologija razvijena od strane Trirand Inc. koja je se bavi razvojem veb komponenata i podrava otvorene standard, kao to su: jQuery, ThemeRoller, & jQuery UI. Kljuni zahtevi prilikom razvoja ovog reenja bili su: brzina i nezavisnost od tehnologija serverske strane i tehnologija za upravljanje bazama podataka.

jqGrid arhitektura

Funkcionalnosti jqGrid-ajqGrid omoguava veliki broj funkcionalnosti za upravljanje i manipulaciju podacima putem AJAX poziva. Primeri su dostupni na adresi http://www.trirand.com/blog/jqgrid/jqgrid.html.Osnovni koncepti na kojima se zasnivaju jqGrid funkcionalnosti su:

CSS zasnovane teme za prikaz gridova - jQgrid je kompatibilan sa UI Theming (jQuery system predefinisanih tema). Diveloperi mogu menjati izgled gridova definisanjem sopstvenog CSS UI frejmvorka

brzina - nove verzije rendering engine-a ubrzava uitavanje 5-10 puta

paging - prikazivanje podataka stranicu po stranicu. Podaci se uitavaju tek kada korisnik zahteva odreenu stranicu

kolone ija veliina je fleksibilna

sortiranje po razliitim kriterijumama i razliitim tipovima varijabli

upravljanje dogaajima

autoloading podataka kada korisnik uradi skrol

laka integracija sa bilo kojom tehnologijom serverske strane

podrka za sve brauzere

viejezinost - trenutno je podrano 20ak jezika

podrka za XML, JSON i nizove kao izvore podataka. Mogue je definisati i custom tipove podataka

subgridsKljune funkcionalnosti su:Formatting - Napredne funkcionalnosti za formatiranje sadraja u elijama. Predefinisani tipovi su: integer, number, date, currency, links, check boxes and etc.

Inline i Cell editing - Mogunost auriranja bilo koje elije u bilo kom redu inline

Form editing - Kreiranje formi ad hoc, za editovanje ili unos podataka:

Searching i filtering - Pretraga i filterisanje po razliitim kriterijumima

Tree grids

Import/Export - mogunost importa ili eksporta celokupne konfiguracije grida u odgovarajui format: xml, json, xmlstring, jsonstring.

Instalacija jqGrid-a u okviru web projekta1) Potrebno je preuzeti jqGrid sa adrese http://www.trirand.com/blog/?page_id=6

2) Potrebno je preuzeti jQuery UI sa adrese http://jqueryui.com/download/Nakon raspakivanja fajlova iz dve preuzete arhive, potrebno je napraviti veb projekat u kojem e se koristiti jqGrid. U okviru projekta treba napraviti dva folder js i css. kopirati fajl ui.jqgrid.css iz jqGrid arhive u folder css u okviru projekta. kopirati sve fajlove iz js foldera jqGrid arhive u folder js u okviru projekta. kopirati sve fajlove iz css foldera UI Themes arhive u folder css u okviru projekta.Nakon ovoga, struktura projekta bi trebalo da izgleda ovako: /myproject/css/

ui.jqgrid.css

/ui-lightness/

/images/

jquery-ui-1.7.2.custom.css

/myproject/js/

/i18n/

grid.locale-bg.js

list of all language files

.

Changes.txt

jquery-1.4.2.min.js

jquery.jqGrid.min.js

Da bi se mogao koristiti jqGrid u okviru neke stranice, potrebno je da kod izgleda ovako:

My First Grid

...

Princip rada jqGrid-a

Postoje dva spekta rada sa tabelarnim podacima: reprezentacija na klijentskoj strain i reprezentacija na serverskoj strani. jqGrid je komponenta koja predstavlja podatke u tabelarnom zapisu. Jqgrid korist AJAX poziv da bi dobio podatke i zatim ih predstavlja koristei Column Model (colModel). jqGrid grid se sastoji iz 4 dela: Caption layer - informacije o podacima koji su u gridu

Header layer - informacije o kolonama, labelama i sl.

Body layer - podaci koji su dobijeni sa servera

Navigation layer - deo za navigaciju kroz podatke

Grid moe sadrati i dodatne podatke i zapise, kao to su treegrid, subgrid i grupe podataka.

Implementacija standardnog grid-aKlijentski deoFajl za prikaz podataka u gridu, na primer grid.html

My First Grid

html, body {

margin: 150;

padding: 0;

font-size: 75%;

}

$(function () {

$("#list").jqGrid({

url: "server.php",

datatype: "xml",

mtype: "GET",

colNames: ["Inv No", "Date", "ClientID", "Amount", "Tax", "Total", "Notes"], colModel: [

{ name: "invid", width: 55 },

{ name: "invdate", width: 90 },

{ name: "client_id", width: 90 },

{ name: "amount", width: 80, align: "right" },

{ name: "tax", width: 80, align: "right" },

{ name: "total", width: 80, align: "right" },

{ name: "note", width: 150, sortable: false }

],

autowidth: true,

pager: "#pager",

rowNum: 10,

rowList: [10, 20, 30],

sortname: "invid",

sortorder: "desc",

viewrecords: true,

gridview: true,

autoencode: true,

caption: "My first grid"

});

});

Lista najznaajnijih jqGrid parametara:url - izvor odakle se uzimaju podaci za prikaz u gridudatatype - tip podataka koji e biti preuzet sa servera: JSON, XML, nizovimtype - koja metoda se koristi za AJAX poziv: get ili postcolNames - niz u koji se smetaju naslovi kolonacolModel - ovo je najznaajniji deo grida, poto se ovde definiu nazivi kolona sa podacima (name, index, width, align, sortable)pager - HTML element na stranici u okviru kojeg e biti smeten deo za navigaciju gridomrowNum - koliko redova treba da se prikae na stranicirowList - podeavanja interval za prikaz redova u pager-usortname - podeavanje inicijalne kolone za sortiranjeviewrecords - da li da se prikae ukupan broj redova u griducaption - naslov gridaKompletna lista svih parametara je dostupna ovde.jqGrid prihvata podatke od servera u odreen formatu: XML, JSON, niz. Standardni oblik XML fajla koji jqGrid oekuje sa servera izgleda ovako:

cellcontent cell content]]>

cellcontent cell content]]>

Osnovni elementi su:

rows - root element

page - broj stranice

total - ukupan broj stranica

records - ukupan broj zapisa iz upita

row - jedan red u gridu

cell - podaci za prikaz. Moe se koristiti i CDATA. Na taj nain se mogu dodati slike, checkbox-ovi, linkovi i sl.Serverski deo

Napraviti bazu podataka i u njoj kreirati tabelu pomou upita:

CREATE TABLE invheader (

invid int(11) NOT NULL AUTO_INCREMENT,

invdate date NOT NULL,

client_id int(11) NOT NULL,

amount decimal(10,2) NOT NULL DEFAULT '0.00',

tax decimal(10,2) NOT NULL DEFAULT '0.00',

total decimal(10,2) NOT NULL DEFAULT '0.00',

note char(100) DEFAULT NULL,

PRIMARY KEY (invid)

);

Fajl za podeavanje parametara za konekciju sa bazom dbconfig.php

PHP fajl koji slui za dostavljanje podataka iz baze u XML formatu server.php izgleda ovako:

Ukoliko su svi fajlovi pravilno prekopirani, trebalo bi da stranica izgleda kao na slici:

Ukoliko je izlaz iz poslovne logike JSON, onda u fajlu grid.html, treba izmeniti sledeu liniju koda:datatype: "xml" u datatype: "json".PHP fajl koji slui za dostavljanje podataka iz baze u JSON formatu server.php izgleda ovako: