reorder-html-table-dmv-js
Gesponsorde koppelingen
PHP script bestanden
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* Reordering library
*
* CHANGELOG
* =================
* DATE VERSION AUTHOR DESCRIPTION
* 2007-09-10 1.0.1 Rudie Dirkx - Initial release
* 2007-09-13 1.0.2 Rudie Dirkx - Replaced eval() with [''+]
* - Added function G(), to replace $() (which is not in this library)
* - Updated function mf_SelectRow():
* - Original background color is now restored
* - More efficient way of selecting (removed a piece of identical code)
*
* TODO
* =================
* Dynamic UP and DOWN action buttons -> in the same row as the selected row (when none selected, hide buttons)
*/
var Reorder = function( f_objTable, f_szHiliteBackgroundColor, f_szHtmlIdPrefix ) {
this.m_objTable = f_objTable;
this.m_szHiliteBackgroundColor = f_szHiliteBackgroundColor;
this.m_szHtmlIdPrefix = f_szHtmlIdPrefix;
};
Reorder.version = '1.0.2';
Reorder.prototype = {
m_objTable : null,
m_szHtmlIdPrefix : '',
m_szSelectedId : '',
m_szHiliteBackgroundColor : '',
m_szCurrentRowBackgroundColor : '',
m_bReorderTableIds : false,
m_iReorderTableColumnIndex : 0,
m_iReorderTableStartsAt : 0,
m_szOrderListPrefix : '',
m_szOrderListGlue : ',',
G : function(id) {
if ( 'object' != typeof id ) {
id = document.getElementById(id);
}
return id;
},
mf_SelectRow : function( f_szRowId ) {
objRow = this.G(f_szRowId);
if ( this.m_szSelectedId && this.G(this.m_szSelectedId) )
{
// Unselect
this.G(this.m_szSelectedId).style.backgroundColor = this.m_szCurrentRowBackgroundColor;
if ( f_szRowId == this.m_szSelectedId )
{
this.m_szSelectedId = '';
return false;
}
}
// Select new row
this.m_szCurrentRowBackgroundColor = objRow.style.backgroundColor;
objRow.style.backgroundColor = this.m_szHiliteBackgroundColor;
this.m_szSelectedId = f_szRowId;
return false;
},
mf_MoveSelectedUp : function() {
return this.mf_MoveSelect('previous');
},
mf_MoveSelectedDown : function() {
return this.mf_MoveSelect('next');
},
mf_MoveSelect : function( f_szDirection ) {
if ( !this.m_szSelectedId || !this.G(this.m_szSelectedId) )
{
return false;
}
objThisRow = this.G(this.m_szSelectedId);
objOtherRow = objThisRow[f_szDirection+'Sibling'];
while ( objOtherRow && 1 != objOtherRow.nodeType )
{
objOtherRow = objOtherRow[f_szDirection+'Sibling'];
}
if ( !objOtherRow )
{
return false;
}
tbody = this.m_objTable;
objCopyRow = objThisRow.cloneNode(true);
if ( 'next' == f_szDirection )
{
if ( objOtherRow.nextSibling )
{
tbody.insertBefore(objCopyRow, objOtherRow.nextSibling);
}
else
{
tbody.appendChild(objCopyRow);
}
}
else
{
tbody.insertBefore(objCopyRow, objOtherRow);
}
tbody.removeChild(objThisRow);
if ( this.m_bReorderTableIds )
{
r = this.m_objTable.rows;
for ( i=0; i<r.length; i++ )
{
r[i].cells[this.m_iReorderTableColumnIndex].innerHTML = "" + (i+this.m_iReorderTableStartsAt) + "";
}
}
return false;
},
mf_GetOrderList : function() {
rows = this.m_objTable.rows;
l = this.m_szHtmlIdPrefix.length;
szList = "";
for ( i=0; i<rows.length; i++ )
{
szList += this.m_szOrderListGlue + rows[i].id.substr(l);
}
return this.m_szOrderListPrefix + szList.substr(this.m_szOrderListGlue.length);
}
};
* Reordering library
*
* CHANGELOG
* =================
* DATE VERSION AUTHOR DESCRIPTION
* 2007-09-10 1.0.1 Rudie Dirkx - Initial release
* 2007-09-13 1.0.2 Rudie Dirkx - Replaced eval() with [''+]
* - Added function G(), to replace $() (which is not in this library)
* - Updated function mf_SelectRow():
* - Original background color is now restored
* - More efficient way of selecting (removed a piece of identical code)
*
* TODO
* =================
* Dynamic UP and DOWN action buttons -> in the same row as the selected row (when none selected, hide buttons)
*/
var Reorder = function( f_objTable, f_szHiliteBackgroundColor, f_szHtmlIdPrefix ) {
this.m_objTable = f_objTable;
this.m_szHiliteBackgroundColor = f_szHiliteBackgroundColor;
this.m_szHtmlIdPrefix = f_szHtmlIdPrefix;
};
Reorder.version = '1.0.2';
Reorder.prototype = {
m_objTable : null,
m_szHtmlIdPrefix : '',
m_szSelectedId : '',
m_szHiliteBackgroundColor : '',
m_szCurrentRowBackgroundColor : '',
m_bReorderTableIds : false,
m_iReorderTableColumnIndex : 0,
m_iReorderTableStartsAt : 0,
m_szOrderListPrefix : '',
m_szOrderListGlue : ',',
G : function(id) {
if ( 'object' != typeof id ) {
id = document.getElementById(id);
}
return id;
},
mf_SelectRow : function( f_szRowId ) {
objRow = this.G(f_szRowId);
if ( this.m_szSelectedId && this.G(this.m_szSelectedId) )
{
// Unselect
this.G(this.m_szSelectedId).style.backgroundColor = this.m_szCurrentRowBackgroundColor;
if ( f_szRowId == this.m_szSelectedId )
{
this.m_szSelectedId = '';
return false;
}
}
// Select new row
this.m_szCurrentRowBackgroundColor = objRow.style.backgroundColor;
objRow.style.backgroundColor = this.m_szHiliteBackgroundColor;
this.m_szSelectedId = f_szRowId;
return false;
},
mf_MoveSelectedUp : function() {
return this.mf_MoveSelect('previous');
},
mf_MoveSelectedDown : function() {
return this.mf_MoveSelect('next');
},
mf_MoveSelect : function( f_szDirection ) {
if ( !this.m_szSelectedId || !this.G(this.m_szSelectedId) )
{
return false;
}
objThisRow = this.G(this.m_szSelectedId);
objOtherRow = objThisRow[f_szDirection+'Sibling'];
while ( objOtherRow && 1 != objOtherRow.nodeType )
{
objOtherRow = objOtherRow[f_szDirection+'Sibling'];
}
if ( !objOtherRow )
{
return false;
}
tbody = this.m_objTable;
objCopyRow = objThisRow.cloneNode(true);
if ( 'next' == f_szDirection )
{
if ( objOtherRow.nextSibling )
{
tbody.insertBefore(objCopyRow, objOtherRow.nextSibling);
}
else
{
tbody.appendChild(objCopyRow);
}
}
else
{
tbody.insertBefore(objCopyRow, objOtherRow);
}
tbody.removeChild(objThisRow);
if ( this.m_bReorderTableIds )
{
r = this.m_objTable.rows;
for ( i=0; i<r.length; i++ )
{
r[i].cells[this.m_iReorderTableColumnIndex].innerHTML = "" + (i+this.m_iReorderTableStartsAt) + "";
}
}
return false;
},
mf_GetOrderList : function() {
rows = this.m_objTable.rows;
l = this.m_szHtmlIdPrefix.length;
szList = "";
for ( i=0; i<rows.length; i++ )
{
szList += this.m_szOrderListGlue + rows[i].id.substr(l);
}
return this.m_szOrderListPrefix + szList.substr(this.m_szOrderListGlue.length);
}
};
Het voorbeeld (index.php):
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<?php
$bReorderNumbering = true;
if ( isset($_POST['l']) )
{
$l = explode(",", $_POST['l']);
if ( empty($l) || !is_array($l) )
{
exit('ERRORInvalid input list! Try again!?');
}
setCookie('list_order', implode(",", array_map('trim', $l)), time()+99999999);
exit('New list was saved!');
}
$arrData = array(
1 => array('Rudie', 'Dirkx', 'Y'),
array('Johan', 'van Duren', 'Y'),
array('Thiemen', 'Wijnja', 'Y'),
array('Nils', 'Raijmakers', 'N'),
array('Cihad', 'Yelken', 'N'),
array('Sjuul', 'Meijers', 'Y'),
);
$arrOrder = isset($_COOKIE['list_order']) ? explode(",", $_COOKIE['list_order']) : array_keys($arrData);
?>
<html>
<head>
<title>Reorder Table</title>
<script type="text/javascript" src="/_inc/general_1_2_1.js"></script>
<script type="text/javascript" src="/_inc/ajax_1_2_1.js"></script>
<script type="text/javascript" src="/_inc/reorder_1_0_2.js"></script>
<script type="text/javascript">
<!--//
// UP = 38, DOWN = 40, LEFT = 37, RIGHT = 39
document.onkeyup = function(e) {
e = e || window.event;
if ( !e ) return;
if ( e.keyCode == 38 ) {
objOrderTable.mf_MoveSelectedUp();
}
else if ( e.keyCode == 40 ) {
objOrderTable.mf_MoveSelectedDown();
}
else if ( e.keyCode == 37 ) {
// Select previous row
if ( objOrderTable.m_szSelectedId && $(objOrderTable.m_szSelectedId) && 0 < $(objOrderTable.m_szSelectedId).sectionRowIndex ) {
SR(objOrderTable.m_objTable.rows[$(objOrderTable.m_szSelectedId).sectionRowIndex-1]);
}
}
else if ( e.keyCode == 39 ) {
// Select next row
if ( objOrderTable.m_szSelectedId && $(objOrderTable.m_szSelectedId) && objOrderTable.m_objTable.rows.length > $(objOrderTable.m_szSelectedId).sectionRowIndex+1 ) {
SR(objOrderTable.m_objTable.rows[$(objOrderTable.m_szSelectedId).sectionRowIndex+1]);
}
}
else if ( e.keyCode == 27 ) {
// Unselect row
if ( objOrderTable.m_szSelectedId ) {
objOrderTable.mf_SelectRow(objOrderTable.m_szSelectedId);
}
}
}
function SR(o) {
objOrderTable.mf_SelectRow(o.id);
}
//-->
</script>
</head>
<body>
<p><?php echo implode(",", $arrOrder); ?></p>
<table border="1" cellpadding="2">
<thead>
<tr>
<th>id</th>
<th>#</th>
<th>first</th>
<th>last</th>
<th>active</th>
<th width="250"><input type="button" value="UP" onclick="return objOrderTable.mf_MoveSelectedUp();" /> <input type="button" value="DOWN" onclick="return objOrderTable.mf_MoveSelectedDown();" /></th>
</tr>
</thead>
<tbody id="reorder_table_body">
<?php
$c = array('yellow','blue','red');
foreach ( $arrOrder AS $k => $id )
{
$data = $arrData[$id];
// $p = $bReorderNumbering ? $k+1 : $id;
echo' <tr style="background-color:'.$c[array_rand($c)].';" id="rt_'.$id.'" onclick="SR(this);">'."\n";
echo' <th>'.$id.'</th>'."\n";
echo' <td>'.($k+1).'</td>'."\n";
echo' <td>'.$data[0].'</td>'."\n";
echo' <td>'.$data[1].'</td>'."\n";
echo' <td>'.$data[2].'</td>'."\n";
echo' </tr>'."\n";
}
?>
</tbody>
</table>
<script type="text/javascript">
<!--//
var _page = '<?php echo basename($_SERVER['PHP_SELF']); ?>';
// Create an instance of the Reorder class: [ object TableBody, string HilightColor, string RowHtmlIdPrefix ]
var objOrderTable = new Reorder( $('reorder_table_body'), 'green', 'rt_' );
// Prefix for result of mf_GetOrderList() when the table is reordered
objOrderTable.m_szOrderListPrefix = '';
// The string used to glue the row ID's together when mf_GetOrderList() is called
objOrderTable.m_szOrderListGlue = ',';
<?php if ( $bReorderNumbering ) { ?>
// This example reorders the # of the table, which means it's renumbered every time a move is made:
objOrderTable.m_bReorderTableIds = true; // true when using this option (default: false)
objOrderTable.m_iReorderTableStartsAt = 1; // the first # in the table (default: 1)
objOrderTable.m_iReorderTableColumnIndex = 1; // the column in which the # is located (usually 0 (default) or 1)
<?php } ?>
// Save the reordered table with Ajax. My own Ajax lib is used for this, but really any method can be used.
// The only Reorder lib aspect used here is mf_GetOrderList():
function saveList() {
szList = objOrderTable.mf_GetOrderList();
new Ajax(_page, {
params : 'l='+szList,
onComplete : function(a) {
if ( 'ERROR' == a.responseText.substr(0,5) ) {
alert(a.responseText.substr(5));
return;
}
alert(a.responseText);
}
});
return false;
}
//-->
</script>
<p><input type="button" value="OrderList" onclick="return saveList()" /></p>
<div>
<h2>About</h2>
<p style="font-weight:bold;">This is not the easiest example. This example includes keyboard shortcuts, saving with Ajax and reordering the # of the table.</p>
<p>To move a row vertically, select a row by clicking on it and use the UP and DOWN button to move it respectively UP and DOWN.</p>
<p>When a row is selected, you can move also by using the UP and DOWN arrows on your keyboard.</p>
<p>To change the selected row, use the LEFT and RIGHT arrows on your keyboard. Hit Escape to unselect a row.</p>
</div>
</body>
</html>
$bReorderNumbering = true;
if ( isset($_POST['l']) )
{
$l = explode(",", $_POST['l']);
if ( empty($l) || !is_array($l) )
{
exit('ERRORInvalid input list! Try again!?');
}
setCookie('list_order', implode(",", array_map('trim', $l)), time()+99999999);
exit('New list was saved!');
}
$arrData = array(
1 => array('Rudie', 'Dirkx', 'Y'),
array('Johan', 'van Duren', 'Y'),
array('Thiemen', 'Wijnja', 'Y'),
array('Nils', 'Raijmakers', 'N'),
array('Cihad', 'Yelken', 'N'),
array('Sjuul', 'Meijers', 'Y'),
);
$arrOrder = isset($_COOKIE['list_order']) ? explode(",", $_COOKIE['list_order']) : array_keys($arrData);
?>
<html>
<head>
<title>Reorder Table</title>
<script type="text/javascript" src="/_inc/general_1_2_1.js"></script>
<script type="text/javascript" src="/_inc/ajax_1_2_1.js"></script>
<script type="text/javascript" src="/_inc/reorder_1_0_2.js"></script>
<script type="text/javascript">
<!--//
// UP = 38, DOWN = 40, LEFT = 37, RIGHT = 39
document.onkeyup = function(e) {
e = e || window.event;
if ( !e ) return;
if ( e.keyCode == 38 ) {
objOrderTable.mf_MoveSelectedUp();
}
else if ( e.keyCode == 40 ) {
objOrderTable.mf_MoveSelectedDown();
}
else if ( e.keyCode == 37 ) {
// Select previous row
if ( objOrderTable.m_szSelectedId && $(objOrderTable.m_szSelectedId) && 0 < $(objOrderTable.m_szSelectedId).sectionRowIndex ) {
SR(objOrderTable.m_objTable.rows[$(objOrderTable.m_szSelectedId).sectionRowIndex-1]);
}
}
else if ( e.keyCode == 39 ) {
// Select next row
if ( objOrderTable.m_szSelectedId && $(objOrderTable.m_szSelectedId) && objOrderTable.m_objTable.rows.length > $(objOrderTable.m_szSelectedId).sectionRowIndex+1 ) {
SR(objOrderTable.m_objTable.rows[$(objOrderTable.m_szSelectedId).sectionRowIndex+1]);
}
}
else if ( e.keyCode == 27 ) {
// Unselect row
if ( objOrderTable.m_szSelectedId ) {
objOrderTable.mf_SelectRow(objOrderTable.m_szSelectedId);
}
}
}
function SR(o) {
objOrderTable.mf_SelectRow(o.id);
}
//-->
</script>
</head>
<body>
<p><?php echo implode(",", $arrOrder); ?></p>
<table border="1" cellpadding="2">
<thead>
<tr>
<th>id</th>
<th>#</th>
<th>first</th>
<th>last</th>
<th>active</th>
<th width="250"><input type="button" value="UP" onclick="return objOrderTable.mf_MoveSelectedUp();" /> <input type="button" value="DOWN" onclick="return objOrderTable.mf_MoveSelectedDown();" /></th>
</tr>
</thead>
<tbody id="reorder_table_body">
<?php
$c = array('yellow','blue','red');
foreach ( $arrOrder AS $k => $id )
{
$data = $arrData[$id];
// $p = $bReorderNumbering ? $k+1 : $id;
echo' <tr style="background-color:'.$c[array_rand($c)].';" id="rt_'.$id.'" onclick="SR(this);">'."\n";
echo' <th>'.$id.'</th>'."\n";
echo' <td>'.($k+1).'</td>'."\n";
echo' <td>'.$data[0].'</td>'."\n";
echo' <td>'.$data[1].'</td>'."\n";
echo' <td>'.$data[2].'</td>'."\n";
echo' </tr>'."\n";
}
?>
</tbody>
</table>
<script type="text/javascript">
<!--//
var _page = '<?php echo basename($_SERVER['PHP_SELF']); ?>';
// Create an instance of the Reorder class: [ object TableBody, string HilightColor, string RowHtmlIdPrefix ]
var objOrderTable = new Reorder( $('reorder_table_body'), 'green', 'rt_' );
// Prefix for result of mf_GetOrderList() when the table is reordered
objOrderTable.m_szOrderListPrefix = '';
// The string used to glue the row ID's together when mf_GetOrderList() is called
objOrderTable.m_szOrderListGlue = ',';
<?php if ( $bReorderNumbering ) { ?>
// This example reorders the # of the table, which means it's renumbered every time a move is made:
objOrderTable.m_bReorderTableIds = true; // true when using this option (default: false)
objOrderTable.m_iReorderTableStartsAt = 1; // the first # in the table (default: 1)
objOrderTable.m_iReorderTableColumnIndex = 1; // the column in which the # is located (usually 0 (default) or 1)
<?php } ?>
// Save the reordered table with Ajax. My own Ajax lib is used for this, but really any method can be used.
// The only Reorder lib aspect used here is mf_GetOrderList():
function saveList() {
szList = objOrderTable.mf_GetOrderList();
new Ajax(_page, {
params : 'l='+szList,
onComplete : function(a) {
if ( 'ERROR' == a.responseText.substr(0,5) ) {
alert(a.responseText.substr(5));
return;
}
alert(a.responseText);
}
});
return false;
}
//-->
</script>
<p><input type="button" value="OrderList" onclick="return saveList()" /></p>
<div>
<h2>About</h2>
<p style="font-weight:bold;">This is not the easiest example. This example includes keyboard shortcuts, saving with Ajax and reordering the # of the table.</p>
<p>To move a row vertically, select a row by clicking on it and use the UP and DOWN button to move it respectively UP and DOWN.</p>
<p>When a row is selected, you can move also by using the UP and DOWN arrows on your keyboard.</p>
<p>To change the selected row, use the LEFT and RIGHT arrows on your keyboard. Hit Escape to unselect a row.</p>
</div>
</body>
</html>