Skor ako si popisme co vsetko k tomu budeme potrebovat pozrime si najprv ukazku:
Neviem ci to bude moct pouzit aj niekto iny, ale pokial ano navod vyzera asi takto. K celej zalezitosti potrebujeme 4 javascriptove subory (su sucastou scriptaculous) a 3 php subory. Ako prvy subor si vytvorime subor database.php ktory bude zabezpecovat spojenie s databazou.
database.php
<?
$dbhost = '';
$dbname = '';
$dbuser = '';
$dbpass = '';
$mydb = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$mydb);
?>
Ako dalsi krok je ten ze si vytvorime stlpec s nazvom poradie v tabulke v databaze. V pripade ukazky tabulka ma styri stlpce: id,title,category a poradie. Nasleduje vytvorenie suboru test_ajax_table.php.
test_ajax_table.php
<?
include_once('database.php');
function getItems()
{
$query = 'SELECT id,title FROM nazov_vasej_tabulky ORDER BY poradie ASC';
// pokial pouzivate podmienku WHERE odkomentujte si nasledujuci riadok a zakomentujte horny
// $query = 'SELECT id,title FROM nazov_vasej_tabulky WHERE category = '".$_GET['category']."' ORDER BY poradie ASC';
$result = mysql_query($query);
$items = array();
while ($row = mysql_fetch_assoc($result)) {
$items[$row['id']] = $row['title'];
}
return $items;
}
$items = getItems();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click and Drag Ajax Table</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript">
function updateOrder()
{
var params = {
method : 'post',
parameters : Sortable.serialize('itemlist'),
onLoading: function(){$('msg').show()}, // optional
onLoaded: function(){$('msg').hide()} // optional
};
new Ajax.Request('process.php', params);
// pokial pouzivate podmienku WHERE odkomentujte si nasledujuci riadok a zakomentujte horny
//new Ajax.Request('process.php<? //echo $_GET['category']; ?>', params);
}
</script>
<style type="text/css">
.list {
width:400px;
cursor: move;
list-style: none;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list li {
border:1px solid #e0c77b;
padding: 5px;
margin:3px 0;
color:#444;
font-weight:bold;
background:#99ffff;
}
.list li:hover {
background-color: #ffcc66;
}
.hint {
margin:10px 0;
background:#99ffff;
padding:6px;
}
#msg {
width:100%;
margin:10px 0;
background:url(loading.gif) no-repeat 0 50%;
padding-left:35px;
}
</style>
</head>
<body>
<h1>Click and Drag Ajax Table</h1>
<div class="hint">Zmente si poradie tabulky ako chcete. Skuste si refreshnut stranku, poradie zostava tak ako ste si ho zadali. :-))
</div>
<div id="msg" style="display:none">
Updating...
</div>
<ul id="itemlist" class="list">
<?
foreach ($items as $id => $title) { ?>
<li id="item_<? echo $id ?>"><? echo $title ?></li>
<? } ?>
</ul>
<script type="text/javascript">
Sortable.create('itemlist', { onUpdate: updateOrder, treeTag: 'ul', tag: 'li' });
</script>
</body>
</html>
Ako posledny subor co potrebujeme vytvorit je subor process.php ktory na bude vykonavat cely proces pohybu tabulky.
process.php
<?
include_once('database.php');
function getItems(){
$query = 'SELECT id,title FROM nazov_vasej_tabulky ORDER BY id DESC';
//pokial pouzivate podmienku WHERE odkomentujte si nasledujuci riadok a zakomentujte horny
//$query = 'SELECT id,title FROM nazov_vasej_tabulky WHERE category = '".$_GET['category']."' ORDER BY id DESC';
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
$items[$row['id']] = $row['title'];
}
return $items;
}
function updateItems($key){
$sort = 1;
foreach ($_POST[$key] as $itemid) {
mysql_query("UPDATE nazov_vasej_tabulky SET poradie = '$sort' WHERE id = '$itemid'");
$sort++;
}
}
updateItems('itemlist');
?>
Aby bol kompletny proces uspesny potrebujeme este 4 javascriptove subory (dragdrop.js,effects.js,prototype.js a scriptaculous.js) z ktorych dva su vlozene medzi head tagy ako je to na ukazke. Subory si mozete stiahnut odtialto. Vsetky 4 subory je vsak potrebne mat v jednom adresari !!!
