Ciekawym sposobem na edycję danych przez użytkownika jest dynamiczne tworzenie pola formularza w momencie, gdy klika on w wyświetlany tekst. Możemy w taki sposób uprościć wygląd szczególnie, gdy pól mogłoby być dużo. Taką edycję bardzo prosto wykonać za pomocą gotowej biblioteki jQuery o nazwie Jeditable, dzięki której otrzymamy gotowe narzędzie do tworzenia dynamicznych formularzy.
W niniejszym poradniku wykorzystamy uproszczony przykład tabeli z danymi, które będzie można edytować poprzez dynamiczne tworzenie pola formularza w wybranej komórce. Tabela zawiera 3 kolumny: osoba, stanowisko, oraz uwagi. Po kliknięciu w wybraną komórkę pojawi się odpowiednie pole formularza (text, select lub textarea) umożliwiające edycję. Przykładowy wynik opisanych poniżej działań można zobaczyć tutaj.
Potrzebną bibliotekę można pobrać ze strony projektu Jeditable. Kod tabeli może wyglądać następująco:
<table>
<tr>
<th>Lp.</th>
<th>Osoba</th>
<th>Stanowisko</th>
<th>Uwagi</th>
</tr>
<tr>
<td>1</td>
<td class="edit text" id="person_1">Jan Kowlaski</td>
<td class="edit select" id="occupation_1">Informatyk</td>
<td class="edit textarea" id="info_1">Na urlopie do 2 stycznia</td>
</tr>
<tr>
<td>2</td>
<td class="edit text" id="person_2">Tomasz Nowak</td>
<td class="edit select" id="occupation_2">Handlowiec</td>
<td class="edit textarea" id="info_2"></td>
</tr>
<tr>
<td>3</td>
<td class="edit text" id="person_3">Anna Dąbrowska</td>
<td class="edit select" id="occupation_3">Księgowy/a</td>
<td class="edit textarea" id="info_3">Idzie na szkolenie 5-6 luty</td>
</tr>
<tr>
<td>4</td>
<td class="edit text" id="person_4">Marcin Wiśniewski</td>
<td class="edit select" id="occupation_4">Spec. ds. marketingu</td>
<td class="edit textarea" id="info_4"></td>
</tr>
</table>
Będziemy potrzebowali teraz określić, które pola będą edytowane i w jaki sposób. Dla poszczególnych komórek zmiany będą dokonywane przy pomocy różnych typów formularza. Rozróżnienia dokonamy po nazwach klas poszczególnych komórek tabeli, co widać na powyższym kodzie HTML.
Edycja zawartości pola „Osoba” będzie się odbywała przez zwykłe pole tekstowe, które tworzymy w następujący sposób:
$('.text').editable('save.php', {
type : 'text',
cancel : 'Anuluj',
submit : 'Zapisz',
indicator : '<img src="img/indicator.gif" alt="" />',
width : '100px'
});
Stworzenie formularza w Jeditable polega na użyciu metody editable, odwołującej się do określonego obiektu (w tym wypadku klasy HTML text). Wymaga ona dwóch parametrów. Pierwszym jest plik, jaki zostanie wywołany przy akceptacji formularza i do którego zostanie przesłana wartość z pola. Drugim parametrem jest tablica zawierająca zmienne konfiguracyjne. W tym przypadku posiadają one następujące znaczenie:
- type – typ pola formularza, możliwe wartości to text, select lub textarea
- submit – napis na przycisku akceptującego formularz
- cancel – napis na przycisku anulowania edycji, jeśli nie jest podany przycisk nie wyświetli się (wyjście z trybu edycji jest możliwe poprzez kliknięcie poza formularzem)
- indicator – tekst jaki pojawi się w momencie zapisywania danych, może to być także kod HTML wyświetlający animację postępu poprzez znacznik img
- width – długość pola formularza, domyślnie automatycznanie dobierana
Kolejnym polem w formularzu będzie „Stanowisko”. Będzie on wybierany z listy rozwijanej, posłużymy się więc następującą definicją:
$('.select').editable('save.php', {
type : 'select',
data : "{'1':'Informatyk','2':'Księgowy/a',
'3':'Spec. ds. marketingu', '4':'Handlowiec', 'selected':'1'}",
submit : 'Zapisz',
cancel : 'Anuluj',
indicator : '<img src="img/indicator.gif" alt="" />',
width : '100px',
submitdata: {field: 'select'}
});
Pojawią się tu dodatkowe zmienne:
- submitdata – dodatkowe wartości, jakie można przesłać do pliku wynikowego (w tym przypadku rodzaj pola, który przyda się przy zapisie danych)
- data – zawiera ona tablicę zawodów w układzie klucz:wartość. Jej ostatnim elementem jest oznaczenie wybranej wartości, czego dokonujemy poprzez ‘selected’:’klucz’
Innym sposobem na załadowanie wartości do pola select oraz innych typów, jest skorzystanie z parametru loadurl zawierającego nazwę pliku
loadurl : 'load.php'
Plik ten Powinien zwrócić dane w formacie json o następującej strukturze:
<?php
$data = array(
1 => ‘Informatyk’,
2 => ‘Księgowy/a’,
3 => ‘Spec. ds. marketingu’,
4 => ‘Handlowiec’,
'selected' => 1
);
echo json_encode($data);
?>
Dzięki temu możemy wczytać odpowiednie wartości z bazy danych lub dodatkowo je zmodyfikować. Możemy z takiego rozwiązania skorzystać także w przypadku pól text lub textarea. Domyślnie ładowana jest do nich wartość z edytowanego obiektu, jednak możemy to zmienić przy pomocy loadurl.
Na koniec pozostały nam „Uwagi”, które będziemy edytowali poprzez pole typu textarea:
$('.textarea').editable('save.php', {
type : 'textarea',
cancel : 'Anuluj',
submit : 'Zapisz',
indicator : '<img src="img/indicator.gif" alt="" />',
rows : '4',
cols : '20',
placeholder: ''
});
W tym przypadku dochodzą kolejne nowe zmienne:
- rows – liczba wierszy w textarea
- cols – liczba kolumn w textarea
- placeholder – tekst, jaki pojawi się w przypadku pustej wartości. W tym przypadku pusty, gdyż nie będzie on potrzebny (domyślnie „Click to edit”).
Po zatwierdzeniu pola formularza możemy dokonać zapisu danych w wywoływanym pliku save.php. Wartość oraz dodatkowe parametry będą dostępne w zmiennej POST. Można to zmienić poprzez parametr metod, o czym będzie mowa później. Domyślnie wartość będzie dostępna pod zmienną value, a identyfikator pola (o ile został zdefiniowany) pod zmienną id.
Wynikiem przedstawionego wywołania powinna być wartość zmienionego pola (odpowiedni klucz w przypadku select). Plik save.php powinien zwracać wartość pola po zmianie. Dzięki temu po zapisie w tabeli pojawi się zaktualizowana wartość.
Przykładowy plik save.php może w uproszczeniu wyglądać następująco:
<?php
// pod zmienna POST[id] znajduje sie id pola formularza
// np. id="person_1", czyli nazwa pola z bazy i id rekordu
list($field, $id) = explode("_", $_POST["id"]);
// uwaga na bezpieczenstwo zmiennych!
$dbh = mysql_connect(...);
$sql = "update table
set {$_POST["field"]} = $value
where id=$id";
mysql_query($sql);
// pod zmienna POST[value] znajduje sie wartsc z formularza
// dla pola select trzeba zwrocic tekstm pod value jest ide rekordu!
if($_POST['field'] == 'select'){
// te dane nalezy wczytac z bazy
$occupation = array(
1 => "Informatyk",
2 => "Księgowy/a",
3 => "Spec. ds. marketingu",
4 => "Handlowiec"
);
$value = $occupation[$_POST['value']];
}
else{
$value = $_POST['value'];
}
// dzięki temu w tabeli pojawi się zmieniona wartość
echo $value;
?>
Tworząc pole formularza możemy skorzystać z dość dużej liczby dodatkowych parametrów. Warto się z nimi zapoznać:
method – sposób przekazywania danych do pliku wynikowego: POST (domyślnie) lub PUT (kompatybilnie z Rails)
callback – funkcja która zostanie wywołana po zatwierdzeniu formularza. Używa dwóch parametrów: wartości z pola oraz ustawień wtyczki. Wewnątrz funkcji można się odwoływać do poszczególnych elementów poprzez this.
$('.editable').editable('save.php', {
type : 'textarea',
submit : 'OK',
callback : function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
}
});
name – nazwa zmiennej, zawierająca wartość wpisaną w formularzu, domyślnie value
id – nazwa zmiennej, która przechowuje id edytowanego elementu, domyślnie id
height – wysokość pola formularza w pikselach, domyślnie auto
loadtype – typ żądania używany przez loadurl: GET lub POST. Domyślnie jest wykorzystywany pierwszy z nich.
data – dane z formularza przesłane jako parametr. Może być stringiem lub funkcją zwracającą string. Przydatny, gdy chcemy dokonać zmian w tekście przed edycją w formularzu. Przykładowo, możemy w ten sposób zmienić HTMLowe znaczniki „br” na końce linii widoczne w polu edycji:
$(".editable").editable("save.php";, {
data: function(value, settings) {
var retval = value.replace(/<br[\s\/]?>/gi, '\n');
return retval;
}
});