【PHP】mysql + jeditable / 點擊編輯 / 資料庫表單 / 範例

有時候我們會懶得登入phpmyadmin，
於是我們是可以製作一個前台的 MYSQL 管理表單，即點即編。
就是設置『點擊修改表單』的功能啦。
我們需要運用到jQuery的jeditable，去製作一個PHP的頁面。

官方說明：Here

STEP1. 下載jquery.jeditable.js： [官方]
STEP2. page.php

<?
// 連接mysql
mysql_pconnect("localhost","izoac","izopw");
mysql_query("SET NAMES 'utf8'");
mysql_select_db("izodb");
$sql="SELECT * FROM table;";
$result = mysql_query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<!-- by iZO.tw 載入jquery & jeditable.js & jeditable.php -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('.jedit').editable('jeditable.php', {
         type      : 'textarea',
         cancel    : '取消',
         submit    : '修改',
         indicator : '正在儲存中',
         tooltip   : '點擊修改'
     });
});
</script>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>iZO jeditable 教學</title>
</head>
<body>
<table cellpadding="20" border="1" align="center">
<tr><td>NO</td><td>代號</td><td>標題</td><td>人氣</td></tr>
<?
while($row=mysql_fetch_array($result)) {
	echo"<tr><td>".$row[no]."</td>
	<td class='jedit' id='class_".$row[no]."'>".$row['class']."</td>
	<td class='jedit' id='title_".$row[no]."' Width='150'>".$row[title]."</td>
	<td class='jedit' id='cou_".$row[no]."'>".$row[cou]."</td></tr>";
}
}
?>
</table>
</body>
</html>

STEP3. jeditable.php

<?
$id = $_POST['id'];
$value = $_POST['value'];
list($field, $id) = explode('_', $id);
mysql_pconnect("localhost","izoac","izopw");
mysql_query("SET NAMES 'utf8'");
mysql_select_db("izodb");
mysql_query("UPDATE post SET $field='$value' WHERE no='$id'");
echo $value;
?>

完成 !

展開文章／收合

相關