以Nation表為例，將Nation表顯示在頁面上，每一行數據前面加上復選框，后面加上查看詳情，點擊以彈窗形式顯示每一行的數據，並且在表格最后一行加上全選復選框，點擊選中全部數據，后面跟一個批量刪除按鈕，點擊刪除選中項，如圖：
主頁面：需要用到彈窗插件，將js與css文件加載過來
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script src="../jquery-1.11.2.min.js"></script> <script src="../tanchuang/tanchuang.js"></script> <style type="text/css"> .xq{ width:80px; height:30px; background-color:#06C; line-height:30px; color:#FFF;} .xq:hover{ cursor:pointer; background-color:#F60; color:#FFF;} </style> <link href="../tanchuang/tanchuang.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Nation表</h1> <table id="biao" width="800px" border="1" cellpadding="0" cellspacing="0"> </table> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { Show(); function Show() //將各個事件放到一個方法里，這樣調用這一個方法就可以加上各個事件了 { $.ajax({ async:false, //url:"testchuli.php", url:"ChuLi1.php", data:{type:0}, //將三個處理頁面放入一個頁面，需要傳一個參數type type:"POST", dataType:"JSON", success: function(data){ var str= "<tr height='30px'><td>民族代號</td><td>民族名稱</td><td>查看詳情</td></tr>"; for(var k in data) { str+="<tr><td><input type='checkbox' value='"+data[k][0]+"' class='ck' />"+data[k][0]+"</td><td>"+data[k][1]+"</td><td><div class='xq' bs='"+data[k][0]+"'>查看詳情</div></td></tr>"; } str+="<tr height='30px'><td colspan='3'><input type='checkbox' id='qx' /> 全選 <input type='button' id='btn' value='批量刪除' /></td></tr>"; $("#biao").html(str); } }); //查看詳情 $(".xq").click(function(){ //取主鍵值 var code = $(this).attr("bs"); $.ajax({ //url:"xqchuli.php", url:"ChuLi1.php", data:{code:code,type:1}, type:"POST", dataType:"TEXT", success: function(data){ var lie =data.split("^"); var html = "<div>民族代號："+lie[0]+"</div><div>民族名稱："+lie[1]+"</div>"; var win = new Window({ width : 400, //寬度 height : 500, //高度 title : '詳細信息', //標題 content : html, //內容 isMask : true, //是否遮罩 buttons : "", //按鈕 isDrag:true, //是否移動 }); } }); }) //全選 $("#qx").click(function(){ //全選按鈕選中狀態，索引0取document對象 var xz = $(this)[0].checked; //操作所有復選框的選中狀態 var ck =$(".ck"); ck.prop("checked",xz); }) //批量刪除 $("#btn").click(function(){ //找選中的主鍵值，用循環遍歷選中的主鍵值 var ck =$(".ck"); var str =""; for(var i=0;i<ck.length;i++) { if(ck.eq(i).prop("checked")) { str+=ck.eq(i).val()+"','"; } } str= str.substr(0,str.length-3); //分隔符占3個字符，截取字符串，去掉最后的"','"，這樣正好匹配SQL語句 $.ajax({ //url:"Delete.php", url:"ChuLi1.php", data:{str:str,type:2}, type:"POST", dataType:"TEXT", success: function(data){ alert(data); Show(); } }); })
} }); </script>
將顯示數據，查看詳情與批量刪除三個處理頁面合成一個頁面，只需傳一個參數type：
<?php include("../DB.class.php"); $db = new DB(); $type = $_POST["type"]; //用switch case比if else清晰 switch($type) { case 0: $sql ="select * from Nation"; echo $db->JsonQuery($sql); break; case 1: $code = $_POST["code"]; $sql = "select * from Nation where Code = '{$code}'"; echo $db->StrQuery($sql); break; case 2: if(!empty($_POST["str"])) { $str = $_POST["str"]; $sql = "delete from Nation where Code in ('{$str}')"; //echo $sql; 輸出SQL語句看是否正確 if($db->Query($sql,1)) { echo "刪除成功！"; } else { echo "刪除失敗！"; } } else { echo "請選擇要刪除的項！"; } break; default: echo ""; }
