源代码
MySQL Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `sample_data`
--
CREATE TABLE `sample_data` (
`id` int(10) NOT NULL,
`first_name` varchar(255) NOT NULL,
`last_name` varchar(255) NOT NULL,
`age` int(3) NOT NULL,
`gender` enum('male','female') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `sample_data`
--
INSERT INTO `sample_data` (`id`, `first_name`, `last_name`, `age`, `gender`) VALUES
(3, 'Tiny', 'Marry', 19, 'female'),
(4, 'Dolores', 'Brooks', 29, 'female'),
(5, 'Cindy', 'Dahl', 24, 'female'),
(6, 'George', 'Fagan', 30, 'male'),
(7, 'Chelsea', 'Mendoza', 18, 'female'),
(8, 'Wayne', 'Hodges', 27, 'male'),
(9, 'Keith', 'Watkin', 26, 'male'),
(10, 'Eric', 'Smith', 31, 'male'),
(11, 'Robert', 'Owens', 42, 'male'),
(12, 'Candace', 'Hand', 27, 'female'),
(13, 'Hortencia', 'Bell', 30, 'female'),
(14, 'William', 'Sosa', 36, 'male'),
(15, 'Patricia', 'Davis', 23, 'female'),
(17, 'Nancy', 'Sedlacek', 21, 'female');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `sample_data`
--
ALTER TABLE `sample_data`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `sample_data`
--
ALTER TABLE `sample_data`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18;index.php
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="zh-CN" />
<title>Inline Table Insert Update Delete in PHP using jsGrid</title>
<script src="jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="jsgrid-theme.min.css" />
<script type="text/javascript" src="jsgrid.min.js"></script>
<script src="i18n/jsgrid-zh-cn.js"></script>
<style>
.hide
{
display:none;
}
</style>
</head>
<body>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Inline Table Insert Update Delete in PHP using jsGrid</h3><br />
<div id="grid_table"></div>
</div>
</div>
</body>
</html>
<script>
jsGrid.locale("zh-cn");
$('#grid_table').jsGrid({
width: "100%",
height: "600px",
filtering: true,
inserting:true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete data?",
controller: {
loadData: function(filter){
return $.ajax({
type: "GET",
url: "fetch_data.php",
data: filter
});
},
insertItem: function(item){
return $.ajax({
type: "POST",
url: "fetch_data.php",
data:item
});
},
updateItem: function(item){
return $.ajax({
type: "PUT",
url: "fetch_data.php",
data: item
});
},
deleteItem: function(item){
return $.ajax({
type: "DELETE",
url: "fetch_data.php",
data: item
});
},
},
fields: [
{
name: "id",
type: "hidden",
css: 'hide'
},
{
name: "first_name",
type: "text",
width: 150,
validate: "required"
},
{
name: "last_name",
type: "text",
width: 150,
validate: "required"
},
{
name: "age",
type: "text",
width: 50,
validate: function(value)
{
if(value > 0)
{
return true;
}
}
},
{
name: "gender",
type: "select",
items: [
{ Name: "", Id: '' },
{ Name: "Male", Id: 'male' },
{ Name: "Female", Id: 'female' }
],
valueField: "Id",
textField: "Name",
validate: "required"
},
{
type: "control"
}
]
});
</script>fetch_data.php
<?php
//fetch_data.php
$connect = new PDO("mysql:host=localhost;dbname=phpsamples;charset=utf8", "phpsamples", "phpsamples");
$method = $_SERVER['REQUEST_METHOD'];
if($method == 'GET')
{
$data = array(
':first_name' => "%" . $_GET['first_name'] . "%",
':last_name' => "%" . $_GET['last_name'] . "%",
':age' => "%" . $_GET['age'] . "%",
':gender' => "%" . $_GET['gender'] . "%"
);
$query = "SELECT * FROM sample_data WHERE first_name LIKE :first_name AND last_name LIKE :last_name AND age LIKE :age AND gender LIKE :gender ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute($data);
$result = $statement->fetchAll();
foreach($result as $row)
{
$output[] = array(
'id' => $row['id'],
'first_name' => $row['first_name'],
'last_name' => $row['last_name'],
'age' => $row['age'],
'gender' => $row['gender']
);
}
header("Content-Type: application/json");
echo json_encode($output);
}
if($method == "POST")
{
$data = array(
':first_name' => $_POST['first_name'],
':last_name' => $_POST["last_name"],
':age' => $_POST["age"],
':gender' => $_POST["gender"]
);
$query = "INSERT INTO sample_data (first_name, last_name, age, gender) VALUES (:first_name, :last_name, :age, :gender)";
$statement = $connect->prepare($query);
$statement->execute($data);
}
if($method == 'PUT')
{
parse_str(file_get_contents("php://input"), $_PUT);
$data = array(
':id' => $_PUT['id'],
':first_name' => $_PUT['first_name'],
':last_name' => $_PUT['last_name'],
':age' => $_PUT['age'],
':gender' => $_PUT['gender']
);
$query = "
UPDATE sample_data
SET first_name = :first_name,
last_name = :last_name,
age = :age,
gender = :gender
WHERE id = :id
";
$statement = $connect->prepare($query);
$statement->execute($data);
}
if($method == "DELETE")
{
parse_str(file_get_contents("php://input"), $_DELETE);
$query = "DELETE FROM sample_data WHERE id = '".$_DELETE["id"]."'";
$statement = $connect->prepare($query);
$statement->execute();
}
?>
GET
POST
PUT
DELETE
