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实现后台表格数据显示--学生管理系统（layui搜索，删除，批量删除，增加，修改，php接口后台）相关推荐

java初级系统项目_JavaSE-初级阶段项目-基于excel表格的学生管理系统
1.需求分析配置项目文件环境:IDEA IntelliJ 工具包 :hutool-poi-apidocs 工具包导入: 右击项目文件 open module settings 3.具体实现 (1 ...
【C 语言】文件操作 ( 学生管理系统 | 插入数据 | 查询数据 | 删除数据 )
文章目录一.学生管理系统 1.插入数据 2.查询数据 3.删除数据二.完整代码一.学生管理系统实现一个简易学生管理系统 , 验证文件操作 ; 1.插入数据从命令行接收数据 , 放入结构体成员 ...
学生管理系统(添加、查看、删除、修改学生信息)
1.2 学生管理系统实现思路定义学生类主界面的代码编写添加学生的代码编写查看学生的代码编写删除学生的代码编写修改学生的代码编写 1.3 定义学生类学生类: Student 成员变量: 学 ...
thinkphp删除某一学生_基于ThinkPHP实现批量删除
本文实例分析了基于ThinkPHP实现批量删除的代码实例,分享给大家供大家参考,具体如下: 废话不多说,先上效果图: HTML布局(基于bootstrap) 留言列表返回删除 id名称邮箱内容日期 ...
layui框架数据表格的批量删除
layui框架数据表格的批量删除操作此文献为layui框架的数据表格的批量删除,批量删除顾名思义就是把大量的数据进行删除操作由于有点项目数据繁多,如果在要删除的时候一个一个的删除的话,就会很麻烦. ...
python小项目案例-Python小项目：快速开发出一个简单的学生管理系统
本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: 包括: 学校信息的管理教师信息的管理学生信息的管理根据A ...
java nextline_Java写一个学生管理系统
前言其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swi ...
《编码规范和测试方法——C/C++版》作业 ·008——编写一个符合依赖倒置原则的简单学生管理系统
文章目录问题描述参考解答整体架构 UML图整体代码 MySQL-C-API封装 Model层 Dao层 Service层 Controller层 View层主程序测试环境测试流程测试效 ...
python项目开发实例-Python小项目：快速开发出一个简单的学生管理系统
本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: 包括: 学校信息的管理教师信息的管理学生信息的管理根据A ...
Django实训-学生管理系统
文章目录项目总述 1,功能分析增加学生记录,查询学生记录,修改学生记录,删除学生记录 2,需求分析可以查询个人学生信息,包括根据学号查询学习基本情况和选课信息可以更省时间的查询信息一.创建D ...

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

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

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

最新文章

热门文章