需要源码的话评论一下谢谢,这里只是部分代码,图片的话压缩就是这样子了
也可以直接下载(直接导入数据库就行): 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()
));
}