Home | Contact | About Me

 

MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.

PHP Sample

First you have to include the javascript libraries

                <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/myui.js"></script>
            

Then you define a table model like this:

				var tableModel = {
					options : {
						width: '640px',
						title: 'JAW Motors Inventory',
						addSettingBehavior : false,
						pager: {
						pageParameter : 'page'
					},
					onCellBlur : function(element, value, x, y, id) {
						//alert(value);            
					},
					toolbar : {
						elements: [MY.TableGrid.ADD_BTN, MY.TableGrid.DEL_BTN, MY.TableGrid.SAVE_BTN],
						onSave: function() {
							alert('on save handler');
						},
						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 : 'carId',
						title : 'Id',
						width : 30,
						editable: true,
						sortable: false,
						editor: new MY.TableGrid.CellCheckbox({
							selectable : true
						})
					},
					{
						id: 'generalInfo',
						title: 'General Info',
						children : [
							{
								id : 'manufacturer',
								title : 'Manufacturer',
								width : 140,
								sortable: true,
								editable: true
							},
							{
								id : 'model',
								title : 'Model',
								width : 90,
								editable: true
							},
							{
								id : 'year',
								title : 'Year',
								width : 60,
								editable: true,
								editor: new MY.TextField({
								    validate : function(value, errors){
                                        if (parseInt(value) <= 1900) {
                                            errors.push('year not allowed');
                                            return false;
                                        }
								        return true;
								    }
								})
							}
						]
					},
					{
						id : 'price',
						title : 'Price',
						width : 70,
						type: 'number',
						editable: true
					},
                    {
                        id : 'dateAcquired',
                        title : 'Date acquired',
                        width : 120,
                        editable: true,
                        editor: new MY.DatePicker({
                            format : 'MM/dd/yyyy',
                            validate: function(value, errors) {
                                if (value != null && value.isAfter(new Date())) {
                                    errors.push('Date selected is after than today');
                                    return false;
                                }
                                return true;
                            }
                        })
                    },
					{
						id : 'origCountry',
						title : 'Origin Country',
						width : 100,
						editable: true,
						editor: new MY.ComboBox({
							items: countryList
						})                
					}
				],
				url: 'get_all_cars.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');
    
                    $rowsByPage = 10;
                    $page = $_REQUEST['page'];
                    if ($page == null) $page = 1;
                    $sort = $_REQUEST['sortColumn'];
                    if ($sort == null) $sort = 'model';
                    $ascDescFlg = $_REQUEST['ascDescFlg'];
                    if ($ascDescFlg == null) $ascDescFlg = 'ASC';
    
                    $sortColumn = 'manuf_name'; 
                    if ($sort == 'year') 
                        $sortColumn = 'model_year';
                    else if ($sort == 'model') 
                        $sortColumn = 'model_name';
                    else if ($sort == 'price')    
                        $sortColumn = 'car_ask_price';
    
                    $con = mysql_connect("<YOUR SERVER>", "<YOUR USER>", "<YOUR PASSWORD>");
    
                    if (!$con)  {
                        die('Could not connect: ' . mysql_error());
                    }
    
                    mysql_select_db("jawdb", $con);
    
                    $query = 'select count(1) ' .
                             'from cars_for_sale cfs, ' .
                             '     car_models cm, ' .
                             '     manufacturers m ' .
                             'where cfs.model_id = cm.model_id and ' .
                             'cm.manuf_id = m.manuf_id';
    
                    $result = mysql_query($query);
                    $row = mysql_fetch_array($result);
                    $count = $row[0];
    
                    $numberOfPages = 0;
                    $from = 0;
                    $to = 0;
                    $rows = array();
    
                    if ($count > 0) {
                        $numberOfPages = floor($count / $rowsByPage); 
                        if (($count % $rowsByPage) > 0) $numberOfPages++;
                        if ($page > $numberOfPages) $page = $numberOfPages;
                        $from = (($page - 1) * $rowsByPage);
                        $to = ($page * $rowsByPage) - 1;
                        if ($to > $count) $to = $count; 
    
                        $query = 'select a.* from ( '.
                                 'select m.manuf_name, ' .
                                 '       cm.model_id, ' .
                                 '       cm.model_name, ' .
                                 '       cm.model_year, ' .
                                 '       cfs.car_id, ' .
                                 '       cfs.car_ask_price, ' .
                                 '       date_format(ifnull(cfs.car_date_acquired, now()), \'%m/%d/%Y\') car_date_acquired ' .
                                 'from cars_for_sale cfs, ' .
                                 '     car_models cm, ' .
                                 '     manufacturers m ' .
                                 'where cfs.model_id = cm.model_id and ' .
                                 'cm.manuf_id = m.manuf_id ' .
                                 'order by ' . $sortColumn . ' ' . $ascDescFlg . ') a ' .
                                 'limit ' . $from . ',' . $to;
    
                        $result = mysql_query($query);
                        $rows = array();
                        $idx = 0;
    
                        while($row = mysql_fetch_array($result)) {
                               $rows[$idx++] = array($row['car_id'], $row['manuf_name'], $row['model_name'], $row['model_year'], $row['car_ask_price'], $row['car_date_acquired'], 'US', $row['model_name'], '1');
                        }
                    } 
                    mysql_close($con);
                ?>
                {
                    options: {
                        pager: {
                            currentPage: <?php echo $page?>,
                            total: <?php echo $count?>,
                            from: <?php echo ($from + 1)?>,
                            to: <?php echo ($to + 1)?>,
                            pages: <?php echo $numberOfPages?>
                        }
                    },
                    rows : <?php print json_encode($rows); ?>
                }