当前位置：首页 > PHP教程 > php应用 > 列表

PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能

发布:smiling　来源: PHP粉丝网 　添加日期：2021-11-22 23:45:08　浏览: 评论：0　

这篇文章主要介绍了PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下。

这个自己的小项目要先告一段落了，可能还有许多bug，请见谅

删除学生功能

PHP:

  1. // 这里是通过前端代码HTML中的 url 传过来的，用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客) 
  2. if (emptyempty($_GET['num'])) exit('<h1>找不到您要删除的学生的学号</h1>'); 
  3. $num = $_GET['num']; 
  4. $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); 
  5. if (!$connection) exit('<h1>连接数据库失败</h1>'); 
  6. $query = mysqli_query($connection, "delete from students where num = {$num}"); 
  7. if (!$query) exit('<h1>该学生信息查询失败</h1>'); 
  8. // 注意：这里传入的是连接对象 
  9. $affected_rows = mysqli_affected_rows($connection); 
  10. if ($affected_rows !== 1) exit('<h1>删除失败</h1>'); 
  11. header('Location: student_info.php'); 

编辑学生功能(整体上和添加学生功能差不到，稍微有些许变化)

HTML:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="utf-8"> 
  5.   <title>编辑学生</title> 
  6.   <link rel="stylesheet" type="text/css" href="css/Bootstrap.css" rel="external nofollow" > 
  7. </head> 
  8. <body> 
  9.   <div class="container mt-3"> 
  10.     <h1 class="display-5 text-center">编辑学生</h1> 
  11.     <?php if (isset($error_msg)): ?> 
  12.     <div class="alert alert-danger"><?php echo $error_msg; ?></div> 
  13.     <?php endif ?> 
  14.     <div class="row mt-3"> 
  15.       <img src="<?php echo $current_student['photo']; ?>" alt="<?php echo $current_student['name']; ?>" width="100" height="488" class="col-sm-6"> 
  16.       <form action="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php echo $current_num; ?>" method="post" enctype="multipart/form-data" autocomplete="off" class="col-sm-6"> 
  17.         <div class="form-group"> 
  18.           <input type="number" name="num" class="form-control" placeholder="学号" value="<?php echo isset($_POST['num']) ? $_POST['num'] : $current_student['num']; ?>"> 
  19.         </div> 
  20.         <div class="form-group"> 
  21.           <select class="form-control" name="system"> 
  22.             <option>请选择学院/系</option> 
  23.             <option <?php echo $current_student['system'] === '电气工程学院' ? 'selected' : ''; ?>>电气工程学院</option> 
  24.             <option <?php echo $current_student['system'] === '信息工程与艺术学院' ? 'selected' : ''; ?>>信息工程与艺术学院</option> 
  25.             <option <?php echo $current_student['system'] === '国际教育学院' ? 'selected' : ''; ?>>国际教育学院</option> 
  26.             <option <?php echo $current_student['system'] === '水利水电工程学院' ? 'selected' : ''; ?>>水利水电工程学院</option> 
  27.             <option <?php echo $current_student['system'] === '测绘与市政工程学院' ? 'selected' : ''; ?>>测绘与市政工程学院</option> 
  28.             <option <?php echo $current_student['system'] === '马克思主义学院' ? 'selected' : ''; ?>>马克思主义学院</option> 
  29.             <option <?php echo $current_student['system'] === '建筑工程学院' ? 'selected' : ''; ?>>建筑工程学院</option> 
  30.             <option <?php echo $current_student['system'] === '经济与管理学院' ? 'selected' : ''; ?>>经济与管理学院</option> 
  31.           </select> 
  32.         </div> 
  33.         <div class="form-group"> 
  34.           <input type="text" name="class" class="form-control" placeholder="班级" value="<?php echo isset($_POST['class']) ? $_POST['class'] : $current_student['class']; ?>"> 
  35.         </div> 
  36.         <div class="form-group"> 
  37.           <input type="text" name="name" class="form-control" placeholder="姓名" value="<?php echo isset($_POST['name']) ? $_POST['name'] : $current_student['name']; ?>"> 
  38.         </div> 
  39.         <div class="form-group"> 
  40.           <select class="form-control" name="gender"> 
  41.             <option value="-1">请选择性别</option> 
  42.             <option <?php echo $current_student['gender'] === '1' ? 'selected' : ''; ?> value="1">男</option> 
  43.             <option <?php echo $current_student['gender'] === '0' ? 'selected' : ''; ?> value="0">女</option> 
  44.           </select> 
  45.         </div> 
  46.         <div class="form-group"> 
  47.           <label for="birthday">出生日期</label> 
  48.           <input type="date" name="birthday" class="form-control" id="birthday" value="<?php echo isset($_POST['birthday']) ? $_POST['birthday'] : $current_student['birthday']; ?>"> 
  49.         </div> 
  50.         <div class="form-group"> 
  51.           <label for="photo">照片</label> 
  52.           <input type="file" name="photo" class="form-control"> 
  53.         </div> 
  54.         <button type="submit" class="btn btn-info btn-block">确认修改</button> 
  55.       </form> 
  56.     </div> 
  57.   </div> 
  58. </body> 
  59. </html> 

PHP:

  1. if (emptyempty($_GET['id'])) exit('<h1>必须指定相应的学号</h1>'); 
  2. $current_num = $_GET['id']; 
  3. $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); 
  4. if (!$connection) exit('<h1>连接数据库失败</h1>'); 
  5. $query = mysqli_query($connection, "select * from students where num = {$current_num} limit 1"); 
  6. if (!$query) exit('<h1>找不到您要编辑的学生信息</h1>'); 
  7. $current_student = mysqli_fetch_assoc($query); 
  8. // var_dump($current_student); 
  9. function edit_student() { 
  10.   // var_dump('进来了'); 
  11.   global $connection; 
  12.   global $current_num;  // 当前学生学号 
  13.   global $current_student; 
  14.   $extra_students_query = mysqli_query($connection, "select * from students where num != {$current_num}"); 
  15.   if (!$extra_students_query) { 
  16.     exit('<h1>其余学生数据查询失败</h1>'); 
  17.     // return; 
  18.   } 
  19.   // 查询除该学生以外的其他学生 
  20.   while ($student = mysqli_fetch_assoc($extra_students_query)) { 
  21.     // var_dump($student); 
  22.     $students_num[] = $student['num']; 
  23.   } 
  24.   // var_dump($students_num); 
  25.   // var_dump($_FILES['photo']); 
  26.   // var_dump($_POST['gender']); 
  27.   if (emptyempty($_POST['num'])) { 
  28.     $GLOBALS['error_msg'] = '请输入学号'; 
  29.     return; 
  30.   } 
  31.   // 判断该学号是否已经被添加(即列表中已存在该学生)========= 
  32.   if (in_array($_POST['num'], $students_num)) { 
  33.     $GLOBALS['error_msg'] = '该学生已存在'; 
  34.     return; 
  35.   } 
  36.   if (emptyempty($_POST['system']) || $_POST['system'] === '请选择学院/系') { 
  37.     $GLOBALS['error_msg'] = '请选择学院/系'; 
  38.     return; 
  39.   } 
  40.   if (emptyempty($_POST['class'])) { 
  41.     $GLOBALS['error_msg'] = '请输入班级'; 
  42.     return; 
  43.   } 
  44.   if (emptyempty($_POST['name'])) { 
  45.     $GLOBALS['error_msg'] = '请输入姓名'; 
  46.     return; 
  47.   } 
  48.   if (!(isset($_POST['gender']) && $_POST['gender'] !== '-1')) { 
  49.     $GLOBALS['error_msg'] = '请选择性别'; 
  50.     return; 
  51.   } 
  52.   if (emptyempty($_POST['birthday'])) { 
  53.     $GLOBALS['error_msg'] = '请输入出生日期'; 
  54.     return; 
  55.   } 
  56.   // 以下处理文件域======================================================= 
  57.   // 当有文件上传时才验证，没有上传则照片不变 
  58.   // $_FILES['photo'] = $current_student['photo']; 
  59.   // var_dump($_FILES['photo']); 
  60.   if ($_FILES['photo']['name'] !== '') { 
  61.     // var_dump($_FILES['photo']); 
  62.     // var_dump($_FILES['photo']); 
  63.     if ($_FILES['photo']['error'] !== UPLOAD_ERR_OK) { 
  64.       $GLOBALS['error_msg'] = '上传照片失败'; 
  65.       return; 
  66.     } 
  67.     // 验证上传文件的类型(只允许图片) 
  68.     if (strpos($_FILES['photo']['type'], 'image/') !== 0) { 
  69.       $GLOBALS['error_msg'] = '这不是支持的文件格式类型，请重新上传'; 
  70.       return; 
  71.     } 
  72.     // 文件上传到了服务端开辟的一个临时地址，需要转移到本地 
  73.     $image_target = 'images/' . $_FILES['photo']['name']; 
  74.     if (!move_uploaded_file($_FILES['photo']['tmp_name'], $image_target)) { 
  75.       $GLOBALS['error_msg'] = '图片上传失败'; 
  76.       return; 
  77.     } 
  78.     // 接收更新过的学生照片 
  79.     $current_student['photo'] = (string)$image_target; 
  80.   } else { 
  81.     // var_dump($_FILES['photo']); 
  82.     // 如果照片没有上传则不进行验证文件域,直接更新数据且不改变原来的照片 
  83.     $current_student['num'] = $_POST['num']; 
  84.     $current_student['system'] = $_POST['system']; 
  85.     $current_student['class'] = $_POST['class']; 
  86.     $current_student['name'] = $_POST['name']; 
  87.     $current_student['gender'] = $_POST['gender']; 
  88.     $current_student['birthday'] = $_POST['birthday']; 
  89.   } 
  90.   // var_dump($current_num); 
  91.   // 将数据修改存放到数据库 
  92.   $update_query = mysqli_query($connection, "update students set `num` = '{$current_student['num']}', `system` = '{$current_student['system']}', `class` = '{$current_student['class']}', `name` = '{$current_student['name']}', `gender` = '{$current_student['gender']}', `birthday` = '{$current_student['birthday']}', `photo` = '{$current_student['photo']}' where `num` = {$current_num}"); 
  93.   if (!$update_query) { 
  94.     $GLOBALS['error_msg'] = '更新数据查询失败'; 
  95.     return; 
  96.   } 
  97.   $affected_rows = mysqli_affected_rows($connection); 
  98.   if ($affected_rows !== 1) { 
  99.     $GLOBALS['error_msg'] = '修改失败'; 
  100.     return; 
  101.   } 
  102.   // 延迟2秒 
  103.   time_sleep_until(time() + 2); 
  104.   header('Location: student_info.php'); 
  105. } 
  106. if ($_SERVER['REQUEST_METHOD'] === 'POST') { 
  107.   edit_student(); 
  108. } 

搜索功能（用js）

  1. // 关键词搜索功能----立即函数 
  2. (function (element, search_key) { 
  3.   let table = document.getElementById('table-content'); // 获取表格 
  4.   function in_array_item (item, array) { 
  5.     for (var i = 0; i < array.length; i++) { 
  6.       if (array[i].indexOf(item) != -1) { 
  7.         return true; 
  8.       } 
  9.     } 
  10.     return false; 
  11.   } 
  12.   function response () { 
  13.     let hiddenStudentsNumber = 0;             // 获取隐藏的学生个数(即表格隐藏行数) 
  14.     // 获取要搜索的关键词 
  15.     const search_content = document.getElementById(search_key).value; 
  16.     // console.log(search_content); 
  17.     // console.log(typeof(search_content)); 
  18.     let data = []; 
  19.     // 遍历列表将数据存储到一个数组中 
  20.     // 1.获取表格行数 
  21.     for (let i = 0; i < table.children.length; i++) { 
  22.       // 2.获取表格列数 
  23.       for (let j = 0; j < table.children[i].children.length; j++) { 
  24.         if (!data[i]) { 
  25.           // 在数组中创键每一行内容存放的数组，用于存放一行数据 
  26.           data[i] = new Array(); 
  27.         } 
  28.         data[i][j] = table.children[i].children[j].innerHTML.toString(); 
  29.         // 3.存放数据 
  30.         if (data[i][j] === '♂') { 
  31.           data[i][j] = '男'; 
  32.         } 
  33.         if (data[i][j] === '♀') { 
  34.           data[i][j] = '女'; 
  35.         } 
  36.       } 
  37.       // console.log(data[i]); 
  38.       if (search_content == '') { 
  39.         table.children[i].style.display = ''; 
  40.       } else { 
  41.         if (in_array_item(search_content, data[i])) { 
  42.           table.children[i].style.display = ''; 
  43.         } else { 
  44.           table.children[i].style.display = 'none'; 
  45.           hiddenStudentsNumber += 1; 
  46.         } 
  47.       } 
  48.     } 
  49.     console.log(hiddenStudentsNumber); 
  50.     let str = "共有" + (table.children.length - hiddenStudentsNumber) + "名学生"; 
  51.     document.getElementById('students_number').innerHTML = str; 
  52.   } 
  53.   const searchButton = document.getElementById(element); 
  54.   searchButton.addEventListener('click', function () { 
  55.     response(); 
  56.   }); 
  57.   document.addEventListener('keydown', function (event) { 
  58.     if (event.keyCode === 13) { 
  59.       response(); 
  60.     } 
  61.   }); 
  62.   let str = "共有" + table.children.length + "名学生"; 
  63.   document.getElementById('students_number').innerHTML = str; 
  64. })('search', 'search-key'); 

同时在原有的学生信息页面HTML添加：

  1. <div class="row mt-3"> 
  2.       <a class="btn btn-info col-sm-2" style="margin-right: 28px; margin-left: 15px;" href="add_student.php" rel="external nofollow" >添加学生</a> 
  3. 　　　　　　　　// 添加的 
  4.       <button class="btn btn-info align-middle" id="students_number"></button> 　　　　　　　　 
  5.  
  6.       <input type="text" class="form-control col-sm-6 ml-2" autocomplete="on" placeholder="请输入关键词" value="" id="search-key"> 
  7.        <button type="submit" class="btn btn-info col-sm-2 ml-2" id="search">点击搜索</button> 
  8.     </div>

Tags: Boostrap PHP列表删除

分享到：

相关文章

推荐文章

热门文章

最新评论文章