OmniGrid - Advanced DataGrid for Mootools

The OmniGrid component is inspired by two similar components: FlexGrid jQuery and phatfusion:sortableTable and partly uses their source code. It was developed due to a lack of powerful DataGrid for Mootools 1.2 library. The author is Marko Šantić from Omnisdata company.

Omnigrid - Advanced DataGrid for Mootools by Omnisdata Ltd is licensed under a Creative Commons Attribution 3.0 Unported License. If you copy, distribute or transmit the source code please retain the aforementioned copyright notice and the author name.

Please send every new feature you write to my email.

Methods

• constructor(el, options:Object):Object - el HTML element or string (element id), options (see Usage section)
• refresh():Nothing
• loadData(url:String):Nothing
• setData(data:Array):Nothing
• setColumnModel(columnModel:Object):Nothing
• getDataByRow():Object
• setDataByRow(index:Number, data:Object):Nothing
• getSelectedIndices():Array
• removeAll():Nothing
• filter(key:String):Nothing
• clearFilter():Nothing
• gotoPage(page:Number):Nothing
• setPerPage(perpage:Number):Nothing

Events

• click - on row click
• dblclick - on row double click

Database response from server-script to Omnigrid

Response from dynamic scripts (php, asp, ...) that returns data from database must be in JSON format like this:

{"page":"1","total":"101","data":[{object},{object},{object},{object},...]}

Database request from Omnigrid to server-script

Omnigrid will send following variables via POST method: [page, perpage, [sorton,sortby] (only if serverSort option is true) ]

Column model

	var cmu = [
	{
		header: "Column name",
		dataIndex: 'database_attribut_name',
		dataType:'number|string|date',
		hidden:true|false,
		width:Number // column default width
	}, 
	{Object},
	{Object},
	...
	]
								

<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" />
<script type="text/javascript" src="mootools/mootools-1.2.js"></script>
<script type="text/javascript" src="mootools/mootools-1.2-more.js"></script>
<script type="text/javascript" src="omnigrid.js"></script>

<script type="text/javascript">
	
    function onGridSelect(evt)
    {
         var str = 'row: '+evt.row+' indices: '+evt.indices;
         str += ' id: '+evt.target.getDataByRow(evt.row).id;
         
         alert( str );
    }
	
    function gridButtonClick(button, grid)
    {
         alert(button);
    }
	
    var cmu = [
            {
               header: "ID",
               dataIndex: 'help_category_id',
               dataType:'number'
            },
            {
               header: "Parent ID",
               dataIndex: 'parent_category_id',
               dataType:'number',
               width:50
            },
            {
               header: "Name",
               dataIndex: 'name',
               dataType:'string',
               width:200
            }];	
    
    window.addEvent("domready", function(){
	                
	    datagrid = new omniGrid('mygrid', {
	        columnModel: cmu,
	        buttons : [
	          {name: 'Add', bclass: 'add', onclick : gridButtonClick},
	          {name: 'Delete', bclass: 'delete', onclick : gridButtonClick},
	          {separator: true},
	          {name: 'Duplicate', bclass: 'duplicate', onclick : gridButtonClick}
	        ],
	        url:"data.php",
	        perPageOptions: [10,20,50,100,200],
	        perPage:10,
	        page:1,
	        pagination:true,
	        serverSort:true,
	        showHeader: true,
	        alternaterows: true,
	        showHeader:true,
	        sortHeader:false,
	        resizeColumns:true,
	        multipleSelection:true,
	        
	        // uncomment this if you want accordion behavior for every row
	        /*
	        accordion:true,
	        accordionRenderer:accordionFunction,
	        autoSectionToggle:false,
	        */
				
	        width:600,
	        height: 400
	    });
	    
	    datagrid.addEvent('click', onGridSelect);
	    		
     });
		
</script>

<div id="mygrid" ></div>

// *********************** data.php ********************
<?php
	
	$pagination = false;
	if ( isset($_REQUEST["page"]) )
	{
		$pagination = true;
		
		$page = intval($_REQUEST["page"]);
		$perpage = intval($_REQUEST["perpage"]);
	}
	
	// this variables Omnigrid will send only if serverSort option is true
	$sorton = $_REQUEST["sorton"];
	$sortby = $_REQUEST["sortby"];
	
	mysql_connect("localhost", "root", "");
	mysql_select_db("mysql");
	
	$n = ( $page -1 ) * $perpage;
	
	
	
	$result = mysql_query("SELECT COUNT(*) AS count FROM help_category");
	$row = mysql_fetch_object($result);
	$total = $row->count;	

	$limit = "";
	
	if ( $pagination )
		$limit = "LIMIT $n, $perpage";
	
	$result = mysql_query("SELECT * FROM help_category $limit");

	$ret = array();
	while ($row = mysql_fetch_object($result)) {
		array_push($ret, $row);
	}

	$ret = array("page"=>$page, "total"=>$total, "data"=>$ret);

	echo json_encode($ret);

	mysql_free_result($result);
          
?>