老师讲过之后的复习：
显示数据的代码部分：
<!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>Nation表查询删除处理在一起</title> <script src="jquery-1.11.2.min.js"></script> <script src="tanchuang.js"></script> <link href="tanchuang.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .xq:hover { background-color:#C9C; cursor:pointer;} </style> </head> <body> <table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0"></table> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { //显示数据 XianShi(); function XianShi() { $.ajax({ url:"chuliEASY.php", data:{type:0}, dataType:"TEXT", type:"POST", async:false,//设置同步的 success: function(data){ //alert(data); var hang = data.split("|"); var str = "<tr><td>代号</td><td>民族</td><td>操作</td></tr>"; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str += "<tr><td><input type='checkbox' value='"+lie[0]+"' class='xz' />"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>"; } str += "<tr><td><input type='checkbox' id='all' />全选 <input type='button' value='批量删除' id='shan' /></td></tr>"; $("#xianshi").html(str); } }); //全选的按钮 $("#all").click(function(){ //全选按钮的选中状态 var qx = $(this)[0].checked; //操作所有的复选框 var ck = $(".xz"); ck.prop("checked",qx); }) //查看详情,弹窗定义用class $(".xq").click(function(){ //取点击的主键值 var code = $(this).attr("bs"); $.ajax({ url:"chuliEASY.php", data:{code:code,type:1}, dataType:"TEXT", type:"POST", success: function(data){ //alert(data); var lie = data.split("^"); var html = "<div>民族代号:"+lie[0]+"</div><div>民族名称:"+lie[1]+"</div>"; var wd = new Window({ width : 400, //宽度 height : 500, //高度 title : '详细信息', //标题 content : html, //内容 isMask : true, //是否遮罩 buttons :"", //按钮 isDrag:true, }); } }); }) //批量删除 $("#shan").click(function(){ //获取选中的主键值 var xz = $(".xz"); var str = ""; for(var i=0;i<xz.length;i++) { if(xz.eq(i).prop("checked")) { str+=xz.eq(i).val()+"|"; } } str = str.substr(0,str.length-1); $.ajax({ url:"chuliEASY.php", data:{str:str,type:2}, dataType:"TEXT", type:"POST", success: function(data){ alert(data); XianShi(); } }); }) } }); </script>
处理页面代码部分：简单的方法多个处理页面合在一起
采用switch case要比if...else...更直观
<?php include("../DBDA.php"); $db = new DBDA(); $type = $_POST["type"]; switch($type) { case 0: $sql = "select * from Nation"; echo $db->StrQuery($sql); break; case 1: $code = $_POST["code"]; $sql = "select * from Nation where Code ='{$code}'"; echo $db->StrQuery($sql); break; case 2: $str = $_POST["str"];//接受字符串 $attr = explode("|",$str); $tj = implode($attr,"','"); $sql = "delete from Nation where Code in ('{$tj}')"; //echo $sql; if($db->Query($sql,1)) { echo "删除成功"; } else { echo "删除失败"; } default: echo ""; }
将形如$str = n001|n002|n003|n004的样子转换成$tj = 'n001','n002','n003'的并用在SQL语句的多条件查询
$attr = explode("|",$str);
$tj = implode($attr,"','");
$sql = "delete from Nation where Code in ('{$tj}')";
另一种方法：
$tj = str_replace("|","','",$str);
$sql = "delete from Nation where Code in ('{$tj}')";
自己做的与老师讲的内容会有写出入，在批量删除时没有用到拼接字符串而是使用获取所有被点击的checkbox的value值；另一方面：在查看详情的时候返回JSON而不是TEXT；然后Ajax实现页面的搜索与之前的条件查询差不多
显示数据页面的代码：
<!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.js"></script> <link href="tanchuang.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .chakan:hover { cursor:pointer;} </style> </head> <body> <form action="main.php" method="post"> <div>请输入名称：<input type="text" id="name" name="name" /> <input type="button" value="查询" id="search" /> </div> </form> <br /> <br /> <table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0"></table> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $.ajax({ url:"chuli.php", async:false, dataType:"TEXT", type:"POST", success: function(data){ //alert(data); var str = "<tr><td>代号</td><td>汽车名称</td><td>价格</td><td>油耗</td><td>功率</td><td>操作</td></tr>"; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str += "<tr>"; str += "<td><input type='checkbox' value='"+lie[0]+"' class='xz'/>"+lie[0]+"</td>"; for(var j=1;j<lie.length;j++) { str += "<td>"+lie[j]+"</td>"; } str += "<td class='chakan' bs='"+lie[0]+"'>查看详情</td>"; str += "</tr>"; } str += "<tr><td><input type='checkbox' id='all' />全选 <input type='button' id='bttn' value='批量删除' /></td></tr>"; $("#xianshi").html(str); } }); //全选按钮 $("#all").click(function(){ var ck = $(".xz"); var xz = $(this)[0].checked;//全选按钮的选中状态 ck.prop("checked",xz); }) //删除 $("#bttn").click(function(){ var ck = $(".xz"); for(var i=0;i<ck.length;i++) { if(ck.eq(i).prop("checked")) { var code =ck.eq(i).val(); $.ajax({ url:"delete.php", data:{code:code}, dataType:"TEXT", type:"POST", success: function(data){ //alert(data); if(data=="OK") { window.location.href="main.php"; } else { alert("删除失败"); } } }) } } }) //弹窗 $('.chakan').click(function(){ var code = $(this).attr("bs"); $.ajax({ url:"chuli2.php", dataType:"JSON", data:{code:code}, type:"POST", success: function(data){ //alert(data); str1 = ""; for(key in data) { str1 += "<span>"+data[key][1]+"</span> "; str1 += "<span>"+data[key][2]+"</span> "; str1 += "<span>"+data[key][3]+"</span> "; str1 += "<span>"+data[key][4]+"</span>"; } } }); var html = "<div style='color:red'>"+str1+"</div>"; var button ="<input type='button' value='确定' /><input type='button' value='取消' />"; var win = new Window({ width : 700, //宽度 height : 500, //高度 title : '弹窗', //标题 content : html, //内容 isMask : false, //是否遮罩 buttons : button, //按钮 isDrag:true, }); }) //搜索页面 $("#search").click(function(){ var name = $("#name").val(); $.ajax({ url:"chuli.php", async:false, data:{name:name}, dataType:"TEXT", type:"POST", success: function(data){ //alert(data); var str = "<tr><td>代号</td><td>汽车名称</td><td>价格</td><td>油耗</td><td>功率</td><td>操作</td></tr>"; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str += "<tr>"; str += "<td><input type='checkbox' value='"+lie[0]+"' class='xz' name=name[]/>"+lie[0]+"</td>"; for(var j=1;j<lie.length;j++) { str += "<td>"+lie[j]+"</td>"; } str += "<td class='chakan' bs='"+lie[0]+"'>查看详情</td>"; str += "</tr>"; } str += "<tr><td><input type='checkbox' id='all' />全选 <input type='button' id='bttn' value='批量删除' /></td></tr>"; $("#xianshi").html(str); } }); }) }); </script>
处理页面：chuli.php实现表格内容的展示及搜索查询显示内容
<?php include("../DBDA.php"); $db = new DBDA(); $cx=""; $value=""; if(!empty($_POST["name"])) { $name = $_POST["name"]; $cx = " where Name like '%{$name}%'";//查询字符串 $value = $name; } $sql = "select Code,Name,Price,Oil,Powers from car ".$cx; //echo $sql; echo $db->StrQuery($sql);
查看详情的处理页面：chuli2.php 返回JSON类型
<?php include("../DBDA.php"); $db = new DBDA(); $code = $_POST["code"]; $sql = "select Code,Name,Price,Oil,Powers from car where Code = '{$code}' "; $attr = $db->Query($sql); echo json_encode($attr);
批量删除的处理页面:delete.php
<?php $code = $_POST["code"]; include("../DBDA.php"); $db = new DBDA(); $sql = "delete from car where code = '{$code}'"; $result = $db->Query($sql,1);//如果成功返回true or false if($result) { echo "OK"; } else { echo "NO"; }