jquery多选源码来源素材火http://www.sucaihuo.com/

(有什么问题可以私本人邮箱1428937236@qq.com,也可加qq来时表明来意即可)

建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码

《————HTML————》

  1. //thinkphp循环显示把data里fid赋予多选框
  2. <volist name="data" id="vo">
  3. <tr>
  4. <td><input type="checkbox" value="{$vo.fid}"/></td>//可在后面加td输入参数
  5. </tr>
  6. </volist>
  7. <tr>
  8. <th width="80"><input type="checkbox" id="all"/>全选</th>
  9. <th width="80"><input type="button" value="全选" class="btn" id="selectAll" /></th>
  10. <th width="80"><input type="button" value="全不选" class="btn" id="unSelect" /></th>
  11. <th><input type="button" value="反选" class="btn" id="reverse" /></th>
  12. <th width="180">
  13. <a href="javascript:void(0);" onclick="del()" title="删除选定数据">删除</a>
  14. </th>
  15. </tr>

《————jsvascript————》

  1. <script>
  2. //多选
  3. $("#all").click(function(){
  4. if(this.checked){
  5. $("#list :checkbox").attr("checked", true);
  6. }else{
  7. $("#list :checkbox").attr("checked", false);
  8. }
  9. });
  10. //当点到全选按钮
  11. $("#selectAll").click(function () {
  12. $("#list :checkbox,#all").attr("checked", true);
  13. });
  14. //全不选
  15. $("#unSelect").click(function () {
  16. $("#list :checkbox,#all").attr("checked", false);
  17. });
  18. //反选
  19. $("#reverse").click(function () {
  20. $("#list :checkbox").each(function () {
  21. $(this).attr("checked", !$(this).attr("checked"));
  22. });
  23. allCheck();
  24. });
  25. //删除
  26. function del(){
  27. var valArr = new Array;
  28. $("#list :checkbox[checked]").each(function(i){
  29. valArr[i] = $(this).val();
  30. });
  31. var vals = valArr.join(',');//数组转换以逗号隔开的字符串
  32. if (valArr.length == 0) {
  33. alert('请选择要删除的选项');
  34. }else{
  35. if (confirm("确定删除?删除后将无法恢复。")){
  36. var data={name:vals};
  37. $.ajax({
  38. type: "post",
  39. url: "{:U('College/School/faculty_del')}",//url为tp方法(控制器/方法)
    data:data,
  40. success: function(json) {
  41. var obj = eval('(' + json + ')');//返回回来的json转化为js对象
  42. if (parseInt(obj.counts) > 0) {
  43. alert(obj.des);
  44. location.reload();
  45. } else {
  46. alert(obj.des);
  47. }
  48. },
  49. error: function(XMLHttpRequest, textStatus) {
  50. alert("页面请求错误,请检查重试或联系管理员!\n" + textStatus);
  51. }
  52. });
  53. }
  54. }
  55.  
  56. }
  57. </script>

《————PHP————》

  1. public function faculty_del(){
  2. $fid = trim($_POST['name']);
  3. //以下为查询条件
  4. $bname['deletemark'] = 0;
  5. $res = $this->faculty_model
    ->where(array('fid'=>array('in',$fid)))
    ->save($bname);
    //查询条件为你的查询条件,我这边为逻辑删除,修改字段值就好
  6. // echo $this->faculty_model->getLastSql();
  7. // var_dump($res);
  8. // exit;
  9. if ($res) {
  10. $counts = "1";
  11. $des = "成功";
  12. } else {
  13. $counts = "0";
  14. $des = "失败";
  15. }
  16. $json_data = "{";
  17. $json_data.= "\"counts\":".json_encode($counts).",";
  18. $json_data.= "\"des\":".json_encode($des)."";
  19. $json_data.= "}";
  20. echo $json_data;
  21. exit;
  22. }

由于是异步所以你发过来的数据都在控制台查看,当前页面没输出,不要去页面上去找(不要问我为什么知道,我干过,想起来真蠢)

基于php(Thinkphp)+jquery 实现ajax多选,反选,不选 删除数据 新手学习向的更多相关文章

  1. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  2. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  3. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  4. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  5. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 利用jquery进行ajax提交表单和附带的数据

    1.获取表单数据: $form.serialize() 2.附带数据:input[status]=1 3.构造url链接:url = $form.attr('action') + '?input[st ...

  7. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  8. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  9. wpf--------------datagrid全选反选 多选进行删除操作 前后台

    前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...

随机推荐

  1. Linux内核配置浅析

    1.Linux Kernel Kconfig系统的基本结构 Linux内核的配置系统由三个部分组成,分别是: 1>.Makefile:分布在 Linux 内核源代码根目录及各层目录中,定义 Li ...

  2. 程序员需要有多懒 ?- cocos2d-x 数学函数、常用宏粗整理 - by Glede

    最近我们的cocos2d-x游戏项目已经进入了正式开发的阶段了,几个dev都辛苦码代码.cocos2d-x还是一套比较方便的api的,什么action啊.director啊.ccpoint啊都蛮便捷的 ...

  3. ios数据存储——数据库:SQlite3以及第三方库FMDB

    [reference]http://blog.csdn.net/mad1989/article/details/9322307 原生数据库:SQlite3 一.必备条件 在ios项目中使用sqlite ...

  4. MVC+Repository+UOW+EntityFrmeWork的使用

    1.首先创建一个空的MVC3应用程序,命名为MyRepository.Web,解决方案命名为MyRepository. 2.添加一个类库项目,命名为MyRepository.DAL,添加一个文件夹命名 ...

  5. shell 脚本连接mysql数据库查询database中表的数量和表名

    #!/bin/bash MYSQLHOST="127.0.0.1" MYSQLUSER="root" MYSQLPWD="root" MYS ...

  6. 【拓扑排序】【线段树】Gym - 101102K - Topological Sort

    Consider a directed graph G of N nodes and all edges (u→v) such that u < v. It is clear that this ...

  7. CMake Tutorial

    1.最简实例 使用cmake的最简实例是由一个源程序文件生成一个可执行文件.例如由下述C++源程序文件生成可执行文件tutorial. main.cpp #include<iostream> ...

  8. 【MongoDb基础】插入数据

    以mydb为事例数据库. 切换到mydb数据库. use mydb 1. insert函数. db.users.insert({name:"Derek",age:18}) 该函数会 ...

  9. freemarker配置,使用

    最近在项目中用到freemarker,总是报一些莫名其妙的错误. 调查得知是由于在配置文件中属性[tag_syntax]的设置问题,我们的环境下该属性(auto_detect)默认设置了自动检测,也就 ...

  10. TortoiseSVN使用简介

    TortoiseSVN使用简介 2009-04-24 来源: dev.idv.tw 1.安装及下载client 端 2.什么是SVN(Subversion)? 3.为甚么要用SVN? 4.怎么样在Wi ...