Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

GridView Tutorial With Examples In JQuery

jQuery Grid Cells Editing with PHP and MySQL Example

connect.php

<?php
$hostname = "localhost";
$database = "jqxgrid_list";
$username = "jqxgrid";
$password = "jqxgrid@dhfjdhfjhd";
?>

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.

#bootstrap #jquery 

GridView Tutorial With Examples In JQuery
1.00 GEEK