GridView Tutorial With Examples In jQuery

Today, We want to share with you jquery gridview examples.In this post we will show you ASP.NET (MVC)/ MSSQL, PHP5/ MySQL and Java (Spring)/ MySQL Example., hear for jquery bootgrid examples we will give you demo and example for implement.In this post, we will learn about Jquery Customised Datatable Grids Inline Add Edit Delete with an example.

How to Bind GridView with jQuery AJAX Step by Step

jQuery Grid Cells Editing with PHP and MySQL Example

How to Create AngularJS UI-Grid Editable - GridView
How to Create AngularJS UI-Grid Editable – GridView

connect.php
<?php
$hostname = "localhost";
$database = "jqxgrid_list";
$username = "jqxgrid";
$password = "[email protected]";
?>

data.php

<?php

include('connect.php');

//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());

$bool = mysql_select_db($database, $connect);
if ($bool === False){
   print "Sorry, can't find $database";
}

$query = "SELECT * FROM members";
if (isset($_GET['update']))
{
	// UPDATE COMMAND 
	$update_query = "UPDATE `members` SET `memberFname`='".$_GET['memberFname']."',
	`memberLname`='".$_GET['memberLname']."',
	`HeadLine`='".$_GET['HeadLine']."',
	`Location`='".$_GET['Location']."',
	`City`='".$_GET['City']."',
	`Country`='".$_GET['Country']."',
	`Comments`='".$_GET['Comments']."' WHERE `MemberID`='".$_GET['MemberID']."'";
	 $result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
     echo $result;
}
else
{
    // SELECT COMMAND
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$members[] = array(
			'MemberID' => $row['MemberID'],
			'memberFname' => $row['memberFname'],
			'memberLname' => $row['memberLname'],
			'HeadLine' => $row['HeadLine'],
			'Location' => $row['Location'],
			'City' => $row['City'],
			'Country' => $row['Country'],
			'Comments' => $row['Comments']
		  );
	}
	 
	echo json_encode($members);
}
?>

Example

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            var data = {};
            var theme = 'classic';
            var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'MemberID' },
					 { name: 'memberFname' },
					 { name: 'memberLname' },
					 { name: 'HeadLine' },
					 { name: 'Location' },
					 { name: 'City' },
					 { name: 'Country' }
                ],
                id: 'MemberID',
                url: 'data.php',
                updaterow: function (rowid, rowdata) {
                    
                    var data = "update=true&memberFname=" + rowdata.memberFname + "&memberLname=" + rowdata.memberLname + "&HeadLine=" + rowdata.HeadLine;
                    data = data + "&Location=" + rowdata.Location + "&City=" + rowdata.City + "&Country=" + rowdata.Country + "&Comments=''";
                    data = data + "&MemberID=" + rowdata.MemberID;
                    $.ajax({
                        dataType: 'json',
                        url: 'data.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                        }
                    });
                }
            };
            // initialize jqxGrid
            $("#live_member_list").jqxGrid(
            {
                width: 700,
                height: 350,
                selectionmode: 'singlecell',
                source: source,
                theme: theme,
                editable: true,
                columns: [
                      { text: 'MemberID', editable: false, datafield: 'MemberID', width: 100 },
                      { text: 'First Name', columntype: 'dropdownlist', datafield: 'memberFname', width: 100 },
                      { text: 'Last Name', columntype: 'dropdownlist', datafield: 'memberLname', width: 100 },
                      { text: 'HeadLine', datafield: 'HeadLine', width: 180 },
                      { text: 'Location', datafield: 'Location', width: 180 },
                      { text: 'City', datafield: 'City', width: 100 },
                      { text: 'Country', datafield: 'Country', width: 140 }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
	<div id="live_member_list">
	</div>
</body>
</html>

I hope you get an idea about jQgrid Example with Demo Using Bootstrap and jQuery UI.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.