刪除和查看詳情操作的共同語句：就是怎么顯示表？
1.在主體中寫表的開頭行，想要顯示的內容，並且加載數據也要顯示的地方也建張表
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr> //開頭行顯示的內容
<td>代號</td>
<td>名稱</td>
<td>價格</td>
<td>產地</td>
<td>庫存</td>
<td>操作</td>
</tr>
<tbody id="bg"> //循環遍歷表顯示的內容展示的位置
</tbody>
</table>
如圖：
2.顯示數據：用ajax方法遍歷一張表，顯示出表的內容
$.ajax({
//因為不用傳輸數據所以就不用寫data和傳輸類型了
url:"xianshicl.php", //編寫處理頁面
dataType:"TEXT",
success: function(data){
//執行處理頁面結束的語句編寫
}
})
如圖：
3.顯示數據的處理頁面
<?php
include("DBDA.class.php"); /調用封裝好的類
$db = new DBDA(); //構造新對象
$sql = "select * from fruit"; //查詢水果表中的所有數據
echo $db->StrQuery($sql); //調用封裝類中的字符串的放方法
上面用到的封裝的轉換字符串的方法
class DBDA
{
public $host="localhost"; //數據庫連接
public $uid="root"; //數據庫用戶
public $password="123"; //用戶密碼
public $dbname="test2"; //數據庫名
//返回字符串的方法
public function StrQuery($sql,$type=1)
{
$db = new MySQLi($this->host,$this->uid,$this->password,$this->dbname);
$r = $db->query($sql);
if($type==1)
{
$attr = $r->fetch_all();
$str = "";
foreach($attr as $v)
{
$str .= implode("^",$v)."|"; //拼接數組為字符串
}
return substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不顯示
}
else
{
return $r;
}
}
}
4.步驟2中的執行處理頁面結束的語句編寫：
var hang = data.split("|"); //拆分字符“|”串：顯示行
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); //拆分字符串“^”:顯示列
str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>操作</td></tr>";
}
$("#bg").html(str); //將處理的數據放到上面顯示的div中
數據的顯示效果，刪除和查看時將操作一欄修改並且加入按鈕的觸發事件就可以了：需要修改的代碼就是“操作”這一列：
str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>操作</td></tr>";
一、數據的刪除處理
1.在循環數據庫的時候，在最后的一個單元格中添加刪除按鈕，然后就是起個名字便於對其添加數據，寫個主鍵值
<td><input type='button' value='刪除' class='shanchu' code='"+lie[0]+"'/></td>
2.對刪除按鈕添加事件
$(".shanchu").click(function(){ //找到刪除按鈕，對其添加單擊事件，單擊之后執行事件
var code = $(this).attr("code"); //找到屬性值
})
3.調用ajax方法，ajax里的步驟
$.ajax({
url:"shanchucl.php", //處理頁面的名稱
data:{c:code}, //為值取個名字
type:"POST", //傳值方式
dataType:"TEXT", //數據類型
success: function(d){
//處理頁面執行成功后在執行下面的語句
}
})
4.接下來寫刪除的處理頁面，這個頁面寫過很多次了
<?php
include("DBDA.class.php"); //調用封裝
$db = new DBDA(); //造新對象
$code = $_POST["c"]; //將值傳過來
$sql = "delete from fruit where ids='{$code}'"; //寫sql語句
if($db->Query($sql,0)) //執行語句並且判斷
{
echo "OK";
}
else
{
echo "NO";
}
5.返回調用的ajax中開始寫成功后的代碼
if(d.trim()=="OK")
{
shuju(); //因為整體的從顯示到刪除的ajax都要在這重新寫一遍，那么可以把整個寫成個方法，然后這樣調用
}
else
{
alert("刪除失敗！");
}
6.這樣就可以完成對數據的刪除了
（原數據圖）
（隨便刪除一條數據圖）
二、查看數據
點擊查看數據，會彈出數據詳情的窗口
1.既然是詳情，那么修改上面所講的那一句語句就可以：在操作的那添加個按鈕，傳一個主鍵值，刪除時肯定是用代號來進行查看，因為代號沒有重復的
起一個名字，然后傳一個主鍵值
str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='詳情' class='xiangqing' code='"+lie[0]+"'/></td></tr>";
2.想要顯示的可以少一點，可以只顯示名稱和操作，這兩列
<table width="50%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>名稱</td> <td>操作</td> </tr> <tbody id="bg"> </tbody> </table>
對於ajax的遍歷時將div也寫成兩個
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); //拆分字符串“^”:顯示列
str += "<tr><td>"+lie[1]+"</td><td><input type='button' value='詳情' class='xiangqing' code='"+lie[0]+"'/></td></tr>";
}
效果如圖：
注意：這里的對添加窗口有兩種方法，一個是用自己寫好的封裝類，二是可以用bootstrap的彈窗
一是用自己寫好的封裝類
3.1 對“詳情”進行編寫的時候可以使用封裝好的彈窗js，引入彈窗js還有彈窗的樣式表，應為封裝的js語句很多，js顯示基本功能如下：
width : config.width || 300, //寬度 height : config.height || 200, //高度 buttons : config.buttons || '', //默認無按鈕 title : config.title || '標題', //標題 content : config.content || '內容', //內容 isMask : config.isMask == false?false:config.isMask || true, //是否遮罩 isDrag : config.isDrag == false?false:config.isDrag || true, //是否移動
4.1 根據上面的主鍵值，對詳情按鈕添加事件
$(".xiangqing").click(function(){ //對詳情添加單擊事件
var code = $(this).attr("code");
$.ajax({
url:"chakancl.php", //詳情的處理頁面
data:{c:code}, //傳入處理頁面的值
type:"POST", //傳值方式
dataType:"TEXT",
success: function(d){
var lie = d.split("^");
//想要在窗口中顯示的內容
var c = "<div>代號："+lie[0]+"</div><div>姓名："+lie[1]+"</div><div>性別："+lie[2]+"</div><div>民族："+lie[3]+"</div><div>生日："+lie[4]+"</div>";
//調用封裝好的彈窗方法
var win = new Window({
width : 300, //寬度
height : 200, //高度
buttons : '', //默認無按鈕
title : '詳情介紹', //寫入顯示的標題
content : c, //內容
isMask : true, //有遮罩
isDrag : true, //能夠移動
})
}
})
})
5.1 編寫詳情的處理頁面：就是根據傳過去的code找到代號那一列，然后執行就可以，當然是字符串形式的數據，就要進行轉換
這是封裝類中的字符函數里的：
//執行語句后是個二維數組，下面進行字符串裝換
$str = ""; foreach($attr as $v) { $str .= implode("^",$v)."|"; //拼接數組為字符串implode（）方法 } return substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不顯示substr（）方法
處理頁面的代碼編寫
<?php
include("DBDA.class.php");
$db = new DBDA();
$code = $_POST["c"];
$sql = "select * from fruit where ids='{$code}'";
echo $db->StrQuery($sql);
最后就是走起來看效果，單擊詳情按鈕后，就會顯示窗口了
單擊桔子后面的詳情按鈕，就彈出窗口：
二是用bootstrap的彈窗
3.1首先也要引入bootstrap的js和css包：
<script src="dist/js/bootstrap.min.js"></script> <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
3.2在主體部分寫入彈窗：直接從bootstrap的官網進行復制粘貼就可以
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">詳細信息</h4> //標題的地方
</div>
<div class="modal-body" id="content"></div> // 顯示是內容的地方
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> //按鈕
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
3.3在進行顯示數據時記得在遍歷結束時，在詳情按鈕中加入屬性
<td><input type='button' value='詳情' class='xiangqing' code='"+lie[0]+"' data-toggle='modal' data-target='#myModal' /></td>
3.4在詳情的單擊事件遍歷結束后要將內容寫入上面的“顯示的內容”的地方
這個地方和第一種方法差不多，不同的地方就是第一種方法引入了封裝方法，第二種方法是將顯示結果交給顯示內容的div中
$(".xiangqing").click(function(){ //對詳情添加單擊事件
var code = $(this).attr("code");
$.ajax({
url:"chakancl.php", //詳情的處理頁面（和第一種方法的處理頁面一樣）
data:{c:code}, //傳入處理頁面的值
type:"POST", //傳值方式
dataType:"TEXT",
success: function(d){
var lie = d.split("^");
//想要在窗口中顯示的內容
var c = "<div>代號："+lie[0]+"</div><div>姓名："+lie[1]+"</div><div>性別："+lie[2]+"</div><div>民族："+lie[3]+"</div><div>生日："+lie[4]+"</div>";
$("#content").html(c);
}
})
})
單擊桃子后的詳情按鈕，彈窗效果如下：
刪除和查看詳情就是以上。