bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码
2024-06-03 13:22:34
前端综合应用
bootstrap-table
表格神器bootstrap.min.js
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。font-awesome.min.css
基于css框架的网页字体图标库。layui.css
国产开源前端UI，简单易上手，简洁美观。jquery-3.4.1.min.js
轻量级的、兼容多浏览器的JavaScript库。popper.min.js
轻量级的提示插件(弹层（框）)。sweetalert2.all.min.js
可响应，易交互的弹框提示。layer
弹层组件。
应用1
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/font-awesome.min.css" /><link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" /></head><body><!--搜索框--><div style="margin-top: 30px;"><form class="form-inline" id="querry-form"><label>编号</label><input type="text" class="form-control" id="e_id" placeholder="员工编号"><label>姓名</label><input type="text" class="form-control" id="e_name" placeholder="员工姓名"><label>年龄</label><input type="text" class="form-control" id="e_age" placeholder="员工年龄"><label>生日从</label><input type="date" class="form-control" id="e_birthday_start" placeholder="起始日期"><label>至</label><input type="date" class="form-control" id="e_birthday_end" placeholder="终止日期"><label>住址</label><input type="text" class="form-control" id="e_address" placeholder="员工住址"><label>部门</label><select class="form-control" name="e_dept" id="e_dept">所属部门</select><label>状态</label><select class="form-control" name="e_status" id="e_status"><option selected="selected"></option><option value="-1">未确定</option><option value="0">在职</option><option value="1">离职</option></select><button type="submit" class="btn btn-primary mb-2" id="btn_querry">查询</button></form></div><!--增加或批量删除按钮--><div style="padding-top: 10px;padding-left: 15px;"><button type="button" class="btn btn-primary" id="btn-add-worker">增加</button><button type="button" class="btn btn-danger" id="btn-delete-multi">批量删除</button></div><!--增加时弹出的层开始--><div id="add-win" style="display: none;padding: 15px;"><form id="add-form"><div class="form-group"><label>姓名</label><input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_name"></div><div class="form-group"><label>年龄</label><input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="add-form-e_age"></div><div class="form-group"><label>出生生日</label><input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="add-form-e_birthday"></div><div class="form-group"><label>住址</label><input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="add-form-e_address"></div><div class="form-group"><label>所属部门</label><select name="d_name" class="form-control" id="add-form-d_name"><option>请选择部门</option></select></div><button id="add-form-btn" type="button" class="btn btn-primary btn-lg btn-block">提交</button><button type="reset" class="btn btn-danger btn-lg btn-block">重置</button></form></div><!--增加时弹出的层结束--><!--修改时弹出的层开始--><div id="update-win" style="display: none;padding: 15px;"><form id="update-form"><div class="form-group"><label>编号</label><input name="e_id" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_id" readonly="readonly"></div><div class="form-group"><label>姓名</label><input name="e_name" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_name"></div><div class="form-group"><label>年龄</label><input name="e_age" style="margin-top: 5px;" type="number" class="form-control" id="update-form-e_age"></div><div class="form-group"><label>出生生日</label><input name="e_birthday" style="margin-top: 5px;" type="date" class="form-control" id="update-form-e_birthday"></div><div class="form-group"><label>住址</label><input name="e_address" style="margin-top: 5px;" type="text" class="form-control" id="update-form-e_address"></div><div class="form-group"><label>所属部门</label><select name="d_name" class="form-control" id="update-form-d_name"><option>请选择部门</option></select></div><button id="update-form-btn" type="button" class="btn btn-primary btn-lg btn-block">确认修改</button></form></div> <!--修改时弹出的层结束--><!--员工列表--><div style="padding-top: 15px;"><table id="proList"></table></div><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/popper.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script><script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script><script type="text/javascript" src="layer/layer.js"></script><script type="text/javascript" src="js/sweetalert2.all.min.js"></script><script type="text/javascript" src="js/1.js"></script></body></html>
/*页面刷新获得部门放到部门下拉框*/$.ajax({type: "post",url: "http://localhost/getDepName",async: true,dataType: 'json'}).done(function(data) {$("#e_dept").append('<option selected=selected></option>');for(var deName of data) {$('#e_dept').append('<option>' + deName.d_name + '</option>');//add_d_id$('#add-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id$('#update-form-d_name').append('<option>' + deName.d_name + '</option>');//add_d_id}}).fail(function(xhr) {Swal.fire({icon:'error',title:`${xhr.status}`,text:'服务器繁忙，请稍后再试！',confirmButtonText:'确定'});});/*获取员工列表信息*/$('#proList').bootstrapTable({url: 'http://localhost/getAllEmp',pagination: true,//是否显示分页条pageSize: 5,//一页显示的行数paginationLoop: false,//是否开启分页条无限循环，最后一页时点击下一页是否转到第一页pageList: [5, 8, 10],//选择每页显示多少行，数据过少时可能会没有效果columns: [{checkbox:true,},{field: 'e_id',title: '员工编号'}, {field: 'e_name',title: '员工姓名'}, {field: 'e_age',title: '员工年龄'}, {field: 'e_birthday',title: '员工生日'}, {field: 'e_address',title: '员工住址'}, {field: 'd_name',title: '所属部门'}, {field: 'e_status',title: '员工状态',formatter: function(value) {return value == '-1' ? '未确定' : (value == '0' ? '在职' : '离职');}}, {field: 'e_id',title: '操作',width:'270',formatter: function(value,rows,index) {return [`<a href='#' class='btn btn-primary btn-sm update' data_id_index="${index}">修改</a>`,`<a href='#' class='btn btn-danger btn-sm delete' data_id="${value}">删除</a>`,`<a href='#' class='btn btn-success btn-sm confirm' data_id_confirm="${index}">确定在职</a>`,`<a href='#' class='btn btn-danger btn-sm exit' data_id_exit="${index}">确定离职</a>`].join(" ");}}],/*表格呈现事件.表格生成后才能进行删除和修改*/onPostBody(data){/*单个删除*/$('.delete').click(function(){Swal.fire({icon:'warning',title:'您确定要删除吗？',text:'数据一旦删除，将不可以恢复！',confirmButtonText:'删除',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//点击了确定按钮//加载条，并且设定最长等待10秒var deleteLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒
//================================================================================let e_id=$(this).attr('data_id');$.ajax({url:'http://localhost/deleteById',data:{'e_id':e_id},type:'post',dataType:'json'}).done(function(result){//关闭加载条layer.close(deleteLoad);if(result.success){ Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail(function(xhr){layer.close(deleteLoad);Swal.fire({icon:'error',title:`${xhr.status}`,text:'服务器繁忙，请稍后再试！',confirmButtonText:'确定'});});}}); });/*修改时*/$('.update').click(function(){//alert(1);updataEmp(this);});/*确定员工在职时*/$('.confirm').click(function(){//alert(1);confirmEmp(this);});/*确定员工离职时*/$('.exit').click(function(){//alert(1);exitEmp(this);});}});/*定义离职员工的函数*/const exitEmp=function(linkObj){
//==========================================================================================================Swal.fire({icon:'warning',title:'您确定该员工离职吗？',text:'离职员工一旦确定，将不可以更改！',confirmButtonText:'确定',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//点击了确定按钮//加载条，并且设定最长等待10秒var exitLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒var exit_id=$(linkObj).attr('data_id_exit');var exit_data=$("#proList").bootstrapTable('getData');var emp=exit_data[exit_id];//需要离职的员工$.ajax({url:'http://localhost/exitEmp',data:{'e_id':emp.e_id},type:'post',dataType:'json'}).done(function(result){//关闭加载条layer.close(exitLoad);if(result.success){ Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail(function(xhr){layer.close(exitLoad);Swal.fire({icon:'error',title:`${xhr.status}`,text:'服务器繁忙，请稍后再试！',confirmButtonText:'确定'});});}});
//==========================================================================================================}/*定义确定员工的函数*/const confirmEmp=function(linkObj){Swal.fire({icon:'warning',title:'您确定该员工吗？',text:'员工一旦确定，将不可以更改！',confirmButtonText:'确定',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//点击了确定按钮//加载条，并且设定最长等待10秒var confirmLoad = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒var confirm_id=$(linkObj).attr('data_id_confirm');var confirm_data=$("#proList").bootstrapTable('getData');var emp=confirm_data[confirm_id];//需要修改的员工$.ajax({url:'http://localhost/confirmEmp',data:{'e_id':emp.e_id},type:'post',dataType:'json'}).done(function(result){//关闭加载条layer.close(confirmLoad);if(result.success){ Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail(function(xhr){layer.close(confirmLoad);Swal.fire({icon:'error',title:`${xhr.status}`,text:'服务器繁忙，请稍后再试！',confirmButtonText:'确定'});});}}); }var updateWinId=null;/*定义修改的函数*/const updataEmp=function(linkObj){//获取修改的索引号var row_id=$(linkObj).attr('data_id_index');//alert(row_id)//顺序排，不是e_id//根据索引号获取需要修改的数据var data=$("#proList").bootstrapTable('getData');var emp=data[row_id];//需要修改的员工//alert(emp.e_name)//alert(emp.e_name)//alert(emp.e_birthday)//获取所有的表单元素$('#update-form :input').each(function(){//this代表当前jquery中的dom对象//$(this).attr('name')//取到当前dom对象的name属性值//emp[$(this).attr('name')]//获取与dom对象属性值对应的员工数据的属性$(this).val(emp[$(this).attr('name')]);});updateWinId=layer.open({type: 1,title:'修改员工信息',skin: 'layui-layer-rim', //加上边框area: ['800px', '620px'], //宽高content: $('#update-win'),zIndex:200});};/*修改员工*/$('#update-form-btn').click(function(){//alert(2)$.ajax({type:"post",url:"http://localhost/updateEmp",data:{'e_id':$('#update-form-e_id').val(),'e_name':$('#update-form-e_name').val(),'e_age':$('#update-form-e_age').val(),'e_birthday':$('#update-form-e_birthday').val(),'e_address':$('#update-form-e_address').val(),'d_id':$('#update-form-d_name').val()},dataType:'json',async:true}).done(function(result){if(result.success){/*关闭窗口*/layer.close(updateWinId);Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail(function(xhr){layer.close(updateWinId);Swal.fire({icon:'error',title:'服务器繁忙，请稍后再试!'+xhr.status,confirmButtonText:'确定'});});});/*搜索时刷新框*/$('#btn_querry').click(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_id': $('#e_id').val(), 'e_name': $('#e_name').val(), 'e_age': $('#e_age').val(), 'e_birthday_start': $('#e_birthday_start').val(), 'e_birthday_end': $('#e_birthday_end').val(), 'e_address': $('#e_address').val(), 'e_dept': $('#e_dept').val(), 'e_status': $('#e_status').val() } });return false;});/*部门下拉框改变时触发，刷新列表*/$('#e_dept').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_dept': $('#e_dept').val() } });});/*状态改变时触发*/$('#e_status').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_status': $('#e_status').val() } });});/*生日改变时触发*/$('#e_birthday_start').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_birthday_start': $('#e_birthday_start').val() } });});$('#e_birthday_end').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_birthday_end': $('#e_birthday_end').val() } });});/*定义新增窗口id*/let addWinId=null;/*增加时的按钮事件*/$('#btn-add-worker').click(()=>{addWinId=layer.open({type: 1,title:'增加员工',skin: 'layui-layer-rim', //加上边框area: ['800px', '580px'], //宽高content: $('#add-win'),zIndex:200});});/*提交按钮*/$('#add-form-btn').click(function(){$.ajax({type:"post",url:"http://localhost/addEmp",async:true,data:{'e_name':$('#add-form-e_name').val(),'e_age':$('#add-form-e_age').val(),'e_birthday':$('#add-form-e_birthday').val(),'e_address':$('#add-form-e_address').val(),'d_id':$('#add-form-d_name').val()},dataType:'json'}).done(function(result){if(result.success){/*增加成功后重置表单*/$('#add-form')[0].reset();/*关闭窗口*/layer.close(addWinId);Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail(function(){//alert("服务器繁忙，请稍后再试")layer.close(addWinId);Swal.fire({icon:'error',title:'服务器繁忙，请稍后再试!',confirmButtonText:'确定'});});});/*批量刪除时*/$('#btn-delete-multi').click(()=>{//获取所选的行数据var deleteStr=$("#proList").bootstrapTable('getSelections');if(deleteStr.length==0){Swal.fire({icon:'error',title:"您未选择数据，请选择数据！",confirmButtonText:'确定'});return;}var e_ids=[];for(var e_id of deleteStr){e_ids.push(e_id.e_id);} Swal.fire({icon:'warning',title:'您确定要删除吗？',text:'数据一旦删除，将不可以恢复！',confirmButtonText:'删除',showCancelButton:true,cancelButtonText:'取消'}).then((data)=>{if(data.value){var deleteMuiliLoad = layer.load(1, {time: 10*1000});//定义加载条//获取所选的行数据$.ajax({url:'http://localhost/deleteMuiliEmp',data:{'e_ids':e_ids},type:'post',dataType:'json'}).done((result)=>{layer.close(deleteMuiliLoad);//管不加载条if(result.success){Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});$("#proList").bootstrapTable('refresh');}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail((xhr)=>{layer.close(deleteMuiliLoad);//管不加载条Swal.fire({icon:'error',title:`${xhr.status}`,text:'服务器繁忙，请稍后再试！',confirmButtonText:'确定'});});}}); return false;//阻止默认行为});应用2
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--css样式引入开始--><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/font-awesome.min.css" /><link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" /><!--css样式引入结束--><style>html {width: 100%;height: auto;}#main-info a {text-decoration: none;margin: 0 3%;font-size: 150%;padding-left: 1%;}#connect a{text-decoration: none;color: #4E5465;}#connect a:hover{color:#444444;}</style></head><body><!--主窗口开始--><div style="background-color:#FFFFFF;width: 100%;height: 100%;position: absolute;"><div id="main-header" style="background-color:#A9A9A9;width: 100%;height: 1%;"></div><div style="display: inline;position: absolute;font-size: 200%;padding-left:1%;font-weight: 600;color: #FF0000;letter-spacing: 6px;">XXX机票预定系统</div><div id="main-nav-info" style="background-color: #FFB6C1;float: right;width: 80%;height: 40px;margin-right: 0.2%;padding-top: 3px;border-radius: 10px;"><div id="main-info" style="display: inline;padding-left: 11%;"><a href="#"><i class="fa fa-hand-o-right" aria-hidden="true"></i> 首页</a><a href="#"><i class="fa fa-television" aria-hidden="true"></i> 公司资讯</a><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> 预定航班</a><a href="#"><i class="fa fa-plane" aria-hidden="true"></i> 科普航班</a><a href="#"><i class="fa fa-user-o" aria-hidden="true"></i> 用户评论</a></div></div><div style="padding-top: 3%;padding-left: 2%;font-size: 15px;letter-spacing: 25px;color: orangered;text-align: center;"><i class="fa fa-bell-o" aria-hidden="true"></i> 一流的服务 专业订票网站 <i class="fa fa-bell-o" aria-hidden="true"></i></div><!--左侧菜单开始--><div id="main-win" style="width: 18%;height: 85%;margin-left: 0.5%;background-color:aliceblue;display: inline-block;"><div style="padding-left: 67px;padding-top: 60px;"><button id="login" type="button" class="btn btn-primary">登录</button> <button id="add" type="button" class="btn btn-success">注册</button></div><div style="padding-top: 120px;padding-left: 75px;"><div style="display: inline;font-size: 30px;"><i class="fa fa-search" aria-hidden="true"></i></div><div style="display: inline;"><label style="font-size: 30px;">搜索</label></div></div><!--搜索模块开始--><div style="display: inline;"><form><fieldset class="form-group" style="padding-top: 20px;display: inline;"><div class="columns"><div style="display: inline;padding-left: 60px;"><input type="radio" name="gridRadios" id="gridRadios1" value="option1"><label for="gridRadios1">单程</label></div><div style="display: inline;padding-left: 35px;"><input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"><label class="form-check-label" for="gridRadios2">往返</label></div></div></fieldset><div class="form-row" style="display: inline;"><div class="form-group col-md-10" style="padding-left: 30px;display: inline;"><label for="inputState">始发地</label><select id="startAdd" class="form-control"><option selected="selected">请选择始发地址</option></select></div><div class="form-group col-md-10" style="padding-left: 30px;display: inline;"><label for="inputState">目的地</label><select id="endAdd" class="form-control"><option selected="selected">请选择目的地址</option></select></div></div><div style="padding-top: 170px;padding-left: 100px;display: inline;"><button type="button" class="btn btn-primary">查询</button><!--<a href="http://127.0.0.1:8020/my-filght-client/content.html" target="content">测试</a>--></div></form></div><!--搜索模块结束--><!--登录弹框开始--><div id="user-login" style="display: none;"><form id="login-form"><div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;"><label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" id="login-uname" style="margin-top: 10px;"></div><div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="login-upwd" style="margin-top: 10px;"></div><button id="login-btn" type="button" class="btn btn-primary btn-lg btn-block" style="margin-top: 40px;">登录</button><button id="cancel-login" type="button" class="btn btn-danger btn-lg btn-block" style="margin-top: 10px;">取消</button></form></div><!--登录弹框结束--><!--注册弹框开始--><div id="user-add" style="display: none;"><form id="add-form"><div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;"><label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" id="uname" style="margin-top: 10px;"></div><div class="form-group" style="padding-top: 20px; padding-left: 10px;padding-right: 10px;"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="upwd" style="margin-top: 10px;"></div><button id="add-user" type="button" class="btn btn-primary btn-lg btn-block" style="margin-top: 40px;">提交</button><button id="cancel-add" type="button" class="btn btn-danger btn-lg btn-block" style="margin-top: 10px;">取消</button></form></div><!--注册弹框结束--></div><!--左侧菜单结束--><!--内容区div开始--><div id="main-content" style="margin-left: 0px;position: absolute;display: inline;padding-right: 80%;padding-bottom: 39.5%;"><iframe name="content" style="position: absolute;height: 103%;width: 101.5%;border: 0px;" src="content.html"><!--放内容区--></iframe></div><!--内容区div结束--><div id="main-bottom" style="background-color:#C2C2C2;height: 35px;width: 99.8%;"><label id="connect" style="padding-top: 5px;padding-left: 40px; font-size: 20px;">友情链接：<a href="#">百度</a> <a href="#">新浪</a> <a href="#">中国所有城市</a> <a href="#">中国省份简称</a> <a href="#">中国最大城市</a> <a href="#">中国各省会城市</a> <a href="#">淘宝</a> <a href="#">京东</a> <a href="#">腾讯官网</a> <a href="#">阿里巴巴官网</a> <a href="#">要旅游,找途牛</a> <a href="#">12306</a></label></div></div><!--主窗口结束--><!--js引入开始--><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/popper.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script><script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script><script type="text/javascript" src="layer/layer.js"></script><script type="text/javascript" src="js/sweetalert2.all.min.js"></script><!--js引入结束--><script>//取消登录var login=null;//取消注册var add=null;/*始发地下拉菜单开始*/$('#startAdd').click(() => {$.ajax({type: "post",url: "http://localhost/getPlaneAddress",async: true,dataType: 'json'}).done((data) => {//$("#startAdd").append('<option selected=selected></option>');for(var addressName of data) {$('#startAdd').append('<option>' + addressName.add_name + '</option>');}}).fail((xhr) => {alert(xhr.status)});});/*始发地下拉菜单结束*//*目的地下拉菜单结束*/$('#endAdd').click(() => {$.ajax({type: "post",url: "http://localhost/getPlaneAddress",async: true,dataType: 'json'}).done((data) => {for(var addressName of data) {$('#endAdd').append('<option>' + addressName.add_name + '</option>');}}).fail((xhr) => {alert(xhr.status)});});/*目的地下拉菜单结束*//*登录弹框开始*/$('#login').click(() => {login=layer.open({type: 1,title: '用户登录信息',skin: 'layui-layer-rim', //加上边框area: ['500px', '400px'], //宽高content: $('#user-login'),zIndex: 200});});/*登录弹框结束*//*注册弹框开始*/$('#add').click(() => {add=layer.open({type: 1,title: '注册用户信息',skin: 'layui-layer-rim', //加上边框area: ['500px', '400px'], //宽高content: $('#user-add'),zIndex: 200});});/*注册弹框结束*//*取消登录开始*/$('#cancel-login').click(() => {layer.close(login);//关闭登录弹出的框});/*取消登录结束*//*取消注册开始*/$('#cancel-add').click(() => {layer.close(add);//关闭注册弹出的框});/*取消注册结束*//*注册提交开始*/$('#add-user').click(()=>{var uname=$('#uname').val();var upwd=$('#upwd').val();if(uname.length==0||upwd.length==0){Swal.fire({icon:'warning',title:'请填写合法的注册信息',timer:3000,showConfirmButton:false});layer.close(add);return;}$.ajax({type:"post",url:"http://localhost/addUser",dataType:'json',data:{'uname':uname,'upwd':upwd},async:true}).done((result)=>{if(result.success){layer.close(add);$('#add-form')[0].reset();Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});}}).fail((xhr)=>{alert(xhr.status)});});/*注册提交结束*//*登录提交开始*/$('#login-btn').click(()=>{var login_uname=$('#login-uname').val();var login_upwd=$('#login-upwd').val();if(login_uname.length==0||login_upwd==0){Swal.fire({icon:'warning',title:'请填写正确的登录信息',timer:3000,showConfirmButton:false});return;}$.ajax({type:"post",url:"http://localhost/login",dataType:'json',data:{'uname':login_uname,'upwd':login_upwd},async:true}).done((result)=>{if(result.success){layer.close(login);$('#login-form')[0].reset();Swal.fire({icon:'success',title:result.message,timer:2000,showConfirmButton:false});}else{Swal.fire({icon:'error',title:result.message,confirmButtonText:'确定'});layer.close(login);$('#login-form')[0].reset();}}).fail((xhr)=>{alert(xhr.status)});});/*登录提交结束*/</script></body>
</html>
content.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="css/font-awesome.min.css" /><link rel="stylesheet" href="bootstrap-table/bootstrap-table.css" /></head><body><table id="table"></table><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script type="text/javascript" src="js/popper.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="bootstrap-table/bootstrap-table.js"></script><script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script><script type="text/javascript" src="layer/layer.js"></script><script type="text/javascript" src="js/sweetalert2.all.min.js"></script><script>$('#table').bootstrapTable({url:"http://localhost/planeInfo",pagination: true,//是否显示分页条pageSize: 5,//一页显示的行数paginationLoop: false,//是否开启分页条无限循环，最后一页时点击下一页是否转到第一页pageList: [5, 8, 10],//选择每页显示多少行，数据过少时可能会没有效果columns: [ {field: 'id',title: '编号'},{field: 'info',title: '航班信息'}, {field: 'starttime',title: '起飞时间'}, {field: 'endtime',title: '到达时间'}, {field: 'price',title: '价格'}, {field: 'id',title: '订票按钮',width:'180',formatter: function(value,rows,index) {return `<a href='#' class='btn btn-success btn-lm' data_id="${value}">订票</a>`; }}]});</script></body>
</html>bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码相关推荐
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...
- 一、bootstrap table 初体验
http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...
- bootstrap table 实现父子表
在进行项目时,用到了bootstrap table的父子表,现在记录下使用过程中遇到的坑. <!DOCTYPE html> <html> <head> <me ...
- jQuery简单实现人口趋势动态图
jQuery简单实现人口趋势动态图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...
- bootstrap table 适应移动端_前端框架bootstrap和layui有什么区别
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一来可以借鉴优秀框架的思想,二来可以顺便学 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理（附赠福利）
ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十四节--后台工作者HangFire与ABP框架Abp.Hangfire及扩展...
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于 ...
最新文章
- java 连续打印_Java实现连续打印ABC
- CMake编译cuda出错
- 校园送礼风为何难刹住 “送了没个完，不送没个底”
- Python Django 配置URL的方式（url传参方式）
- jsch 移动服务器上文件,jsch上传文件到服务器
- 【dfs】GCD与LCM（jzoj 1608）
- datatable如何生成级联数据_如何把Excel表数据批量生成条形码
- Trick（一）——判断一个数的位数
- 《Core Data应用开发实践指南》一2.15 小结
- Confluence 6 附件存储配置
- 阿里云祝顺民：未来的网络是云网一体，应用感知不到网络的存在
- SpringBoot Security 整合 thymeleaf 模板自定义登录页面，按需提示错误信息
- 景区手绘地图（电子地图、智慧导览系统）如何制作
- 基于角色的权限管理系统设计思路
- 手机版wps怎么制作折线图_PPT制作必修课下载-PPT制作必修课app官方版v1.0手机版下载...
- 增加虚拟android内存,SD卡变RAM 增加虚拟内存方法
- 东大22春领导科学与决策X《领导科学与决策》在线平时作业3百分非答案
- Unity网格编程篇(三) 温度图、热力图
- 分群思维（六）分群思维的顶层应用-用户画像
- JUC--005--locks1