New MyTableGrid Sample

First you have to include the javascript libraries

                <link type="text/css" href="../css/mtg/MyTableGrid.css" rel="stylesheet">
                <link type="text/css" href="../css/mtg/calendar.css" rel="stylesheet">
                <script type="text/javascript" src="../scripts/lib/prototype.js"></script>
                <script type="text/javascript" src="../scripts/lib/scriptaculous.js"></script>
                <script type="text/javascript" src="../scripts/mtg/calendar_date_select.js"></script>
                <script type="text/javascript" src="../scripts/mtg/format_american.js"></script>
                <script type="text/javascript" src="../scripts/mtg/MyTableGrid.js"></script>
                <script type="text/javascript" src="../scripts/mtg/KeyTable.js"></script>
                <script type="text/javascript" src="../scripts/mtg/controls.js"></script>
            

note: The order of the libraries is important.

Then you define a table model like this

                var tableModel = {
                    options : {
                        width: '640px',
                        title: 'Manufacturers',
                        toolbar : {
                            elements: [MyTableGrid.ADD_BTN, MyTableGrid.DEL_BTN, MyTableGrid.SAVE_BTN],
                            onSave: function() {
                                var newRowsAdded = tableGrid1.getNewRowsAdded();
                                var temp = '';
                                for (var i = 0; i < newRowsAdded.length; i++) {
                                    temp += '{';
                                    for (var p in newRowsAdded[i]) {
                                        temp += p + ' : ' + newRowsAdded[i][p] + ', ';
                                    }
                                    temp += '}\n';
                                }
                                alert('added rows: ' + temp);
                                var modifiedRows = tableGrid1.getModifiedRows();
                                temp = '';
                                for (var i = 0; i < modifiedRows.length; i++) {
                                    temp += '{';
                                    for (var p in modifiedRows[i]) {
                                        temp += p + ' : ' + modifiedRows[i][p] + ', ';
                                    }
                                    temp += '}\n';
                                }
                                alert('modified rows: ' + temp);
                                var deletedRows = tableGrid1.getDeletedRows();
                                temp = '';
                                for (var i = 0; i < deletedRows.length; i++) {
                                    temp += '{';
                                    for (var p in deletedRows[i]) {
                                        temp += p + ' : ' + deletedRows[i][p] + ', ';
                                    }
                                    temp += '}\n';
                                }
                                alert('deleted rows: ' + temp);
                            },

                            onAdd: function() {
                                //alert('on add handler');
                            },
                            onDelete: function() {
                                //alert('on delete handler');
                            }
                        },
                        rowClass : function(rowIdx) {
                            var className = '';
                            if (rowIdx % 2 == 0) {
                                className = 'hightlight';
                            }
                            return className;
                        }
                    },
                    columnModel : [
                        {
                            id : 'manufId',
                            title : 'Id',
                            width : 30,
                            editable: true,
                            editor: new MyTableGrid.CellCheckbox({
                                selectable : true
                            })
                        },
                        {
                            id : 'manufName',
                            title : 'Manufacturer',
                            width : 140,
                            editable: true
                        },
                        {
                            id : 'manufDesc',
                            title : 'Description',
                            width : 90,
                            editable: true
                        }
                    ],
                    url: 'get_all_manufacturers.php'
                };
            

As you see you have to define a php page that provides you with the data in json format

                <?php
                    header('Content-type: application/json');

                    $con = mysql_connect("localhost", "root", "admin");

                    if (!$con)  {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db("jawdb", $con);


                    $query = 'select * from manufacturers';

                    $result = mysql_query($query);
                    $rows = array();
                    $idx = 0;

                    while($row = mysql_fetch_array($result)) {
                            $rows[$idx++] = array($row['manuf_id'], $row['manuf_name'], $row['manuf_desc']);
                    }
                    mysql_close($con);
                ?>
                {
                    rows : <?php print json_encode($rows); ?>
                }            
            

Then for redering your datagrid you can use this code:

                window.onload = function() {
                    tableGrid1 = new MyTableGrid(tableModel);
                    tableGrid1.render('mytable1');
                };