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 871×

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 RAD Studio a Windows Store

RAD Studio a Windows Store

RAD Studio je první vývojové prostředí se zabudovanou podporou balení aplikací typu Win32 a Win64 pro jejich umístění a šíření prostřednictvím Windows 10 Store.

Reklama
Reklama
Obrázek ke článku Testujte na 2 400+ Android a iOS zařízení

Testujte na 2 400+ Android a iOS zařízení

V dnešní době, kdy většina softwaru pro mobilní aplikace je tvořena a distribuována průběžně, mnohdy do celého světa je třeba zajistit také průběžnou automatizaci testování mobilního softwaru. V případě mobilních aplikací pro Android a iOS začíná být problém, jak testovat na obrovském množství kombinací HW variant, rozměrů, edic operačních systémů různých výrobců v různých částech světa na reálných zařízení. Simulátory a emulátory nejsou většinou to pravé. Pokud již testuji, jak si udělat vlastní beta distribuci opravdovým reálným testerům napříč platformami?

Obrázek ke článku Funkcie main vo Windows API

Funkcie main vo Windows API

V tretej časti seriálu o Windows API budeme hovoriť o funkčných prototypoch main. Funkčný prototyp je tvorený názvom funkcie a typom signatúry, pričom sa vynecháva telo funkcie. 

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ý