Jun
29

zGrid: Best PHP/AJAX Grid System. Good for Newbie web developers

Author ZeeShaN    Category AJAX, JQuery, PHP, Web Development     Tags ,

Few days ago I have developed a Grid system using PHP, jQuery and Ajax. I want to share this with my dear users. It is not very well parametrized or generic but if have little much understanding of jQuery and Ajax then its easy to use. Give your feed back about zGrid.

Table Structure

CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(150) NOT NULL,
  `email` varchar(255) NOT NULL,
  `status` tinyint(1) NOT NULL,
  `orders` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
)

Javascript Functions

var targetUrl = "listing.php"; // show all records
 
// update status
function update_status(id)
{
	if (document.getElementById(id).checked == false) 
	var status = 0;
	else
	var status = 1;
 
	$("#message").text('');
	var id = id.replace('active_','');
 
	$.ajax({
		type: 'post',
		url: 'update_status.php',			
		data: 'id='+id+"&status="+status,
		beforeSend: function(){
 
			$("#loader-"+id).show();
		},
		success: function(e){
			$("#loader-"+id).hide();
			if(e==1)
			$("#message").append("<span>Status has been activated.</span>");
			else
			$("#message").append("<span>Status has been inactivated.</span>");
		}
	});
}
 
// update order 
$(document).ready(function(){
	$('#sortable').sortable({
		update: function(event, ui) {
			var itemOrder = $(this).sortable('toArray').toString();
 
			$.get('update_order.php', {itemOrder:itemOrder});
		}
	});
});
 
 
$(document).ready(function(){	
/// first time record 
var content = $("#sortable"); // main content ul
//content.load(targetUrl);
 
// delete record
 
$('a#delete').livequery('click', function(e) {
	if(confirm('Are you sure you want to delete this record?')==false)
	return false;
	e.preventDefault();
	var parent  = $(this).parent();
	var temp    = parent.attr('id').replace('delete-','');
	var main_tr = $('#id-'+temp);
 
		$.ajax({
			type: 'get',
			url: 'delete.php?id='+ parent.attr('id').replace('delete-',''),
			data: '',
			beforeSend: function(){
			},
			success: function(){
				main_tr.fadeOut(700,function(){
					main_tr.remove();
				});
			}
		});
	});
 
	// sorting records
	$('.hover').click(function(){
		 var content = $("#sortable"); // main content ul
		 content.load(targetUrl+'?sort='+$(this).html());
		 $('.hover').css('background-color','');
		 $(this).css('background-color','#99CC99');
	});
 
});
 
// formValidation
function validateFrm(formType)
{
	if($('#email').val().length < 1 || $('#name').val().length < 1){
		alert('Please fill the required field.');
	}
	else
	{
	    var formParam = $("#customForm").serialize(); 
		if(formType == 'add')
		{
			var file = 'add_record.php';
			var message = 'Record Added !';
		}
		else
		{
			var file = 'update_record.php';
			var message = 'Record Updated !';
		}
 
		$.post(file+"?"+formParam,{
		}, function(response){
 
			 get_result = response;
			if(response == 1)
			{ 
				$('#faceBoxmessage').fadeOut();
				 $('#faceBoxmessage').html(unescape(message));
				 $('#faceBoxmessage').fadeIn();
 
				 setTimeout(" $.facebox.close();",1000)
				 //////////////
				 var content = $("#sortable"); // main content ul
				 content.load(targetUrl);
				 $('.hover').css('background-color','');
			}
		});
	}
}

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

  • ZeeShaN

    Thanks Andreja, Yes you can do this but thats a change in code so you would need to update code in js and as well as in php.

    February 07 2012
    CommentsLike
    • Andreja

      Great plugin! Thank you! I have just one question. Is there way to create two columns in databse with status function ( for example status and status2). Thank you in advance for your help! Once more, great work!!!

      February 05 2012
      CommentsLike
      • ZeeShaN

        Hi Shon, :) yes it is, Actually this is not a plugin which you could do only providing few parameters but It is just a builtin script for those who need something like this.

        January 28 2012
        CommentsLike

        • Too much JS code. JS sucks for grids. Too many demands on the client to operate efficiently.

          January 27 2012
          CommentsLike
          • sathish

            Hi,
            Excellent !

            December 13 2011
            CommentsLike
            • ZeeShaN

              Files are updated now, sorry for delay :)

              August 08 2011
              CommentsLike

              • Can anybody send me to e-mail this script i cannot download this script link dosent working :( my e-mail: teymur.oqtayoglu@gmail.com =*** <3

                August 08 2011
                CommentsLike

                • Please, send this script to my email adress. This file removed from site.

                  August 08 2011
                  CommentsLike
                  • jro

                    please email me your script too, your script very nice… i cannot download it. thks b4

                    August 05 2011
                    CommentsLike

                    • Could you please email me the script too, i really like it… i cannot download it.
                      Thank you,
                      Alex

                      July 23 2011
                      CommentsLike








                      Enter your Email:

                      Click Here for Popular

                      Who I Am

                      Zeeshan Rasool

                      Software Engineer - PHP
                      Lahore - Pakistan

                      zeeshan(@)99points.info
                      Skype: zeeshan-rasool
                      gTalk: zishan.rasool85

                      Categories

                      Tags

                      Comments