bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码
生活随笔
收集整理的這篇文章主要介紹了
bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前端綜合應(yīng)用
-
bootstrap-table
表格神器 -
bootstrap.min.js
簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。 -
font-awesome.min.css
基于css框架的網(wǎng)頁字體圖標(biāo)庫。 -
layui.css
國產(chǎn)開源前端UI，簡(jiǎn)單易上手，簡(jiǎn)潔美觀。 -
jquery-3.4.1.min.js
輕量級(jí)的、兼容多瀏覽器的JavaScript庫。 -
popper.min.js
輕量級(jí)的提示插件(彈層（框）)。 -
sweetalert2.all.min.js
可響應(yīng)，易交互的彈框提示。 -
layer
彈層組件。
應(yīng)用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>編號(hào)</label><input type="text" class="form-control" id="e_id" placeholder="員工編號(hào)"><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>狀態(tài)</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><!--增加時(shí)彈出的層開始--><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>請(qǐng)選擇部門</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><!--增加時(shí)彈出的層結(jié)束--><!--修改時(shí)彈出的層開始--><div id="update-win" style="display: none;padding: 15px;"><form id="update-form"><div class="form-group"><label>編號(hào)</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>請(qǐng)選擇部門</option></select></div><button id="update-form-btn" type="button" class="btn btn-primary btn-lg btn-block">確認(rèn)修改</button></form></div> <!--修改時(shí)彈出的層結(jié)束--><!--員工列表--><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:'服務(wù)器繁忙，請(qǐng)稍后再試！',confirmButtonText:'確定'});});/*獲取員工列表信息*/$('#proList').bootstrapTable({url: 'http://localhost/getAllEmp',pagination: true,//是否顯示分頁條pageSize: 5,//一頁顯示的行數(shù)paginationLoop: false,//是否開啟分頁條無限循環(huán)，最后一頁時(shí)點(diǎn)擊下一頁是否轉(zhuǎn)到第一頁pageList: [5, 8, 10],//選擇每頁顯示多少行，數(shù)據(jù)過少時(shí)可能會(huì)沒有效果columns: [{checkbox:true,},{field: 'e_id',title: '員工編號(hào)'}, {field: 'e_name',title: '員工姓名'}, {field: 'e_age',title: '員工年齡'}, {field: 'e_birthday',title: '員工生日'}, {field: 'e_address',title: '員工住址'}, {field: 'd_name',title: '所屬部門'}, {field: 'e_status',title: '員工狀態(tài)',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(" ");}}],/*表格呈現(xiàn)事件.表格生成后才能進(jìn)行刪除和修改*/onPostBody(data){/*單個(gè)刪除*/$('.delete').click(function(){Swal.fire({icon:'warning',title:'您確定要?jiǎng)h除嗎？',text:'數(shù)據(jù)一旦刪除，將不可以恢復(fù)！',confirmButtonText:'刪除',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//點(diǎn)擊了確定按鈕//加載條，并且設(shè)定最長(zhǎng)等待10秒 var deleteLoad = layer.load(2, {time: 10*1000}); //又換了種風(fēng)格，并且設(shè)定最長(zhǎng)等待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){//關(guān)閉加載條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:'服務(wù)器繁忙，請(qǐng)稍后再試！',confirmButtonText:'確定'});});}}); });/*修改時(shí)*/$('.update').click(function(){//alert(1);updataEmp(this);});/*確定員工在職時(shí)*/$('.confirm').click(function(){//alert(1);confirmEmp(this);});/*確定員工離職時(shí)*/$('.exit').click(function(){//alert(1);exitEmp(this);});}});/*定義離職員工的函數(shù)*/const exitEmp=function(linkObj){ //==========================================================================================================Swal.fire({icon:'warning',title:'您確定該員工離職嗎？',text:'離職員工一旦確定，將不可以更改！',confirmButtonText:'確定',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//點(diǎn)擊了確定按鈕//加載條，并且設(shè)定最長(zhǎng)等待10秒 var exitLoad = layer.load(2, {time: 10*1000}); //又換了種風(fēng)格，并且設(shè)定最長(zhǎng)等待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){//關(guān)閉加載條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:'服務(wù)器繁忙，請(qǐng)稍后再試！',confirmButtonText:'確定'});});}}); //==========================================================================================================}/*定義確定員工的函數(shù)*/const confirmEmp=function(linkObj){Swal.fire({icon:'warning',title:'您確定該員工嗎？',text:'員工一旦確定，將不可以更改！',confirmButtonText:'確定',showCancelButton:true,cancelButtonText:'取消'//showConfirmButton:false}).then((data)=>{if(data.value){//點(diǎn)擊了確定按鈕//加載條，并且設(shè)定最長(zhǎng)等待10秒 var confirmLoad = layer.load(2, {time: 10*1000}); //又換了種風(fēng)格，并且設(shè)定最長(zhǎng)等待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){//關(guān)閉加載條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:'服務(wù)器繁忙，請(qǐng)稍后再試！',confirmButtonText:'確定'});});}}); }var updateWinId=null;/*定義修改的函數(shù)*/const updataEmp=function(linkObj){//獲取修改的索引號(hào)var row_id=$(linkObj).attr('data_id_index');//alert(row_id)//順序排，不是e_id//根據(jù)索引號(hào)獲取需要修改的數(shù)據(jù)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代表當(dāng)前jquery中的dom對(duì)象//$(this).attr('name')//取到當(dāng)前dom對(duì)象的name屬性值//emp[$(this).attr('name')]//獲取與dom對(duì)象屬性值對(duì)應(yīng)的員工數(shù)據(jù)的屬性$(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){/*關(guān)閉窗口*/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:'服務(wù)器繁忙，請(qǐng)稍后再試!'+xhr.status,confirmButtonText:'確定'});});});/*搜索時(shí)刷新框*/$('#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;});/*部門下拉框改變時(shí)觸發(fā)，刷新列表*/$('#e_dept').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_dept': $('#e_dept').val() } });});/*狀態(tài)改變時(shí)觸發(fā)*/$('#e_status').change(function() {$("#proList").bootstrapTable('refresh', { query: { 'e_status': $('#e_status').val() } });});/*生日改變時(shí)觸發(fā)*/$('#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;/*增加時(shí)的按鈕事件*/$('#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();/*關(guān)閉窗口*/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("服務(wù)器繁忙，請(qǐng)稍后再試")layer.close(addWinId);Swal.fire({icon:'error',title:'服務(wù)器繁忙，請(qǐng)稍后再試!',confirmButtonText:'確定'});});});/*批量刪除時(shí)*/$('#btn-delete-multi').click(()=>{//獲取所選的行數(shù)據(jù)var deleteStr=$("#proList").bootstrapTable('getSelections');if(deleteStr.length==0){Swal.fire({icon:'error',title:"您未選擇數(shù)據(jù)，請(qǐng)選擇數(shù)據(jù)！",confirmButtonText:'確定'});return;}var e_ids=[];for(var e_id of deleteStr){e_ids.push(e_id.e_id);} Swal.fire({icon:'warning',title:'您確定要?jiǎng)h除嗎？',text:'數(shù)據(jù)一旦刪除，將不可以恢復(fù)！',confirmButtonText:'刪除',showCancelButton:true,cancelButtonText:'取消'}).then((data)=>{if(data.value){var deleteMuiliLoad = layer.load(1, {time: 10*1000});//定義加載條//獲取所選的行數(shù)據(jù)$.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:'服務(wù)器繁忙，請(qǐng)稍后再試！',confirmButtonText:'確定'});});}}); return false;//阻止默認(rèn)行為});應(yīng)用2
index.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,//一頁顯示的行數(shù)paginationLoop: false,//是否開啟分頁條無限循環(huán)，最后一頁時(shí)點(diǎn)擊下一頁是否轉(zhuǎn)到第一頁pageList: [5, 8, 10],//選擇每頁顯示多少行，數(shù)據(jù)過少時(shí)可能會(huì)沒有效果columns: [ {field: 'id',title: '編號(hào)'},{field: 'info',title: '航班信息'}, {field: 'starttime',title: '起飛時(shí)間'}, {field: 'endtime',title: '到達(dá)時(shí)間'}, {field: 'price',title: '價(jià)格'}, {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>總結(jié)
以上是生活随笔為你收集整理的bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你是否了解APP耗电问题？深入探索 An
- 下一篇： b站视频素材哪里找？怎么找b站素材？