layui实现后台表格数据显示--学生管理系统(layui搜索,删除,批量删除,增加,修改,php接口后台)

需要源码的话评论一下谢谢,这里只是部分代码,图片的话压缩就是这样子了

也可以直接下载(直接导入数据库就行): https://download.csdn.net/download/weixin_44797182/12434878

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述## data,html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css">

</head>

<body>
  <!-- 搜索开始 -->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
  </fieldset>
  <div class="searchTable">
    请输入用户名:
    <div class="layui-inline">
        <input class="layui-input" name="keyword" id="searchReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
  </div>
  <!-- 搜索结束 -->

  <!-- 数据表格开始 -->
  <table class="layui-hide" id="test" lay-filter="test"></table>
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">增加</button>
      <button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>
    </div>
  </script>
  <script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <!-- 数据表格结束 -->

  <!-- 添加和修改的淡出层开始 -->
  <div style="display: none;" id="saveOrupdateDiv">
    <form class="layui-form" action="" lay-filter="dataForm" id="dataForm"  method="POST">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">学号:</label>
          <div class="layui-input-inline">
            <input type="text" name="id"  autocomplete="off" required lay-verify="required" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">姓名:</label>
          <div class="layui-input-inline">
            <input type="text" name="name"  autocomplete="off"  class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">性别:</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="" title="">
            <input type="radio" name="sex" value="" title="">
          </div>
        </div>

      </div>
      <div class="layui-form-item">
        <div class="layui-input-block"  align="center">
          <button type="button" class="layui-btn  layui-btn-normal layui-btn-sm layui-icon layui-icon-search"  lay-filter="doSubmit"  lay-submit>提交 </button>
          <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm  layui-icon layui-icon-refresh">重置</button>
        </div>
      </div>
    </form>

  </div>
  <!-- 添加和修改的淡出层结束 -->


  <script src="./layui/layui.all.js" charset="utf-8"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;
      var laydate = layui.laydate;
      var form = layui.form;
      var $ = layui.jquery;
      // 绑定时间选择器
      laydate.render({
        elem:'#startDate'
      })
      laydate.render({
        elem:'#endDate'
      })
      var tableIns = table.render({
        elem: '#test'
        ,url: './data.php'
        ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
        ,title:'学生信息表'
        ,loading:true
        ,height:'full-300'
        ,cols: [
          [
            { type: 'checkbox', fixed: 'left'   }
          , {type: 'numbers'  }
          , {field: 'a', title: '学号',width: 150, sort: true}
          , {field: 'b', title: '姓名',width: 150, align:'center', sort: true}
          , {field: 'sex', title: '性别',width: 150, align:'center', sort: true}
          , {field: 'addtimestamp', title: '添加时间',width: 200,  sort: true}
          ,{fixed: 'right', title:'操作', toolbar: '#operation', width:150}
          ]
        ],
        where:{

        },
        page: true
      });

       //头工具栏事件,添加,批量删除
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data;
        console.log(data);
        console.log(checkStatus);
        switch (obj.event) {
          case 'add':
            openAddUser();
          break;
          case 'batchDel':
            layer.confirm('批量删除后不可恢复,谨慎操作!', {icon: 7, title: '警告'}, function (index) {
              var data = checkStatus.data;
              var dataObj = {};
              data.forEach((item,i) => {
                dataObj[i] = item.id;
              })
              // var json = JSON.stringify(dataObj);  //直接对象就行,也不知道为啥
              $.ajax({
                type: 'POST',
                url: './data.php?action=batchDel',
                data: dataObj,  //{'1':'2','3':'4'}
                dataType: 'json',
                success(){
                  tableIns.reload()
                  layer.msg('成功');
                },
                error: function () {
                  layer.msg('失败');
                },
              });
              // 关闭弹窗
              layer.close(index);
            });
          break;
        };
      });

      //监听行工具事件 ,删除一行,修改数据 
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        console.log(data)
        if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            // 删除数据
            url = './data.php?action=del';
            params = 'id='+data.id   
            $.post(url,params,function(data){
                // 刷新数据表格
                tableIns.reload()
            })
            // 关闭弹窗
            obj.del();
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          openUpdateUser(data);
        }
      });
      // 保存
      form.on('submit(doSubmit)', function(data){
        // 序列化表单数据
        var params = $('#dataForm').serialize();
        $.post(url,params,function(data){
          // layer.msg(data);
          // 关闭弹出层
          layer.close(mainIndex);
          // 刷新数据表格(c重载)
          tableIns.reload()
        })
      }); 
      //搜索 
      $("#searchBtn").on('click',function(){
        var val = $("#searchReload").val();
        console.log(val);
        // 重载数据
        tableIns.reload({
          where: { 
            //设定异步数据接口的额外参数,任意设,简单的说就是在发送一个get数据
            // 这样的话实际是三个get参数 data.php?page=1&limit=10&b=11,这里的b是字段
            b: val 
          }
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      })

      var url = '';   //添加用户或者修改数据请求的地址
      var mainIndex=''; //弹出层,添加用户和修改用户中会出现数据重合,所以定义以重载
     // 添加用户
      function openAddUser() {
        mainIndex=layer.open({
          type:1,
          title:'添加用户',
          content:$("#saveOrupdateDiv"),
          // area:['100px' ],
          success(){
            // 清空表单数据。即修改用户时数据会显示在这里,因此要去除
            $("#dataForm")[0].reset(); //转换为js jquery中没有submit方法
            url = './data.php?action=add';
          }
        })
      }
      // 修改用户
      function openUpdateUser(data) {
        mainIndex = layer.open({
          type:1,
          title:'修改用户',
          content:$("#saveOrupdateDiv"),
          // area:['600px' ],
          success: function() {
            form.val('dataForm',{
              id:data.a,
              name:data.b,
              sex:data.sex,
            })
            // console.log(form.val('dataForm',data)); //如果name名字等于键的名字可以直接这样覆盖
            url = './data.php?action=update'
          }
        })
      }


      
    });
  </script>

</body>

</html>
<?php
header('Content-type:text/html;charset=utf-8');
// 连接数据库
try {
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=demo;port=3306', 'root', 'weicunbin123');
} catch (PDOException $e) {
  die('connet error :' . $e->getMessage());
}
$pdo->exec('set names utf8');


if (isset($_GET['page']) && isset($_GET['limit'])) {
  // 分页查询
  $start = ($_GET['page'] - 1) * $_GET['limit'] ;
  $limit = $_GET['limit'];
  $b = isset($_GET['b']) && !empty(trim($_GET['b'])) ? $_GET['b']:"%";     //where 条件,这里是姓名做测试,模糊查询,资源里网络修改了
  $data = $pdo->query("SELECT * FROM study  where b like '$b' order by id desc limit  $start, $limit")->fetchAll(PDO::FETCH_ASSOC);
  $num = count($pdo->query("SELECT id FROM study")->fetchAll(PDO::FETCH_ASSOC));
  $json = json_encode(array(
    "code" => 0,
    "msg" => "",
    "count" =>  $num,
    "data" => $data
  ), JSON_UNESCAPED_UNICODE); //JSON_UNESCAPED_UNICODE注意不加会乱码
  echo $json;
  
} elseif (isset($_GET['action']) && $_GET['action'] == 'add') {

  // 因为太多了,所以举个例
  $clean = array();
  $clean['a'] = isset($_POST['id']) ? $_POST['id'] : '学号';
  $clean['b'] = isset($_POST['name']) ? $_POST['name'] : '姓名';
  $clean['c'] = isset($_POST['c']) ?  $_POST['c'] : '品行评定';
  $clean['d'] = isset($_POST['d']) ?  $_POST['d'] : '学生干部';
  $clean['e'] = isset($_POST['e']) ?  $_POST['e'] : '活动获奖';
  $clean['f'] = isset($_POST['f']) ?  $_POST['f'] : '荣誉称号';
  $clean['g'] = isset($_POST['g']) ?  $_POST['g'] : '星级宿舍';
  $clean['h'] = isset($_POST['h']) ?  $_POST['h'] : '通报表扬';
  $clean['i'] = isset($_POST['i']) ?  $_POST['i'] : '处分';
  $clean['j'] = isset($_POST['j']) ?  $_POST['j'] : '通报批评';
  $clean['k'] = isset($_POST['k']) ?  $_POST['k'] : '旷课迟到';
  $clean['l'] = isset($_POST['l']) ?  $_POST['l'] : '总分';
  $clean['m'] = isset($_POST['m']) ?  $_POST['m'] : '备注';
  $clean['sex'] = isset($_POST['sex']) ? $_POST['sex'] : '女';
  $insert = $pdo->exec("INSERT INTO study(a,b,c,d,e,f,g,h,i,j,k,l,m,sex)
                                   VALUES(
                                    '{$clean['a']}',
                                    '{$clean['b']}',
                                    '{$clean['c']}',
                                    '{$clean['d']}',
                                    '{$clean['e']}',
                                    '{$clean['f']}',
                                    '{$clean['g']}',
                                    '{$clean['h']}',
                                    '{$clean['i']}',
                                    '{$clean['j']}',
                                    '{$clean['k']}',
                                    '{$clean['l']}',
                                    '{$clean['m']}',
                                    '{$clean['sex']}'
                                   )
  ");
  if($insert >0 ){
    echo json_encode(array(
      "code" => 1,
      "msg" => "success",
      "count" =>  $insert,
      "data" => array()
    ));
  }else{
    echo json_encode(array(
      "code" => 1,
      "msg" => "erroe",
      "count" =>  0,
      "data" => array()
    ));
  }
 
} elseif (isset($_GET['action']) && $_GET['action'] == 'del') {
  $clean = array();
  $clean['id'] = isset($_POST['id']) ? $_POST['id'] : '这个是数据库id';
  $del = $pdo->exec("DELETE FROM study WHERE id='{$clean['id']}'");
  if($del >0 ){
    echo json_encode(array(
      "code" => 1,
      "msg" => "success",
      "count" =>  $del,
      "data" => array()
    ));
  }else{
    echo json_encode(array(
      "code" => 1,
      "msg" => "erroe",
      "count" =>  0,
      "data" => array()
    ));
  }

} elseif (isset($_GET['action']) && $_GET['action'] == 'update') {
 
  // 因为太多了,所以举个例
  $clean = array();
  $clean['a'] = isset($_POST['id']) ? $_POST['id'] : '学号';
  $clean['b'] = isset($_POST['name']) ? $_POST['name'] : '姓名';
  $clean['c'] = isset($_POST['c']) ?  $_POST['c'] : '品行评定';
  $clean['d'] = isset($_POST['d']) ?  $_POST['d'] : '学生干部';
  $clean['e'] = isset($_POST['e']) ?  $_POST['e'] : '活动获奖';
  $clean['f'] = isset($_POST['f']) ?  $_POST['f'] : '荣誉称号';
  $clean['g'] = isset($_POST['g']) ?  $_POST['g'] : '星级宿舍';
  $clean['h'] = isset($_POST['h']) ?  $_POST['h'] : '通报表扬';
  $clean['i'] = isset($_POST['i']) ?  $_POST['i'] : '处分';
  $clean['j'] = isset($_POST['j']) ?  $_POST['j'] : '通报批评';
  $clean['k'] = isset($_POST['k']) ?  $_POST['k'] : '旷课迟到';
  $clean['l'] = isset($_POST['l']) ?  $_POST['l'] : '总分';
  $clean['m'] = isset($_POST['m']) ?  $_POST['m'] : '备注';
  $clean['sex'] = isset($_POST['sex']) ? $_POST['sex'] : '女';
  $update = $pdo->exec("UPDATE study SET 
                                        b =  '{$clean['b']}',
                                        c =  '{$clean['c']}',
                                        d =  '{$clean['d']}',
                                        e =  '{$clean['e']}',
                                        f =  '{$clean['f']}',
                                        g =  '{$clean['g']}',
                                        h =  '{$clean['h']}',
                                        i =  '{$clean['i']}',
                                        j =  '{$clean['j']}',
                                        k =  '{$clean['k']}',
                                        l =  '{$clean['l']}',
                                        m =  '{$clean['m']}',
                                        sex =  '{$clean['sex']}'
                                      WHERE  a =  '{$clean['a']}'
  ");
  if($update >0 ){
    echo json_encode(array(
      "code" => 1,
      "msg" => "success",
      "count" =>  $update,
      "data" => array()
    ));
  }else{
    echo json_encode(array(
      "code" => 1,
      "msg" => "erroe",
      "count" =>  0,
      "data" => array()
    ));
  }
} elseif (isset($_GET['action']) && $_GET['action'] == 'batchDel'){
  $str = implode(',',$_POST) ;
  $batchDel = $pdo->exec("DELETE FROM study WHERE id in ($str)");
  if($batchDel >0 ){
    echo json_encode(array(
      "code" => 1,
      "msg" => "success",
      "count" =>  $batchDel,
      "data" => array()
    ));
  }else{
    echo json_encode(array(
      "code" => 1,
      "msg" => "erroe",
      "count" =>  0,
      "data" => array()
    ));
  }
 

  
} else {
  // 无参数
  echo json_encode(array(
    "code" => 1,
    "msg" => "error",
    "count" =>  0,
    "data" => array()
  ));
}
 
layui框架中,批量删除表格数据可以通过多选框来选中需要删除数据,并通过遍历获取选中行的ID值,然后传递给后端进行删除操作。具体实现步骤如下: 1. 首先,创建一个由layui插件渲染的数据表格,并在表格中设置多选框来进行选中需要删除数据。 2. 监听数据表格的工具栏,并在批量删除的事件中获取所有选中的行的数据。 3. 遍历选中行的数据,将每一行的ID值存储到一个数组中。 4. 将数组中的ID值传递给后端进行删除操作。 5. 删除成功后,重新渲染当前页面,即可实现批量删除表格数据。 以下是实现批量删除的核心代码示例: ```javascript table.on('toolbar(table)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'delAll': // 定义数组存放批量删除的行的ID var listId = []; // 获得所有选中行的数据 var datas = checkStatus.data; // 遍历所有选中行数据,拿出每一行的ID存储到数组中 $.each(datas, function (i, data) { listId.push(data.id); }); // 将ID数组传递给后端进行删除操作 // 删除成功后重新渲染当前页面 location.reload(); break; } }); ``` 这样就实现了在layui框架中批量删除表格数据的功能。您可以根据具体的需求进行相应的修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [layui框架数据表格批量删除](https://blog.csdn.net/weixin_47257626/article/details/116974155)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Layui 数据表格批量删除和多条件搜索的实例](https://download.csdn.net/download/weixin_38749305/12937601)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [【layui】学习总结-批量删除功能](https://blog.csdn.net/Luck_And_Destiny/article/details/119798498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值