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

淩亂°似流年 2023-03-14 13:13 54阅读 0赞

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

也可以直接下载（直接导入数据库就行）： [https://download.csdn.net/download/weixin\_44797182/12434878][https_download.csdn.net_download_weixin_44797182_12434878]

![在这里插入图片描述][202005182344265.gif_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]\#\# 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()
      ));
    }

[https_download.csdn.net_download_weixin_44797182_12434878]: https://download.csdn.net/download/weixin_44797182/12434878
[202005182344265.gif_pic_center]: /images/20230312/a1bc810c1ecc403ebddc71157cf62748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20230312/367cd8c45ba542598b1c8b65a9113972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20230312/2991d3e2a4dc40c380063f734e69e972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: /images/20230312/e5388391a90142e9a8c4f7246ba1ddee.png