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       20 753×

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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ý