// ---------------------------------------------- // 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