<!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>