jQuery UI - Einfacher Dynamischer Content
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; }
