<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="public/layui/css/layui.css"/>
<script src="public/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="public/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
</head>
<body>
<div class="demoTable" style="margin-left: 1%;">
请输入班级：
<div class="layui-inline">
<input name="id" class="layui-input" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
<span class="site-demo-button" id="layerDemo">
<button class="layui-btn" data-method="notice">添加</button>
</span>
</div>
<table class="layui-hide" id="test" lay-filter="demo"></table>
</body>
</html>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'php/projectchuli.php'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,limit:8
,limits:[5,8,10,15,20]
,method:'post'
,where:{
type:'load'
}
,cols: [[
//{type:'checkbox'}
{field:'id', width:"14.2%", title: 'ID', sort: true, edit:"text"}
,{field:'uid', width:"14.2%", title: '账号', edit:"text"}
,{field:'name', width:"14.2%", title: '姓名', sort: true, edit:"text"}
,{field:'pwd', width:"14.2%", title: '密码', edit:"text"}
,{field:'class', title: '班级', width:"14.2%", minWidth: 100, edit:"text"}
,{field:'bk', title: '博客', width:"14.2%", minWidth: 100, edit:"text"}
,{fixed: 'right',width:"14.2%", align:'center', toolbar: '#barDemo', edit:"text"} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
]]
,id: 'testReload'
,page:true
});
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
shanchu(data.id);//alert(data.id);
obj.del();
layer.close(index);
});
}
});
//监听单元格实时编辑
table.on('edit(demo)',function(obj){
//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data;
var field = obj.field;//字段名
var value = obj.value;//修改后的值
// var id = obj.id;
//console.log(obj);
$.ajax({
type:"post",
url:"php/projectchuli.php",
async:true,
data:{
type:"bj",
field:field,
value:value,
id:data.id
},
dataType:"text",
success:function(data){
console.log(data);
}
});
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
type:"chazhao",
bj: demoReload.val()
}
});
}
};
//console.log( $('.demoTable .layui-btn'));
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
console.log(type);
active[type] ? active[type].call(this) : '';
});
});
function shanchu(t){
$.ajax({
type:"post",
url:"php/projectchuli.php",
async:true,
data:{
type:"shanchu",
id:t
},
dataType:"text",
success:function(data){
alert(data);
location.reload();
}
});
}
//添加人员弹出框
layui.use('layer', function(){ //独立版的layer无需执行这一句
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
});
var active = {
notice: function(){
//示范一个公告层
layer.open({
type: 2
,title: false //不显示标题栏
,closeBtn: false
,area: ['40%', '100%']
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: ['提交', '返回']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: 'add.php'
,success: function(layero,index){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').click(function(){
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
var zh = body.find('#zh').val();
var xm = body.find('#xm').val();
var mm = body.find('#mm').val();
var bj = body.find('#sel').val();
var bk = body.find('#bk').val();
var sj = body.find('#test1').val();
console.log(bj);
console.log(zh);
console.log(xm);
console.log(mm);
var ret = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
if(ret.test(mm)){
$.ajax({
type:"post",
url:"php/projectchuli.php",
async:true,
data:{
type:"add",
zh:zh,
xm:xm,
mm:mm,
bj:bj,
bk:bk,
sj:sj
},
dataType:"text",
success:function(data){
if(data.trim()=="ok"){
alert("添加成功");
window.location.href="addjuese.php";
}
}
});
}
});
}
});
}
}
$('#layerDemo .layui-btn').on('click', function(){
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="public/layui/css/layui.css"/>
<script src="public/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="public/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
body{
background-color: rgba(0,0,0,0.5);
}
#wai{
width:100%;
line-height: 70px;
}
.spp{
margin-left: 39px;
}
h1{
text-align: center;
}
p{
margin-left: -13%;
font-size: 18px;
}
input{
width: 200px;
height:30px;
border-radius: 5px;
border-color: lawngreen;
}
.p1{
margin-left: -7%;
margin-left: 13px;
}
#sel{
width: 200px;
border-radius: 5px;
border-color: lawngreen;
margin-left: 5px;
}
#spp1{
display: none;
color: red;
}
#spp2{
display: none;
color: red;
}
#spp3{
display: none;
color: red;
}
</style>
</head>
<body>
<div id="zong">
<h1>添加人员</h1>
<div id="wai">
<span class="spp">请输入账号：</span>
<input type="text" id="zh" value="" placeholder="请输入大小写英文字母"/><span id="spp1">请重新输入</span><br />
<span class="spp">请输入姓名：</span>
<input type="text" id="xm" value="" placeholder="请输入中文字符"/><span id="spp2">请重新输入</span><br />
<span class="spp">请输入密码：</span>
<input type="password" id="mm" value="" placeholder="8-16位,至少1个大写字母，小写字母和数字"/><span id="spp3">请重新输入</span><br />
<span class="p1">请选择角色信息：</span><select id="sel"></select><br />
<span class="p1">请输入博客地址：</span>
<input class= "inp" type="text" id="bk" value="" /><br />
<span class="p1">请输入开课时间：</span>
<input class= "inp" type="text" id="test1" placeholder="年-月-日"><br />
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function (){
jiazai();
//$("#zh").focus();
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test1'
});
});
});
//账号的input失去焦点事件
$("#zh").blur(function(){
var zh = $("#zh").val();
var ret = /[a-zA-Z]/;
if(!ret.test(zh)){
$("#spp1").css("display","inline-block");//inline-block在一行里显示
}
})
//姓名的input失去焦点事件
$("#xm").blur(function(){
var xm = $("#xm").val();
var ret = /^[\u4e00-\u9fa5]+$/;//只能输入中文
if(!ret.test(xm)){
$("#spp2").css("display","inline-block");
}
})
//密码的input失去焦点事件
$("#mm").blur(function(){
var mm = $("#mm").val();
var ret = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
//至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符
if(!ret.test(mm)){
$("#spp3").css("display","inline-block");
}
})
function jiazai(){
$.ajax({
type:"post",
url:"php/projectchuli.php",
async:true,
data:{
type:"jiazai"
},
dataType:"json",
success:function(data){
var str ="";
for(var i=0;i<data.length;i++){
str +="<option>"+data[i]+"</option>";
}
$("#sel").html(str);
}
});
}
</script>