Перетаскивание строк в таблице jQuery

     

Привет!

Сегодня я хочу показать вам еще одну полезную фишку для сайта, как перетаскивание строк в таблице jQuery! Представьте, что вы делаете cms, у вас есть категории, предположим статей, но тут к вам пришел руководитель и попросил сделать так чтобы определнная категория стояла выше всех, потом он приходит еще раз и опять просит поменять категории местами… знакомо, не правда ли?

Хороший программист — ленивый программист отвечу я и сделаю в cms системе модуль, чтобы любой сотрудник могу перетасовать положение категорий в таблице как захочет и реже подходил ко мне :) Да, это моя политика!

Урок рассчитан для людей, которые уже пользовались технологией Ajax!

Как-то я искала подобный плагин и наткнулась на интересную страничку, где подробно описано, как все сделать, приложив к задание минимум усилий! Для тех, кто знает английский может эта статья окажется и не актуальной, а вот для кого-то она может быть очень полезна!

Ну что ж, начнем!!!

Я, как ярый любитель Ajax, сделала для вас пример, где вы не только сортируете строки визуально, но и записываете расположение позиций в базу. В обработчике я не стала заморачиваться, большая база у меня будет или нет, я просто перезаписываю положение строк! Думаю, что для тех, у кого база огромная такой метод не будет рационален, в таком случае я бы брала два значения — перетягиваемую строку и id строки, на чье место я ее ставлю, а в базе просто поменяла бы позиции друг с другом! НО, тут у нас будет всего пять стран, которые мы будем переставлять местами и запоминать положение строк относительно друг друга!

1. Создаем index.php

<?php
    include("mysql.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Перетаскивание строк в таблице jQuery</title>
    <meta charset="utf-8">
    <script src="jquery-1.10.2.min.js"></script>
    <script src="jquery.tablednd.js"></script>
    <script>
    
    </script>
</head>
<body>

</body>
</html>

В файле подключаем нашу БД + свежую библиотеку jQuery + библиотеку с плагином jquery.tablednd.js

В body поставим блок div, куда будем подгружать нашу табличку со странами. Обращаю внимание, что таблица будет выводится через Ajax и при обновлении положения строк, основная страница не будет перезагружатся, будет перезагружаться только блок div с актуальным порядком строк!

В нашем примере я не буду ничего выносить в external файлы, все скрипты пишу в head для понимания!

2. В файле index.php создаем div, куда будет подгружаться табличка со странами

<?php
    include("mysql.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Перетаскивание строк в таблице jQuery</title>
    <meta charset="utf-8">
    <script src="jquery-1.10.2.min.js"></script>
    <script src="jquery.tablednd.js"></script>
    <script>
	$(function() {
	    tab=1;
	    $("#tab").load("handler.php",{tab:tab}); //погружаем табличку при открытии страницы
	});
    </script>
</head>
<body>
    <div id="tab"></div>
</body>
</html>

Создаем файл-обработчик handler.php

<?php
include("mysql.php");

$tab=$_REQUEST["tab"];

if($tab)
{
	echo
	'
	<table id="table-5" border="1">
	<thead>
	<tr>
		<th style="padding:5px;width:15px;"></th>
		<th style="padding:5px;">Поз</th>
		<th style="padding:5px;">ID</th>
		<th style="padding:5px;">Страна</th>
	</tr>
	</thead>
	';
	
	$sq="SELECT *  FROM  `country_s1` ORDER BY `pos` ASC ";
	$dd=mysql_query($sq);
	if(mysql_num_rows($dd))
	{
		echo
		'
		<tbody>
		';
		$i=1;
		while($dat=mysql_fetch_array($dd))
		{
			echo
			'
			<tr>
				<td style="padding:5px;width:15px;"></td>
				<td style="padding:5px;">'.$i.'</td>
				<td style="padding:5px;">'.$dat["id"].'</td>
				<td style="padding:5px;">'.$dat["name"].'</td>
			</tr>
			';
			
			$i++;
		}
		echo
		'
		</tbody>
		';
	}
	
	echo
	'
	</table>
	';
}
?>

3. Теперь нам нужно поработать с табличкой в handler.php, чтобы строки начали перетаскиваться!

<?php
include("mysql.php");

$tab=$_REQUEST["tab"];

if($tab)
{
	echo
	'
	<style>
	#table-5 td.lol_dragHandle {
	}
			
	#table-5 td.showDragHandle {
		background-image: url(updown2.png);
		background-repeat: no-repeat;
		background-position: center center;
		cursor: move;
	}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#table-5").tableDnD({
				dragHandle: ".lol_dragHandle",
				onDrop: function(table, row) {
					var rows = table.tBodies[0].rows;
					var debugStr = "";
					for (var i=0; i<rows.length; i++) {
						debugStr += rows[i].id+";";
					}
					
					alert(debugStr);
				}
			});
		    
			$("#table-5 tr").hover(function() {
				$(this.cells[0]).addClass("showDragHandle");
			}, function() {
				$(this.cells[0]).removeClass("showDragHandle");
			});
		});	
	</script>
	<table id="table-5" border="1">
	<thead>
	<tr>
		<th style="padding:5px;width:15px;"></th>
		<th style="padding:5px;">Поз</th>
		<th style="padding:5px;">ID</th>
		<th style="padding:5px;">Страна</th>
	</tr>
	</thead>
	';
	
	$sq="SELECT *  FROM  `country_s1` ORDER BY `pos` ASC ";
	$dd=mysql_query($sq);
	if(mysql_num_rows($dd))
	{
		echo
		'
		<tbody>
		';
		$i=1;
		while($dat=mysql_fetch_array($dd))
		{
			echo
			'
			<tr id="row-'.$dat["id"].'">
				<td style="padding:5px;width:15px;" class="lol_dragHandle"></td>
				<td style="padding:5px;">'.$i.'</td>
				<td style="padding:5px;">'.$dat["id"].'</td>
				<td style="padding:5px;">'.$dat["name"].'</td>
			</tr>
			';
			
			$i++;
		}
		echo
		'
		</tbody>
		';
	}
	
	echo
	'
	</table>
	';
}
?>

Пояснения:

Давайте внимательно посмотрим на наш дополненный файл handler.php и опишем, что изменилось и для чего!

Сперва мы добавили стили к табличке, описали, что в первом столбце при наведении (это сделает плагин) будет появляться картиночка!

<style>
#table-5 td.lol_dragHandle {
}
			
#table-5 td.showDragHandle {
	background-image: url(updown2.png);
	background-repeat: no-repeat;
	background-position: center center;
	cursor: move;
}
</style>

Раз уж мы коснулись стилей, то с ними и продолжим! Опуститесь до вывода строк таблицы и взгляните на первый столбец! Как видите, мы тут добавили class=»lol_dragHandle».

На этом со стилями все! Разбираемся с jQuery:

        <script type="text/javascript">
		$(document).ready(function(){
			$("#table-5").tableDnD({
				dragHandle: ".lol_dragHandle",
				onDrop: function(table, row) {
					var rows = table.tBodies[0].rows;
					var debugStr = "";
					for (var i=0; i<rows.length; i++) {
						debugStr += rows[i].id+";";
					}
					
					alert(debugStr);
				}
			});
		    
			$("#table-5 tr").hover(function() {
				$(this.cells[0]).addClass("showDragHandle");
			}, function() {
				$(this.cells[0]).removeClass("showDragHandle");
			});
		});	
	</script>

При открытии странички jQuery берет объект с id=table-5 (посмотрите на объявление таблицы и увидите, что ей присвоен такой id) и применяет к нему метод tableDnD (т.е. мы включаем плагин).

Давайте разберемся с кодом, нас больше интересует вот эта часть:

onDrop: function(table, row) {
	var rows = table.tBodies[0].rows;
	var debugStr = "";
	for (var i=0; i<rows.length; i++) {
		debugStr += rows[i].id+";";
	}
					
	alert(debugStr);
}

Итак, поехали:

- получаем строки
- объявляем переменную, куда будем записывать новое расположение строк
- в цикле проходимся по всем строчкам таблицы и записываем в debugStr новое положение
- алертом выводим новый порядок через точку с запятой

Проверьте, все ли работает!!!

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

Этот код отвечает исключительно за визуальную составляющую! При наведении добавляет в первый столбец таблицы картиночку, а если курсор ушел за пределы строки, то картиночка исчезает!

Вот так просто это все и работает!

4. Добавляем Ajax!

Сейчас мы все также работаем с файлом handler.php! Все что нам нужно на данном шаге — вместо вывода переменной debugStr поставить ajax-код, который будет передавать новый порядок, на следующем шаге добавим обработчик!

Итак, вот наша новая функция:

      <script type="text/javascript">
		$(document).ready(function(){
			$("#table-5").tableDnD({
				dragHandle: ".lol_dragHandle",
				onDrop: function(table, row) {
					var rows = table.tBodies[0].rows;
					var debugStr = "";
					for (var i=0; i<rows.length; i++) {
						debugStr += rows[i].id+";";
					}
					
					$.ajax({
						type: "POST",
						url: "handler.php",
						data: "sec_debugStr="+debugStr,
						cache: false,
						success: function(html){
							alert(html);
							tab=1;
							$("#tab").load("handler.php",{tab:tab});
						}
					});
				}
			});
		    
			$("#table-5 tr").hover(function() {
				$(this.cells[0]).addClass("showDragHandle");
			}, function() {
				$(this.cells[0]).removeClass("showDragHandle");
			});
		});	
	</script>

Вот что мы добавили:

$.ajax({
	type: "POST",
	url: "handler.php",
	data: "sec_debugStr="+debugStr, //передаем полученную строчку в обработчик
	cache: false,
	success: function(html){
		alert(html); //выводим сообщение об успехе операции
                //обновляем табличку с уже измененными позициями!
		tab=1;
		$("#tab").load("handler.php",{tab:tab});
	}
});

5. Финишная прямая

ДОБАВЛЯЕМ этот код в handler.php

$sec_debugStr=$_REQUEST["sec_debugStr"];

if($sec_debugStr)
{
	$string=str_replace("row-","",$sec_debugStr);//без заморочек убираем лишние буковки, чтобы получить id
	$pos_el=explode(";",$string);//делаем из строки массив
	unset($pos_el[count($pos_el)-1]);//удаляем послдний ПУСТОЙ элемент из массива
	
        //в цикле обновляем позиции
	for($i=0,$pos=1;$i<count($pos_el);$i++,$pos++)
	{
		$sq="UPDATE `country_s1` SET `pos`={$pos} WHERE `id`={$pos_el[$i]}";
		mysql_query($sq);
	}
	
	echo 'Порядок следования изменен';
}

И МЫ СЧАСТЛИВЫ!!!

Я еще раз повторяю, что обработчик, который записывает новые позиции в базу не совершенен, но для мелких задачек подойдет!
Данный скрипт можно дописывать и использовать спокойно для ваших целей.

Я надеюсь, что помогла вам, задавайте вопросы!



Понравилась статья? Подпишитесь на RSS!
     

Comments are closed.