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

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

 

jQuery - Table Drag and Drop plugin

Google       Google       21. 8. 2009       21 101×

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 Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Reklama
Reklama
Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

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 © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý