reorder-html-table-dmv-js

Gesponsorde koppelingen

PHP script bestanden

  1. reorder-html-table-dmv-js

« Lees de omschrijving en reacties

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
/**
 * 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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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();" />&nbsp;&nbsp;<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>

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.