Dojo Tutorial mit Grid – Teil 3: Grid erstellen
Jetzt geht’s um Grid… endlich, nachdem wir uns so lange mit den Formalitäten beschäftigt haben 
3.6 Das dojo.grid in Javascript
Wenn wir in das Suchfeld unseres Formulars den Namen “Petersen” eingegeben, gibt uns die Webserver einen JSON-String wieder, wo alle Personen dieses Namens verzeichnet sind. Diesen gilt es jetzt auszuwerten.
Kehren wir also zu unserer Datei gridtut.js zurück.
Mit der Anweisung “var ergebnis = eval(‘(‘+data+‘)’);” wird aus dem Text-String ein Array erzeugt und in der Variable “ergebnis” gespeichert.
Mit diesem Array können wir nun das Grid befüllen… doch halt, wir haben ja noch gar keins :-O
Als erstes müssen wir dem Grid sagen, wie Spalten wir verwenden wollen – in der Dojo-Terminologie ein “View”. Für unser Beispiel folgende View:
var view1 = {
cells: [
[
{name: 'Kundennummer', field:'lfdnr'},
{name: 'Vorname', field:'vname'},
{name: 'Nachname', field:'nname'},
{name: 'Beruf', field:'beruf'},
{name: 'Alter', field:'alter'}
]
]
};
Die Eigenschaft cells beinhaltet ein Array (daher die eckigen Klammern), in der Wieder kleine Objekte stecken. Deren Eigenschaft “name” gibt den Spaltennamen an, der angezeigt werden soll. Die Eigenschaft “field” bezeichnet den Namen im Array (richtiger – den Schlüssel zum passenden Wert).
Jetzt noch ein paar globale Variablen, damit wir schön bequem von allen Funktionen auf das Grid zugreifen können und zu guter letzt noch ein Dummy-Datensatz:
var ddata;
var grid;
var store;
var layout = [ view1 ];
var dummydaten = { "identifier": 'lfdnr',
"items":[
{ "lfdnr": 0,
"vname":"Keine Daten",
"nname":"vorhanden ",
"beruf": "-",
"alter": 0}
]
};
Hier sind nun zwei spannende Dinge zu sehen (naja, spannend für Informatiker vielleicht 
) Das Dojo-Grid ist sehr flexibel und unterstützt zum Beispiel auch Spalten, Sub-Spalten usw. Das Spalten-Layout teilen wir dem Grid gleich mit der Variable “layout” mit und übergeben das oben erstellte View. Die eckigen Klammern müssen übrigens sein, da das Layout ein Array erwartet.
Zum leichteren Debuggen erstellen wir auch gleich noch einen Dummydatensatz, damit bei der ersten Fehlersuche der Webserver ausgeschlossen werden kann. Außerdem sieht man gleich noch, wie man Daten für das Grid aufbereiten sollte. Wir geben mit der Eigenschaft “identifier” an, wo sozusagen der Primärschlüssel des Datensatzes liegt.
Wir brauchen pro Datensatz also immer eine eindeutige Eigenschaft, ich habe sie hier “lfdnr” genannt, so sticht sie besser heraus. In “items” können wir die Daten nun einbetten.
Als Datensatz wählen wir eine Leermeldung, dass keine Daten vorhanden wären.
Das ist gleichermaßen praktisch, weil wir das Grid beim Laden der Seite mit Leermeldung erstellen und beim Nachladen über die Suchfunktion Zeit sparen, da das Grid nur noch aktualisiert wird.
Folgende Funktion erstellt das Grid:
function createGrid(meineDaten) {
store = new dojo.data.ItemFileReadStore({jsId: 'jsonStore',data: meineDaten});
ddata = new dojox.grid.data.DojoData(null,store,{jsId: 'model', clientSort: true, query: { lfdnr: '*' }});
grid = new dojox.Grid({id: "DasGrid", model: ddata});
grid.setStructure(layout);
dojo.byId("gridContainer").appendChild(grid.domNode);
grid.startup();
}
Hier geschieht so viel, dass wir das besser Zeilenweise durchgehen 
Wir greifen übrigens auf die globalen Variablen von vorhin zu.
Zeile 2: Als erstes nutzen wir das Dojo-Datenmodell und erstellen einen ItemFileReadStore. Der bekommt die Javascript-Id “jsonStore” (wie erwähnt, Dojo mag Ids). Als zweiten Parameter übergeben wir dem Store das Javascript Array. Damit die Funktion aber universell bleibt, lösen wir das über den Parameter “meineDaten”.
Zeile 3: Wir haben nun den ItemFileReadStore, jetzt müssen wir das Grid damit irgendwie verbinden. Für die Datenanbindung kennt das Grid das Objekt grid.data.DojoData. und grid.data.Table.
Table ist ganz leicht und grundlegend. Hierfür bräuchte man auch keinen Readstore eröffnen. Man könnte einfach das Array direkt übergeben (auch ohne die Kapselung in Identifier und Items).
// Das hier reicht uns leider nicht... ddata = new dojox.grid.data.Table(null, dummydaten);
Aber was nicht schwierig ist, das taugt auch nichts Also nehmen wir DojoData, und übergeben unseren Store. Die Eigenschaft “clientSort” ermöglicht es, dass er Nutzer im Browser (lokal) sortieren kann. An der Eigenschaft query sieht man schon die Verbundenheit zur Datenbankterminologie. Wir sagen dem Modell, dass wir alle eindeutigen Datensätzen haben wollen, die sich in der laufenden Nummer unterscheiden – ein clientseitiger “SELECT *” sozusagen.
Zeile 4: Jetzt wird das Grid erstellt, bekommt eine Id und sowohl den Store, als auch das Modell übergeben – schließlich haben wir das ja eben mühevoll erstellt.
Zeile 5: Auch geben wir mit “setStructure” noch das Layout an.
Zeile 6: Wir haben bereits in der HTML-Datei einen Platzhalter für das Grid eingebaut (den <div>-Container), an diesen hängen wir nun das Grid.
Zeile 7: Jetzt wird endlich das Grid gestartet.
So… jetzt könnte ein Grid erstellt werden. Damit das auch passiert müssen wir natürlich die Funktion aufrufen – am besten in der Funktion init.
createGrid(dummydaten);
Jetzt fehlt nur noch ein winziges bisschen CSS, dass in die HTML-Datei kommt.:
<style type="text/css">
div.gridDiv {
width: 600px;
height: 450px;
}
</style>
Leider müssen wir dem Grid nämlich sagen, wie viel Platz es einnehmen soll. Sonst sieht man gar nichts – eine sehr beliebte Quelle der Frustration
Wenn wir jetzt gut waren, erscheint folgendes:
Step-6 zum Runterladen: Gridtut-6-html Gridtut-6-js
Alles weitere demnächst im nächsten Teil…
