j_insert_update – zaawansowane programowanie – przykład 3

W przykładzie 1 i drugim stworzyliśmy dedykowany formularz na bazie transakcji j_insert_update.aspx. Formularz pozwala nam wyświetlać dane w tabelce, dodawać i usuwać rekordy. W życiu jednak zdarzają się sytuacje, gdy raz zapisane dane należy zmienić (poprawić, zmodyfikować) po prostu dokonać edycji.

Poniższa strona opisuje w jaki sposób możemy w programie StudioSystem osiągnąć taki efekt w transakcji j_insert_update.aspx.

 

Chcemy osiągnąć coś takiego:

j_insert_update hasla edycja

Jak widać na pierwszy rzut oka to niewiele się formularz różni od dotychczasowego, w tabelce doszła kolumna z ikonką ołówka, po której kliknięciu będziemy mogli zmodyfikować dane z tabelki.

Krok 1 – kolumna edycja w tabelce

Zmieniamy kod tworzący tabelkę (function UstawTable(cKontrolka)) dodać definicje odnoszącą się kolumny edycji.

{
 width: 20, text: '',
 cellsRenderer: function (rowKey, dataField, value, data) {
 var id = $('#' + idGrid).jqxGrid('getrowid', rowKey);
 var RenderString = "<img onclick=btnEdycja('" + id + "') title='edycja' class='art-buttonImg' style='padding:5px;' src='/images_v/16x16/pencil.png' width='16' height='16'/>";
 return RenderString;
 }
 },

 

Kolumna zawiera definicje zdarzenia onclick i uruchamia funkcje o nazwie btnEdycja()

j_insert_update hasla edycja 2

Krok 2 – funkcja btnEdycja()

Zadaniem funkcji jest ukrycie tabelki, skopiowanie danych do okienek formularza, zastąpienie przycisku DODAJ na ZAPISZ i ANULUJ

function btnEdycja(MyId) {
 var data = $('#gridTABELKA').jqxGrid('getrowdatabyid', MyId);
 if (data == null) {
 alert("brak danych");
 return;
 }
$('#TYTUL').val(data.TYTUL);
 $('#ADRESAT').val(data.ADRESAT);
 $('#NADAWCA').val(data.NADAWCA);
 $('#UWAGI').val(data.UWAGI);
 $('#TABELKA').hide();
 
 var myButtons = "<span id='btnZapiszEdycja' onclick='return btnZapiszEdycja(" + MyId + ")' class='art-button art-buttonGreen' style='width: 100px; '>Zapisz</span>"
 myButtons += "<span id='btnAnulujEdycja' onclick='return btnAnulujEdycja()' class='art-button art-buttonRed' style='width: 100px; '>Anuluj</span>"
 $('#BTN_DODAJ').html(myButtons);
return false;
}

Po kliknięciu w przycisk ZAPISZ uruchomiona zostanie funkcja btnZapiszEdycja().

Po kliknięciu w przycisk ANULUJ uruchomiona zostanie funkcja btnAnulujEdycja().

Krok 3 – funkcja btnZapiszEdycja

Funkcja działa podobnie jak przy dodawaniu nowych rekordów, tzn na początku sprawdzamy czy kontrolki oznaczona jako wymagane są wypełnione (posiadają wartość), następnie budujemt tablicę kontrolek z danymi które chcemy zapisać (aktualizować) w bazie. Na koniec używamy metody UpdateData() aby zapisać zmiany w bazie.

 

function btnZapiszEdycja(MyId) {
 // kontrola wymagalnych pól
 if (!TestWypelnienia()) {
 return false;
 }
 cTablica = new Array();
 var cLicznik = 0;
 $('[ssPostBack]').each(function (index) {
 cTablica[cLicznik] = new cListaKontrolek($(this));
 cLicznik++;
 })
 PageMethods.UpdateData("dpuwa", cTablica, "", "", "refno_poz=" + MyId, 'softwarestudioConnectionString', btnZapiszEdycjaSucceeded, OnFailed);
 return false;
}

Uruchomienie metody UpdateData po prawidłowym zakończeniu działania uruchamia funkcje btnZapiszEdycjaSucceeded(), Zadaniem funkcji jest przywrócenie przycisku DODAJ zamiast ZAPISZ i ANULUJ. Następnie odświeżana jest tabelka z danymi i wyświetlana. Na koniec wybrane kontrolki są czyszczone (ustawiana pusta wartość) a focus kursora zostaje ustawiony na kontrolce TYTUL.

function btnZapiszEdycjaSucceeded(wynik) {
 if (wynik != "") {
 PokazAlert("Komunikat", wynik, 220, 400);
 return;
 }
 $('#BTN_DODAJ').html("<span id='btnDodajPoz' onclick='return btnDodaj()' class='art-button art-buttonBlue' style='width: 200px; '>Dodaj</span>");
 UstawTable('TABELKA');
 $('#TABELKA').show();
 $("#TYTUL").val('');
 $("#ADRESAT").val('');
 $("#NADAWCA").val('');
 $("#UWAGI").val('');
 $("#TYTUL").jqxComboBox('focus');
}

 

 

 

Krok 4 – funkcja btnAnulujEdycja

Funkcja ma za zadanie powrócić do normalnego okna.

function btnAnulujEdycja() {
 $('#TYTUL').val("");
 $('#ADRESAT').val("");
 $('#NADAWCA').val("");
 $('#UWAGI').val("");
 $('#BTN_DODAJ').html("<span id='btnDodajPoz' onclick='return btnDodaj()' class='art-button art-buttonBlue' style='width: 200px; '>Dodaj</span>");
 $('#TABELKA').show();
}

Dane z kontrolek są usuwane, przycisk ZAPISZ i ANULUJ są zastępowane przyciskiem DODAJ, na końcu wyświetlana jest tabelka.

 

 

 

Podsumowanie

Rozwiązanie fajnie działa, dla prostych danych typu kartoteki, skorowidze itp. Większy problem jest gdy mamy więcej danych w kontrolkach o różnych typach np. combo, checkbox (wówczas należy używać odpowiednich poleceń JQuery do podstawiania danych) oraz gdy w tabelce nie chcemy (nie mamy) wyświetlanych wszystkich danych z kontrolek. Wówczas nie możemy skorzystać z odczytu danych z tabelki, tylko należy skorzystać z metody odczytującej dane z bazy SQL i takie dane podstawić pod kontrolki.