Hallo und herzlich willkommen zu meinem ersten Guide.
Ich habe bisher leider wenig über jQuery/jQuery UI in diesem Forum gesehen, allerdings finde ich da sollte man mal Abhilfe schaffen.
Problematisch ist nur, dass ich wirklich extrem schlecht im erklären bin und somit das wohl nicht allzu gut werden wir. Ich gehe mal davon aus, das der Lesen wenigstens ein bisschen Ahnung von PHP/JS hat.
Wir starten mit einem einfachem PHP-Script welches uns etwas anzeigt und fügen dort ein Button ein.
Nun fügen wir einen ganz normalen HTML-Code an indem später unsere DB-Rows angezeigt werden sollen. In diesem Fall ist es ein DIV-Container welcher den Dialog darstellen soll mit einem kleinem Tooltipp und einer derzeit noch leeren Tabelle, welche später mit den Daten gefüllt werden soll.
Nicht zu vergessen der Aufruf der jQuery Funktion welche wir letztendlich benutzen werden.
In der index.php werden wir nun 2 Seiten includieren welche wir gleich noch erstellen werden das ist zunächst die action.php (Ajax Request) und die ausgelagerten Javascript Funktionen in der getList.js.
Bitte lest die Kommentare selbständig und sorgfältig durch um die einzelnen Schritte genau erklärt zu bekommen.
Um im Nachhinein auch zu sehen welche Elemente selektiert sind verändern wir das Design im CSS ein wenig und bereiten eine CSS-Klasse vor.
Wenn ihr etwas nicht verstanden habt oder ich es unzureichend erklärt habe könnt ihr gerne etwas dazu schreiben. Ich kann nicht so gut erklären weshalb ich auch glaube, dass das Tutorial nicht so gut ausgefallen ist. Allerdings hoffe ich das es euch wenigstens ein Grundverständnis mitgegeben hat.
Ich habe bisher leider wenig über jQuery/jQuery UI in diesem Forum gesehen, allerdings finde ich da sollte man mal Abhilfe schaffen.
Problematisch ist nur, dass ich wirklich extrem schlecht im erklären bin und somit das wohl nicht allzu gut werden wir. Ich gehe mal davon aus, das der Lesen wenigstens ein bisschen Ahnung von PHP/JS hat.
index.php
Wir starten mit einem einfachem PHP-Script welches uns etwas anzeigt und fügen dort ein Button ein.
PHP Code:
<button id='ZeilenAbfragen'>Zeilen abfragen.</button>
PHP Code:
<div id="dialog-show" title="DB-Rows">
<p class="validateTips"></p>
<form>
<p class="info">Selektieren: Klick. Mehrere Stundenzettel-Zeilen selektieren: Strg+Klick, oder Rahmen mit Maus ziehen.</p>
<table id="selectable-table">
</table>
</form>
</div>
PHP Code:
<script> type="text/javascript" src="jquery.js">
jQuery(document).ready(function($) {
getList();
});
</script>
getList.js
PHP Code:
function getList () {
//Definierung des Dialogs. Vergebung der Eigenschaften und hinzufügen von 2 Buttons welche in diesem Fall beide schließen sollen, optional noch Speicherungsprozess hinzufügbar.
$( "#dialog-show" ).dialog({
autoOpen: false,
height: 600,
width: 600,
modal: true,
buttons: [
{
id: "btSchließen",
text: "Schließen",
click: function() {
$(this).dialog("close");
}
},
{
id: "btDetailsAbbrechen",
text: "Abbrechen",
click: function() {
$( this ).dialog( "close" );
}
}
],
//Bei der Öffnung soll der Dialog erst einmal initialisiert werden und das mit leeren Daten.
open: function() {
$(".info").hide();
$( "#selectable-table" ).html("");
},
close: function() {
}
});
// Dieser Button im Stundenzettel öffnet den Dialog
$( "#ZeilenAbfragen" )
.button()
.click(function() {
//Wenn auf dem Button geklickt worden ist soll sich der Dialog öffnen und der Prozess zur Ladung der Daten starten.
$( "#dialog-show" ).dialog( "open" );
showAllDataRows();
});
//Zeigt alle Datensätze
function showAllDataRows(){
//Initialisierung
$( "#selectable-table" ).html('');
updateTips("Lade Zeilen...");
//Datensammlung
var oData = {
action: "getData",
name: "ravenstorm"
};
//Abfrage der Daten
var request = $.ajax({
url: "uploads/action.php",
async: false,
type: "POST",
dataType: "json",
data: {data: oData}
});
//Request erfolgreich?...
request.done(function(ret) {
updateTips("Alle Daten-Zeilen:");
$(".info").show();
var s, line;
//... für jede Zeile einen Tabelleneintrag erstellen...
for (var i = 0; i < ret.data.length ; i++ ) {
line = ret.data[i];
// ... ProjektNr + Name anzeigen ...
s = "<td>" + line[2] + "</td><td>" + line[3] + "</td>";
$( "#selectable-table" ).append("<tr class='ui-widget-content'>" + s + "</tr>");
}
//... und das ganze zum jQueryUI Objekt machen...
$( "#selectable-table" ).selectable( {filter:"tbody tr"} );
});
// Falls der Request Fail läuft wissen wir zumindestens warum :)
request.fail(function(jqXHR, textStatus) {
alert( "callAction: Request fehlgeschlagen: " + textStatus );
});
}
}
action.php
PHP Code:
<?php
public function getMyList() {
$msg = "";
$data = $_POST['data'];
$action = $data["action"];
//--- Datenbank-Aktionen ---
if ($action == "getData") {
//Hier könnt ihr nun eure Daten einfügen per odbc/sql oder statisch
//Ich gehe nun mal davon aus ich habe ein Array aus meiner DB bekommen
$returnData;
// Associative array für Rückgabe an Javascript
$ret = array('msg' => $msg, 'data' => $retDat);
}
}
echo $ret;
?>
Optional
Um im Nachhinein auch zu sehen welche Elemente selektiert sind verändern wir das Design im CSS ein wenig und bereiten eine CSS-Klasse vor.
Code:
/* Farben für "während selektieren" und "selektiert" */
#selectable-table .ui-selecting { background: #FECA40; }
#selectable-table .ui-selected { background: #F39814; color: white; }