jQuery - Table Drag and Drop plugin
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

jQuery - Table Drag and Drop pluginjQuery - Table Drag and Drop plugin

 

jQuery - Table Drag and Drop plugin

Google       Google       21. 8. 2009       20 490×

Tento plugin pro javascriptovou knihovnu jQuery umožňuje snadnou manipulaci s řádky v tabulce.

Reklama
Reklama

Do administrace jednoho webu jsem potřeboval doplnit funkci, pomocí které bude možné určovat pořadí zobrazování položek. Hledal jsem řešení, které by umožnilo uživateli pohodlné a rychlé přesouvání jednotlivých záznamů. Našel jsem plugin Table Drag and Drop pro známou javascriptovou knihovnu jQuery.

Pro použití je do dokumentu nutno vložit link na knihovnu jQuery a zároveň i na tento plugin. Potom stačí pomocí jQuery selektorů zvolit tabulku a zavolat funkci tableDnd().

Příklady použití

Velice jednoduchý příklad, pomocí kterého můžeme vytvořit tabulku, jejíž řádky lze přesouvat myší. HTML kód není ničím zvláštní:

<table id="table1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>Jedna</td><td>text</td></tr>
    <tr id="2"><td>2</td><td>Dvě</td><td>text</td></tr>
    <tr id="3"><td>3</td><td>Tři</td><td>text</td></tr>
    <tr id="4"><td>4</td><td>Čtyři</td><td>text</td></tr>
    <tr id="5"><td>5</td><td>Pět</td><td>text</td></tr>
    <tr id="6"><td>6</td><td>Šest</td><td>text</td></tr>
</table>

Pro přidání možnosti přesunu řádků stačí vložit následujících pár řádků JavaScriptu:

<script type="text/javascript">
$(document).ready(function() {
    // Inicializace tabulky
    $("#table1").tableDnD();
});
</script>

Příklad si můžete vyzkoušet zde.

Předchozí příklad využíval defaultní nastavení, ale v případě potřeby můžeme libovolně nastavovat mnoho parametrů, které určují vzhled a chování tabulky, a také můžeme specifikovat chování objektu při zachycení a pohybu.

onDragStyle
Definuje styl, který získá řádek buňky během pohybu. Samozřejmě lze použít pouze parametry aplikovatelné na řádek tabulky.
onDropStyle
Definuje styl, který získá řádek buňky po přesunu.
onDragClass
Tato třída je s řádkem asociována během přesunu a po jeho uvolnění je asociace odstraněna. Defaultní třída je tDnD_whileDrag, její nastavení lze jednoduše změnit ve stylopisu.
onDrop
Definuje funkci, která je zavolána po zachycení řádku. Funkce má dva parametry: tabulku a řádek, který uživatel zachytil. Nové pořadí řádků lze zjistit pomocí table.tBodies[0].rows.
onDragStart
Definuje funkci, která je zavolána v okamžiku, kdy uživatel začne řádkem pohybovat. Funkce má dva parametry: tabulku a řádek, který uživatel přesouvá.
scrollAmount
Počet pixelů, o které se tabulka pohne, když uživatel dosáhne horního nebo spodního okraje okna. Stránka by se měla pohybovat automaticky.

Druhý příklad demonstruje použití onDrop i onDragClass.

$(document).ready(function() {

	// Sudé řádky budou mít jinou barvu.
	$("#table2 tr:even').addClass('alt')");

	// Inicializace druhé tabulky, přiřazení dragClass a onDrop funkce.
	$("#table2").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Byl přesunut řádek: "+row.id+". Nové pořadí je: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $(#debugArea).html(debugStr);
	    },
		onDragStart: function(table, row) {
			$(#debugArea).html("Začínám posunovat řádkem: "+row.id);
		}
	});
});

Příklad si můžete vyzkoušet zde.

Často je potřeba odeslat informaci o přesunu řádků na server. K tomu slouží funkce serialize(), která nemá žádné parametry, ale dokáže určit id tabulky z kontextu. Výstupem je řetězec ve tvaru tableId[]=rowId1&tableId[]=rowId2&tableId[]=rowId3.... Jednoduchý příklad použití demonstruje následující kód:

$('#table-3').tableDnD({
        onDrop: function(table, row) {
            alert($.tableDnD.serialize());
        }
    });

Tento příklad také ukazuje, jak vybrané řádky chránit proti přesunu nebo zamezit uvolnění přesunovaného řádku nad vybranými řádky tabulky. Pokud řádku nastavíme třídu nodrag, nebude možné jej uchopit ani přesunout. Třída nodrop zabrání uvolnění přesunovaného objektu nad zvoleným řádkem.

Příklad si můžete vyzkoušet zde.

Pomocí funkce hover z knihovny jQuery můžeme zobrazit šipky, a zdůraznit tak možnost přesunu řádků.

$("#table4 tr").hover(function() {
          $(this.cells[0]).addClass('showDragHandle');
    }, function() {
          $(this.cells[0]).removeClass('showDragHandle');
    });

Příklad si můžete vyzkoušet zde.

Problémy nastávají u tabulek, které mají více částí uzavřených do tagu TBODY. Knihovna zatím umožňuje přesun pouze v rámci daného TBODY.

Zdroj: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Zdeněk MoravecAutor se pohybuje v oblasti vývoje nových materiálů. Mezi jeho koníčky patří tvorba webových aplikací, programování v jazycích Java, .NET (C#), Perl, elektronika a sport (běh). Hojně využívá sázecí systém LaTeX.
Web     Facebook    

Nové články

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

Reklama autora

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý