Sammlung

Sammlung/lit-8/js/litlist.js

@@ -0,0 +1,168 @@
+// ----------------------------------------------
+// Beispiel lit-8
+// litlist.js
+// ----------------------------------------------
+
+// ----------------------------------------------
+LITAPP.ListView_cl = Class.create({
+// ----------------------------------------------
+   initialize: function () {
+
+      var that = this;
+      // Basis-Markup der Tabelle anfordern
+      $.get('/html/list.html', function (data_spl) {
+         $("#idContentOuter").append(data_spl);
+         $("#idListContent").hide();
+         that.initHandler_p();
+         that.initList_p();
+      });
+
+      // Registrierungen
+      LITAPP.es_o.subscribe_px(this, 'list');
+
+   },
+   notify_px: function (self_opl, message_spl, data_apl) {
+      switch (message_spl) {
+      case 'list':
+         switch (data_apl[0]) {
+         case 'refresh':
+            // Liste aktualisieren
+            self_opl.render_px(null);
+            break;
+         default:
+            console.warning('[ListView_cl] unbekannte list-Notification: '+data_apl[0]);
+            break;
+         }
+         break;
+      default:
+         console.warning('[ListView_cl] unbekannte Notification: '+message_spl);
+         break;
+      }
+   },
+   canClose_px: function () {
+      return true;
+   },
+   close_px: function () {
+      $("#idListContent").hide();
+   },
+   render_px: function (data_opl) {
+      // Parameter data_opl wird hier nicht benötigt
+      // Anforderung an den Server senden
+      $.ajax({
+         dataType: "json",
+         url: '/lit',
+         type: 'GET'
+      })
+      .done($.proxy(this.doRender_p, this))
+      .fail(function(jqXHR_opl, textStatus_spl) {
+         alert( "[Liste] Fehler bei Anforderung: " + textStatus_spl );
+      });
+   },
+   doRender_p: function (data_opl) {
+      // json-Daten bereits in js-Objekte umgesetzt
+      var rows_s = LITAPP.tm_o.execute_px('list.tpl', data_opl);
+      this.initList_p();
+
+      $("#idList tr[class!='listheader']").remove();
+      $("#idList").append(rows_s);
+      $("#idListContent").show();
+      console.log("[ListView_cl] doRender");
+
+   },
+   initList_p: function () {
+      this.rowId_s = ""; // id der selektierten Zeile
+      // Buttons teilweise deaktivieren, bis eine Zeile ausgewählt wurde
+      this.disableButtons_p();
+   },
+   initHandler_p: function () {
+      // Ereignisverarbeitung einrichten
+
+      // Ereignisverarbeitung für die Tabelle einrichten
+      // man beachte: für jquery muss man CSS-Selektoren angeben, also #idList statt einfach nur idList !
+      $("#idList").on("click", "td", $.proxy(this.onClickList_p, this));
+
+      // Ereignisverarbeitung für die Schalter einrichten
+      // stärkere Einschränkung mit #idListContent notwendig, damit keine Verwechslung mit ButtonArea auf Form erfolgt
+      $("#idListContent #idButtonArea").on("click", "button", $.proxy(this.onClickButtons_p, this));
+
+   },
+   onClickList_p: function (event_opl) {
+      // hier werden nur click-Events auf td-Elemente geliefert
+      if (this.rowId_s != "") {
+         $("#"+this.rowId_s).removeClass("clSelected"); // Achtung: jetzt ist nur die Bezeichnung der CSS-Klasse gemeint!
+      }
+      this.rowId_s = $(event_opl.target).parent().attr('id');
+      $("#"+this.rowId_s).addClass("clSelected");
+
+      this.enableButtons_p();
+   },
+   onClickButtons_p: function (event_opl) {
+
+      var action_s = $(event_opl.target).attr("data-action");
+      switch (action_s) {
+      case 'add':
+         // weiterleiten
+         LITAPP.es_o.publish_px('app', [action_s, null]);
+         break;
+      case 'edit':
+         if (this.rowId_s != "") {
+            // Weiterleiten
+            LITAPP.es_o.publish_px('app', [action_s, this.rowId_s]);
+         } else {
+            alert("Wählen Sie bitte einen Eintrag in der Tabelle aus!");
+         }
+         break;
+      case 'delete':
+         if (this.rowId_s != "") {
+            if (confirm("Soll der Datensatz gelöscht werden?")) {
+               // Id der selektierten Tabellenzeile anhängen
+               var path_s = "/lit/" + this.rowId_s; 
+               $.ajax({
+                  context: this,
+                  dataType: "json",
+                  url: path_s,
+                  type: 'DELETE'
+               })
+               .done(function (data_opl) {
+                  // Auswertung der Rückmeldung
+                  // der umständliche Weg:
+                  // - Liste neu darstellen, hier vereinfacht durch neue Anforderung
+                  //LITAPP.es_o.publish_px('list', ['refresh', null]);
+                  
+                  // einfacher mit direktem Entfernen der Zeile aus der Tabelle
+                  // (id des gelöschten Eintrags wird in der Antwort geliefert)
+                  $('#'+data_opl['id']).remove();
+                  this.initList_p();
+               })
+               .fail(function(jqXHR_opl, textStatus_spl) {
+                  alert( "[Liste] Fehler bei Anforderung: " + textStatus_spl );
+               });
+            }
+         } else {
+            alert("Wählen Sie bitte einen Eintrag in der Tabelle aus!");
+         }
+         break;
+      }
+      // Weiterleitung und Standardbearbeitung unterbinden
+      event_opl.stopPropagation();
+      event_opl.preventDefault();
+
+   },
+   // stärkere Einschränkung mit #idListContent notwendig, damit nicht die Buttons auf dem
+   // Formular ebenfalls geändert werden
+   enableButtons_p: function () {
+      $("#idListContent #idButtonArea button").each(function () {
+         if ($(this).attr("data-action") != "add") {
+            $(this).prop("disabled", false);
+         }
+      });
+   },
+   disableButtons_p: function () {
+      $("#idListContent #idButtonArea button").each(function () {
+         if ($(this).attr("data-action") != "add") {
+            $(this).prop("disabled", true);
+         }
+      });
+   }
+});
+// EOF