Die Flexigrid-Tabellen für jQuery sind, wie der Name es schon andeutet, recht flexibel. Ein Grund dafür ist sicher, dass der benötigte Inhalt immer aktuell per Ajax nachgeladen wird.
Das geschied allerdings auch beim ersten Aufruf der Seite und produziert einen unnötigen Request. Aber auch das ist so flexibel, dass man es dem Grid abgewöhnen kann.
Zum Testen reicht eine einfache HTML/PHP Seite. Es werden die benötigen Javascript-Dateien geladen und die Tabelle definiert. Die Daten kommen für das Beispiel aus einem PHP-Script, welches über file_get_contents() geladen wird. Jetzt wird vielleicht der eine oder andere aufmerksame Leser gleich aufschreien, da an der Stelle nun doch ein zweiter Request gemacht wird.
Keine Sorge, das ist nur für das Beispiel gedacht, damit ich einfacher darstellen kann wie die Daten strukturiert sein müssen. Wenn zum Beispiel ein (beliebiges) MVC-Framework genutzt wird, kann die “Daten-Aktion” intern aufgerufen werden und zwischen Client und Server wird wirklich nur ein Request gebraucht.
Wichtig dabei ist, dass erst die Daten gesetzt werden und danach die Daten-URL. Vergisst man das, lädt das Grid immer.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>
</head>
<body>
<a href="?<?php echo rand(1, 9999999); ?>">refresh</a><br/>
<?php
$dataUrl = 'data.php';
?>
<script>
$(document).ready( function() {
$('#testTable').flexigrid({
dataType: 'json',
colModel: [
{ display: 'Id', name: 'id', width: 30, sortable: true },
{ display: 'Name', name: 'name', width: 100 },
{ display: 'Beschreibung', name: 'description', width: 200 }
]
});
$('#testTable')
.flexAddData(<?php echo file_get_contents( $dataUrl ); ?>)
.flexOptions({url: '<?php echo $dataUrl; ?>'});
});
</script>
<table id="testTable" style="display: none;"></table>
</body>
</html>
Das PHP-Script (data.php) liefert die Daten für das Grid.
<?php
$data = array(
'rows' => array(
15 => array(
'cell' => array(
'id' => 15,
'name' => 'Name15',
'description' => 'Desc15')
),
29 => array(
'cell' => array(
'id' => 29,
'name'=> 'Name29',
'description' => 'Desc29')
),
22 => array(
'cell' => array(
'id' => 22,
'name' => 'Name22',
'description' => 'Desc22')
),
11 => array(
'cell' => array(
'id' => 11,
'name' => 'Name11',
'description' => 'Desc11')
)
)
);
if(isset($_REQUEST['sortorder'])) {
if('desc' == $_REQUEST['sortorder']) {
krsort($data['rows']);
} else {
ksort($data['rows']);
}
}
$data['total'] = count($data['rows']);
$data['page'] = 1;
echo json_encode($data);
Keine große Sache wenn man einmal dahinter gekommen ist, wie das Grid bedient werden will. Nun können die Daten mit dem ersten Response mitgeschickt werden.
