以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. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  2. ubi实际使用

    ubifs号称性能比yaffs2 好,同时压缩可读写,文件系统image体较小同时可写.1. uboot使能对UBIFS的支持#define CONFIG_CMD_NAND#define CONFIG ...

  3. Consul实现原理系列文章3: Consul的整体架构

    工作中用到了Consul来做服务发现,之后一段时间里,我会陆续发一些文章来讲述Consul实现原理.在前几篇文章介绍完了Consul用到的两个关键性东西Raft和Gossip之后,这篇文章会讲述Con ...

  4. Ubuntu下创建JerBrains系列软件的快捷方式

    以pycharm为例: 终端输入:sudo gedit /usr/share/applications/Pycharm.desktop模板: [Desktop Entry]Type=Applicati ...

  5. 关闭QQ看点

    手机qq联系人 然后右上角公众号 然后看到看点 取消关注!!!

  6. 深入了解UIAutomation 的API

    有关UiAUiAutomation的API对象的文件名称. 1.UIAutomation中的对象都是以UIA#####开头的出现的.eg:UIAButton 2.有关Logger对象负责日志的输出 U ...

  7. CMU-15445 LAB3:事务隔离，two-phase locking，锁管理器

    概述 本lab将实现一个锁管理器,事务通过锁管理器获取锁,事务管理器根据情况决定是否授予锁,或是阻塞等待其它事务释放该锁. 背景 事务属性 众所周知,事务具有如下属性: 原子性:事务要么执行完成,要么 ...

  8. EF 批量更新删除(linq篇)

    刚开始用EF很多东西都不会用,事后想想都很简单的东西总是用很麻烦的方式实现 1:  EF的联合查询 inner join  很久很久以前我是这么写一个列表展示的,其中有两个字段Contractor和M ...

  9. （三）Solrj4到Solrj5的升级之路

    (三)Solrj4到Solrj5的升级之路 Solr5发布了,带来了许多激动人心的新特性,但Solrj的许多接口也发生了变化,升级是痛苦的,但也是必须的,下面就赶紧来看看有哪些代码需要升级吧. 变化1 ...

  10. EasyNVR摄像机无插件直播进行摄像机云台控制的接入及调用详解

    EasyNVR云台接入及控制详解 摄像机云台控制在摄像机当中很常见摄像机能将当前状态下云台的水平角度.倾斜角度和摄像机镜头焦距等位置参数存储到设备中,需要时可以迅速调用这些参数并将云台和摄像头调整至该 ...