以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 "";
}

AJAX实现弹窗显示详情,全选和批量删除的更多相关文章

  1. php--jquery操作全选、批量删除、加减行

  2. MVC3学习:利用mvc3+ajax实现全选和批量删除

    本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...

  3. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  4. angularJS 全选反选批量删除

    <th> <label for="flag"> <span ng-hide="master">全选</span> ...

  5. jquery操作全选、批量删除、加减行

    --------------------------------------------------------------------------------------- html静态页面 --- ...

  6. 作业:汽车查询--弹窗显示详情,批量删除 ajax做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  7. 作业:汽车查询--弹窗显示详情,批量删除 php做法(0521)

    作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  8. JavaScript-checkbox标签-隐藏、显示、全选、取消和反选等操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Ado.net[登录,增删改查,Get传值,全选,不选,批量删除,批量更新]

    [虽然说,开发的时候,我们可以使用各种框架,ado.net作为底层的东西,作为一个合格的程序员,在出问题的时候我们还是要知道如何调试] 一.增删改查 cmd.ExecuteReader();执行查询, ...

随机推荐

  1. c++ telescoping constructor is NOT supported until c++11

    Telescoping constructor: see Effective Java 2nd Edition Item 2 If you want to use telescoping constr ...

  2. 【原创】菜鸟版Android 笔记1- Android架构和Application

    Android架构 图1 Android架构自上而下名称为应用层.应用框架层.运行库和Adroid虚拟机层. Linux内核层. 1. 应用层 应用层像一座大厦里面的砖瓦.我们所做的开发基本上都在应用 ...

  3. Swift 开源 Linux Ubuntu Install

    Swift 开源了,它现在变成跨平台的了,开源后的 Swift 不止能运行在 MAC 和 iOS 平台,现在也可以运行在 Linux 平台了.swift.org 网站上面提供了在 Linux 上面安装 ...

  4. openfile

    linux修改open files数   概要 linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不 ...

  5. 一个while循环

    [root@web03 server]# .sh #!/bin/bash flag=true a= b= while $flag do echo "${a}" ((a++)) wh ...

  6. shiro session过期后ajax请求跳转(转)

    配置了 Shrio框架,session也集成进去了 ,发现问题session会话过期,点击页面,一直请求失败.本来想集成拦截器,过滤器,但是已经用了shiro框架,sessionDestroyed 方 ...

  7. python升级后pip 不可用 卸载pip

    python版本由2.6升级到2.7之后,用pip提示报错 找了一下原因,网上的版本很多.弄来弄去比较麻烦 来点简单粗暴的 1.卸载pip yum remove python-pip 2.下载 cur ...

  8. SlidingMenu官方实例分析1——ExampleListActivity

    1.SlidingMenuDemo下载: 由AndroidManifest.xml能看出项目是从ExampleListActivity启动的: ExampleListActivity继承了Sherlo ...

  9. nth-child 和 nth-of-type 的区别

    css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type,它们2个的区别是: nth-of-type为什么要叫:nth-of-type?因为 ...

  10. 怎样利用JDBC启动Oracle 自己主动追踪(auto trace)

    有时我们须要对运行SQL的详细运行过程做一个追踪分析,特别是在应用程序性能优化的时候.Oracle两个工具能够帮助我们做好性能分析,一个是SQL_TRACE,一个是SESSION_EVENT.SQL_ ...