Sprawdź najnowsze wpisy:

[jQuery] Częściowe rozwijanie i zwijanie tabeli

By Websta poniedziałek 14 Wrzesień , 2009

[jQuery] Częściowe rozwijanie i zwijanie tabeli

W kolejnym tutorialu z serii jQuery zrobimy rozwijaną i zwijaną tabelę. Utrudnieniem będzie to, że będziemy chować i pokazywać tylko część wierszy.

demo | pobierz(.zip)

Do dzieła

Zaczniemy od prostego szablonu dokumentu xHTML, takiego samego jak w [jQuery] Wysuwany boczny panel menu (tam jest opisany kod – jeśli czegoś nie rozumiesz). JavaScript na potrzeby tego tutka, umieścimy w znaczniku <script>. W prawdziwych projektach lepiej umieszczać js w osobnym pliku np. skrypt.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
	<title>Częściowe rozwijanie i zwijanie tabeli w jQuery</title>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
	<link rel="stylesheet" href="panel.css" type="text/css" />
 
	<script type="text/javascript">
	<!-- skrypt jQuery -->
	</script>
 
 
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
	<![endif]-->
</head>
<body>
 
 
<!-- treść strony -->
 
</body>
</html>

Teraz dodamy prostą tabelkę i przycisk do jej rozwijania i zwijania.

<table id="zwijana" cellspacing="0" >
	<thead>
		<tr>
			<th>kolumna 1</th><th>kolumna 2</th><th>kolumna 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Wiersz 1</td><td>lorem</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 2</td><td>ipsum</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 3</td><td>dolor</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 4</td><td>sit</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 5</td><td>amet</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 6</td><td>consectetur</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 7</td><td>adipisicing</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 8</td><td>elit</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 9</td><td>sed</td><td>-</td>
		</tr>
	</tbody>
</table>
 
<p><a href="#" class="przycisk">rozwiń</a></p>

Jak widzisz tabelka nazywa się (id) “zwijana”, posiada 3 kolumny, nagłówek <thead>oraz 9 wierszy w <tbody>. Na samym dole znajduje się “przycisk” (class). Specjalnie użyłem dla niego class nie id, żeby pokazać Ci różnicę w kodzie jQuery.

Potrzebujemy jeszcze trochę stylu dla naszej tabelki. Kod jest tak prosty, że nie ma tu czego omawiać.

#zwijana thead tr {
	background: #ff6600;
	padding: 5px;
}
 
#zwijana thead tr th{
	padding: 5px;
}
 
#zwijana tr{
 
	padding: 5px;
	text-align: center;
}
 
#zwijana tr td{
	border-bottom: 1px solid #ff6600;
	padding: 5px;
}

jQuery

Dotarliśmy do najważniejszego punktu, czyli kodu jQuery. Omówię go linijka po linijce:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function() {
	var ile = '3'; //ile wierszy pokazać
	$('#zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
 
	$('.przycisk').toggle(function(){
		$('#zwijana tbody tr:nth-child('+ile+')').nextAll().show();
		$(this).text("zwiń");
		return false;
	},
	function(){
		$('#zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
		$(this).text("rozwiń");
		return false;
	});
});

Linia1: Początek jQuery
Linia2: W tej zmiennej zapisujemy ile linii ma być domyślnie otwarte
Linia3: W tabeli “zwijana” zaznaczamy tbody w nim 3 wiersz tr. Następnie wybieramy wszystkie wiersze po nim nextAll() chowamy hide(). W ten sposób ustawiamy domyślny stan tabeli po otwarciu strony.
Linia5: Funkcja toggle dla “przycisk” oznacza, że po jednym kliknięciu wykonuje pierwszą funkcję linie 6-8, a po drugim 11-13, po kolejnym znów 6-8 itd.
Linia6: Robi dokładnie to co linia 3 tylko zamiast chować pokazuje show() wiersze
Linia7: Zmienia w this czyli przycisku który wywołał funkcję tekst na “zwiń”
Linia8: Oznacza, że przeglądarka nie ma przechodzić pod adres z href w klikanym linku

Kolejne linie łatwo rozszyfrujesz samemu, gdyż użyte funkcje zostały już opisane.

I to tyle, nasza tabelka jest gotowa demo. Pliki możesz pobrać tu pobierz(.zip)

Pytania i problemy z działaniem umieszczaj w komentarzach do tego wpisu, w miarę możliwości postaram się pomóc.

Dodaj do:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • Technorati
  • Wykop
  • RSS
  • Twitter
  • BLIP - Bardzo Lubię Informować Przyjaciół
  • Wrzuć to na Flakera - powiadom swoich Znajomych
  • grono.net - internetowa społeczność przyjaciół
  • Dodaj link - Linkr.pl - tylko ciekawe linki

Zapisz się na newsletter

Nienawidzę spamu tak samo jak Ty, dlatego obiecuję, że nigdy nie sprzedam, ani nie udostępnię nikomu Twojego adresu e-mail.

(W każdej chwili możesz się wypisać, klikając link na końcu każdego maila.)

Tagi: , ,


58 Komentarzy
  1. carlsbad bankruptcy lawyer

    [Trackback]…

    This is my site trackback thanks…

  2. san diego bankruptcy

    [Trackback]…

    I saw this really great post today….

  3. dallas bankruptcy attorney

    [Trackback]…

    I saw this really great post today….

  4. hoodia gordoni

    Gems form the internet…

    [...]very few websites that happen to be detailed below, from our point of view are undoubtedly well worth checking out[...]……


« Starsze komentarze

Dodaj komentarz