[JS] Volgorde aanpassen
Ik ben opzoek naar een script waarmee je de rijen van een tabel (of de li elementen van een ul eventueel) kunt verplaatsen.
Ik wil dus dat je de rij kunt slepen naar zijn nieuwe positie en dat die nieuwe positie dan in de database wordt opgeslagen (en de nieuwe positie van de rest dus ook, want als je 6 naar 3 verplaatst veranderen ook de nummers 3,4 en 5.
Het liefst met mootools omdat dat het framework is dat ik ook voor mijn andere acties gebruik.
Greetz
Newb
Gesponsorde koppelingen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php
header ('Content-type: text/html; charset=UTF-8');
ini_set ('display_errors', 1);
error_reporting (E_ALL);
require_once '../classes/class.core.php';
require_once '../classes/class.database.php';
require_once 'authenticatie.php';
$config = array (
'title' => 'hier je titel'
);
$html = '';
// updaten?
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset ($_POST['serial_nr'])) {
$i = 0;
foreach ($_POST['serial_nr'] as $title) {
$i++;
$sql = "
UPDATE pages
SET tracking_nr = " . $i . "
WHERE title = '" . mysql_real_escape_string ($title) . "'
";
if ($db->query ($sql)) {
$db->set_msg ('<p>Volgorde aangepast voor <strong>' . $title . '</strong></p>');
}
}
}
}
$html = '';
$sql = "
SELECT title, tracking_nr
FROM pages
ORDER BY tracking_nr ASC
";
$html .= '
<form method="post" action="">
<div id="sortable">
';
$i = 0;
foreach ($db->get_records ($sql) as $row) {
$i++;
$html .= PHP_EOL . '<p>' . $i . '. <input class="drag' . ($i % 2) . '" readonly="true" name="serial_nr[]" value="' . $row['title'] . '" /></p>';
}
$html .= '
</div>
<p><input type="submit" value="opslaan" /></p>
</form>
';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $config['title']; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/leonivanveen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/beheer.css" />
<script type="text/javascript" src="../ajaxfilemanager/jscripts/tiny_mce/tiny_mce.js"></script>
<!--script type="text/javascript" src="../ajaxfilemanager/jscripts/general.js"></script-->
<script type="text/javascript" src="js/tiny_mce_init.js"></script>
<script type="text/javascript" src="../mootools/mootools.js"></script>
<script type="text/javascript" src="js/edit.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
new Sortables($('sortable'));
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $config['title']; ?></h1>
</div>
<?php
// echo '<pre>' . print_r ($config, true) . '</pre>';
echo $db->get_errs_html ();
echo $db->get_msgs_html ();
?>
<?php
require 'nav.php';
echo $html;
?>
</div>
</body>
</html>
header ('Content-type: text/html; charset=UTF-8');
ini_set ('display_errors', 1);
error_reporting (E_ALL);
require_once '../classes/class.core.php';
require_once '../classes/class.database.php';
require_once 'authenticatie.php';
$config = array (
'title' => 'hier je titel'
);
$html = '';
// updaten?
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset ($_POST['serial_nr'])) {
$i = 0;
foreach ($_POST['serial_nr'] as $title) {
$i++;
$sql = "
UPDATE pages
SET tracking_nr = " . $i . "
WHERE title = '" . mysql_real_escape_string ($title) . "'
";
if ($db->query ($sql)) {
$db->set_msg ('<p>Volgorde aangepast voor <strong>' . $title . '</strong></p>');
}
}
}
}
$html = '';
$sql = "
SELECT title, tracking_nr
FROM pages
ORDER BY tracking_nr ASC
";
$html .= '
<form method="post" action="">
<div id="sortable">
';
$i = 0;
foreach ($db->get_records ($sql) as $row) {
$i++;
$html .= PHP_EOL . '<p>' . $i . '. <input class="drag' . ($i % 2) . '" readonly="true" name="serial_nr[]" value="' . $row['title'] . '" /></p>';
}
$html .= '
</div>
<p><input type="submit" value="opslaan" /></p>
</form>
';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $config['title']; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/leonivanveen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/beheer.css" />
<script type="text/javascript" src="../ajaxfilemanager/jscripts/tiny_mce/tiny_mce.js"></script>
<!--script type="text/javascript" src="../ajaxfilemanager/jscripts/general.js"></script-->
<script type="text/javascript" src="js/tiny_mce_init.js"></script>
<script type="text/javascript" src="../mootools/mootools.js"></script>
<script type="text/javascript" src="js/edit.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
new Sortables($('sortable'));
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo $config['title']; ?></h1>
</div>
<?php
// echo '<pre>' . print_r ($config, true) . '</pre>';
echo $db->get_errs_html ();
echo $db->get_msgs_html ();
?>
<?php
require 'nav.php';
echo $html;
?>
</div>
</body>
</html>
Heb je dat toevallig ook ergens online staan?
Ik heb het databasedeel er ff uitgehaald, maar da's redelijk simpel. Ik heb gewoon een tabel met paginatitels en volgnummers, die haal je op met een select query. Na verzenden van het formulier komen de pagina's in de nieuwe volgorde binnen. Dan laat je gewoon een tellertje meelopen voor het nieuwe volgnummer per titel en voer je een update query uit.
Thx!
