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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

jQuery - Table Drag and Drop plugin

Google       Google       21. 8. 2009       22 492×

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

Reklama
Reklama
Obrázek ke článku Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Bezrealitky.cz na novém webu rychleji propojí vážné zájemce s majiteli nemovitostí

Největší platforma pro přímý prodej a pronájem domů a bytů Bezrealitky.cz představila novou podobu svého portálu. Redesign zásadně zjednodušuje všechny transakce, mění způsob, jakým zájemci o bydlení komunikují s majiteli nemovitostí, přináší nejpřesnější filtrování nabídek na trhu, ale také umožňuje prověřovat důvěryhodnost zájemců. 

Obrázek ke článku Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Samba.ai: Personalizační nástroje hlásí připravenost na GDPR

Do ostrého nasazení nařízení GDPR, které upravuje nakládání s osobními údaji, zbývá pár dní, a vzbuzuje vrásky u řady provozovatelů služeb, které pracují s profilací návštěvníků na stránkách a personalizací obsahu. Český personalizační nástroj Samba.ai(dříve Yottly) zajišťující personalizaci webu a prediktivní automatizaci email marketingu je však slovy svého CEO Davida Vyskočila na GDPR plně připraveno. 

Obrázek ke článku Jak se liší metody šifrování dat?

Jak se liší metody šifrování dat?

Jaké výhody má celodiskové a souborové šifrování? A co vám přinese šifrování virtuálního disku? Ochranu důležitých dat řeší firmy různě. Mohou využít přístupových práv, zálohování, VPN nebo šifrování. Právě šifrování považují odborníci na kybernetickou bezpečnost za nejspolehlivější řešení.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý