查看: 1078|回复: 0

[PHP学习] 基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

发表于 2017-12-13 08:00:02

建议有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);" rel="external nofollow" 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方法(控制器/方法)
  40. data:data,
  41. success: function(json) {
  42. var obj = eval('(' + json + ')');//返回回来的json转化为js对象
  43. if (parseInt(obj.counts) > 0) {
  44. alert(obj.des);
  45. location.reload();
  46. } else {
  47. alert(obj.des);
  48. }
  49. },
  50. error: function(XMLHttpRequest, textStatus) {
  51. alert("页面请求错误,请检查重试或联系管理员!\n" + textStatus);
  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
  6. ->where(array('fid'=>array('in',$fid)))
  7. ->save($bname);
  8. //查询条件为你的查询条件,我这边为逻辑删除,修改字段值就好
  9. // echo $this->faculty_model->getLastSql();
  10. // var_dump($res);
  11. // exit;
  12. if ($res) {
  13. $counts = "1";
  14. $des = "成功";
  15. } else {
  16. $counts = "0";
  17. $des = "失败";
  18. }
  19. $json_data = "{";
  20. $json_data.= "\"counts\":".json_encode($counts).",";
  21. $json_data.= "\"des\":".json_encode($des)."";
  22. $json_data.= "}";
  23. echo $json_data;
  24. exit;
  25. }
复制代码

由于是异步所以你发过来的数据都在控制台查看,当前页面没输出,不要去页面上去找。

以上所述是小编给大家介绍的基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!



回复

使用道具 举报