BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
更新時間：2016年10月26日 10:59:24 作者：ZeroWM
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格，表格封裝了3個版本，接下來通過本文給大家展示下樣式及代碼，對bootstrap增刪改查相關(guān)知識感興趣的朋友一起通過本文學(xué)習(xí)吧
前言
bootstrap的表格樣式，有類似EasyUI的表格，也有卡片式表格，放到移動端顯示，各有千秋。但是BootStrap自帶的表格是沒有操作列的，網(wǎng)上的資源不少，但是都是比較單一、零碎，JS、CSS也經(jīng)常給的不全，自己經(jīng)過大概一個月左右的時間，把表格封裝了一下,希望能分享給大家。
表格封裝了3個版本，接下來給大家展示一下樣式和代碼。
版本一
1. 樣式
表格布局：
添加：添加一行新的空白代碼
修改：選中可修改的列，點(diǎn)擊需要修改的單元格，即可變成可編輯的狀態(tài)。
2.代碼
@using DatatableDemo.Models
@using ITOO.FreshNewReport.ViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 表格</title>
<link href="../../BootStrap/StuPersonInfo/bootstrap.min.css" rel="stylesheet" />
<script src="../../BootStrap/StuPersonInfo/bootstrap.min.js"></script>
<script src="../../BootStrap/StuPersonInfo/jquery.min.js"></script>
@*表格JS*@
<link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
<meta name="viewport" content="width=device-wdith,initia-scale=1.0">
@*動態(tài)添加表格*@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../../BootStrap/datagrid/css/bootstrap-table.min.css" rel="stylesheet" />
<link href="../../BootStrap/datagrid/css/bootstrap.min.css" rel="stylesheet" />
<script src="../../BootStrap/datagrid/js/jquery.min.js"></script>
<script src="../../BootStrap/datagrid/js/jquery.base64.js"></script>
<script src="../../BootStrap/datagrid/js/bootstrap-table.js"></script>
<script src="../../BootStrap/datagrid/js/bootstrap-table-export.js"></script>
@*添加批量刪除*@
<meta charset="utf-8">
<script type="text/javascript" src="../../BootStrap/datagrid/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnDel").click(function () {
$(":checked").parent().parent().fadeOut("show"); //隱藏所有被選中的input元素
//parent() 獲得當(dāng)前匹配元素集合中每個元素的父元素,
})
$("tr").mousemove(function () {
$(this).css("background", "#F0F0F0"); //鼠標(biāo)經(jīng)過背景顏色變?yōu)榛疑?
})
$("tr").mouseout(function () {
$(this).css("background", "#fff"); //離開后背景顏色回復(fù)白色
})
//全選
$("#checkAll").click(function () {
if ($("#checkAll").attr("checked") == false) {
$("input[name='checkbox']").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name='checkbox']").each(function () {
$(this).attr("checked", false);
});
}
});
});
</script>
@*添加一行新表格數(shù)據(jù)*@
<script>
function append() {
var strAppend = '<tr style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;"><td ><input type="checkbox" value="" editable="false" name="checkbox"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><tr>';
$("#AddFamily tbody ").append(strAppend).editableTableWidget();
}
</script>
@*表格樣式CSS*@
<style>
table {
border-collapse: collapse;
border: 1px solid #FFFFFF;
}
table td {
text-align: center;
height: 30px;
font-size: 12px;
line-height: 30px;
border: 1px solid #efecec;
}
</style>
@*添加批量刪除*@
<script src="../../JS/TableJs.js"></script>
</head>
<body>
<script src="../../BootStrap/FamilyJS.js"></script>
@*按鈕*@
<div class="heading">
@*添加按鈕*@
<button id="build" type="button" class="btn btn-success" data-toggle="modal" data-target="" onclick="append()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
</button>
@*修改按鈕*@
<button id="btnEdit" type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改
</button>
@*刪除按鈕---無彈出框*@
<button id="btnDel" type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteForm" onclick="">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>刪除
</button>
</div>
@*表格*@
<div class="widget-content padded clearfix">
<table id="AddFamily" class="table table-bordered table-striped" width="1000px" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto">
<thead>
<th class="check-header hidden-xs">
<input id="checkAll" name="checkAll" type="checkbox">
<th>姓名</th>
<th>稱謂 </th>
<th>年齡 </th>
<th>政治面貌</th>
<th>電話號碼 </th>
<th>工作單位</th>
<th>家庭住址</th>
</thead>
<tbody id="mainbody">
@*從數(shù)據(jù)庫讀取的數(shù)據(jù)，遍歷ViewModel里面的字段并賦值*@
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>)
{
<tr>
<td>
<input name="checkbox" type="checkbox" id="1">
</td>
<td data-field="Name">@enStuFam.Name </td>
<td data-field="RelationShip">@enStuFam.RelationShip</td>
<td data-field="Age">@enStuFam.Age</td>
<td>@enStuFam.PoliticalStatus</td>
<td>@enStuFam.TelNum </td>
<td>@enStuFam.WorkUnit</td>
<td>@enStuFam.Address </td>
</tr>
}
</tbody>
</table>
</div>
<link href="../../BootStrap/jquery.bdt.css" rel="stylesheet" />
@*創(chuàng)建表格*@
<script>
//綁定編輯、回車事件
$(function () {
// $('#build').click(build);//實(shí)現(xiàn)創(chuàng)建表格
$('#btnEdit').click(edit);
$('#cells, #rows').keyup(function (e) {
if (e.keyCode === 13) {
//添加存入數(shù)據(jù)庫的代碼
}
});
});
//將表格轉(zhuǎn)成可編輯的表格
function edit(index) {
// $('#table').editableTableWidget();--效果是單擊編輯按鈕后，所有的都可以編輯
// $(":checked").editableTableWidget();
$(":checked").parent().parent().editableTableWidget();//整行的可以編輯
}
//轉(zhuǎn)成可編輯的表格
/*global $, window*/
$.fn.editableTableWidget = function (options) {
'use strict';
return $(this).each(function () {
var buildDefaultOptions = function () {
var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);
opts.editor = opts.editor.clone();
return opts;
},
activeOptions = $.extend(buildDefaultOptions(), options),
ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
element = $(this),
editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
active,
showEditor = function (select) {
active = element.find('td:focus');
if (active.length) {
editor.val(active.text())
.removeClass('error')
.show()
.offset(active.offset())
.css(active.css(activeOptions.cloneProperties))
.width(active.width())
.height(active.height())
.focus();
if (select) {
editor.select();
}
}
},
setActiveText = function () {
var text = editor.val(),
evt = $.Event('change'),
originalContent;
if (active.text() === text || editor.hasClass('error')) {
return true;
}
originalContent = active.html();
active.text(text).trigger(evt, text);
if (evt.result === false) {
active.html(originalContent);
}
},
movement = function (element, keycode) {
if (keycode === ARROW_RIGHT) {
return element.next('td');
} else if (keycode === ARROW_LEFT) {
return element.prev('td');
} else if (keycode === ARROW_UP) {
return element.parent().prev().children().eq(element.index());
} else if (keycode === ARROW_DOWN) {
return element.parent().next().children().eq(element.index());
}
return [];
};
editor.blur(function () {
setActiveText();
editor.hide();
}).keydown(function (e) {
if (e.which === ENTER) {
setActiveText();
editor.hide();
active.focus();
e.preventDefault();
e.stopPropagation();
} else if (e.which === ESC) {
editor.val(active.text());
e.preventDefault();
e.stopPropagation();
editor.hide();
active.focus();
} else if (e.which === TAB) {
active.focus();
} else if (this.selectionEnd - this.selectionStart === this.value.length) {
var possibleMove = movement(active, e.which);
if (possibleMove.length > 0) {
possibleMove.focus();
e.preventDefault();
e.stopPropagation();
}
}
})
.on('input paste', function () {
var evt = $.Event('validate');
active.trigger(evt, editor.val());
if (evt.result === false) {
editor.addClass('error');
} else {
editor.removeClass('error');
}
});
element.on('click keypress dblclick', showEditor)
.css('cursor', 'pointer')
.keydown(function (e) {
var prevent = true,
possibleMove = movement($(e.target), e.which);
if (possibleMove.length > 0) {
possibleMove.focus();
} else if (e.which === ENTER) {
showEditor(false);
} else if (e.which === 17 || e.which === 91 || e.which === 93) {
showEditor(true);
prevent = false;
} else {
prevent = false;
}
if (prevent) {
e.stopPropagation();
e.preventDefault();
}
});
element.find('td').prop('tabindex', 1);
$(window).on('resize', function () {
if (editor.is(':visible')) {
editor.offset(active.offset())
.width(active.width())
.height(active.height());
}
});
});
};
$.fn.editableTableWidget.defaultOptions = {
cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
'text-align', 'font', 'font-size', 'font-family', 'font-weight',
'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
editor: $('<input>')
};
</script>
</body>
</html>
版本二
1. 樣式
布局樣式：
添加/修改：
2. 代碼
@using ITOO.FreshNewReport.ViewModel
@{
Layout = null;
}
<html>
<head>
<title>數(shù)據(jù)表格編輯_大氣漂亮的Bootstrap后臺管理系統(tǒng)模板Se7en - JS代碼網(wǎng)
</title>
<!--<link media="all" rel="stylesheet" type="text/css" />-->
<link href="../../BootStrap/se7ven/../../BootStrap/se7ven/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/isotope.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/jquery.fancybox.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/fullcalendar.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/wizard.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/select2.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/morris.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/datatables.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/datepicker.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/timepicker.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/colorpicker.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/bootstrap-switch.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/daterange-picker.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/typeahead.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/summernote.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/pygments.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/style.css" media="all" rel="stylesheet" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/color/green.css" media="all" rel="alternate stylesheet" title="green-theme" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/color/orange.css" media="all" rel="alternate stylesheet" title="orange-theme" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/color/magenta.css" media="all" rel="alternate stylesheet" title="magenta-theme" type="text/css" />
<link href="../../BootStrap/se7ven/stylesheets/color/gray.css" media="all" rel="alternate stylesheet" title="gray-theme" type="text/css" />
<script src="../../BootStrap/se7ven/javascripts/jquery.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/raphael.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/selectivizr-min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.mousewheel.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.vmap.world.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/fullcalendar.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/gcal.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/datatable-editable.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/excanvas.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.isotope.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/isotope_extras.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/modernizr.custom.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/select2.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/styleswitcher.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/wysiwyg.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/summernote.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.inputmask.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap-timepicker.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap-colorpicker.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/typeahead.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/daterange-picker.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/date.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/morris.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/skycons.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/fitvids.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/main.js" type="text/javascript"></script>
<script src="../../BootStrap/se7ven/javascripts/respond.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body>
<div class="modal-shiftfix">
<div class="container-fluid main-content">
<div class="page-title">
<h1>Editable DataTables
</h1>
</div>
<!-- DataTables Example -->
<div class="row">
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="heading">
<i class="icon-table"></i>DataTable with Sorting<a class="btn btn-sm btn-primary-outline pull-right" href="#" id="add-row"><i class="icon-plus"></i>Add row</a>
</div>
<div class="widget-content padded clearfix">
<table class="table table-bordered table-striped" id="datatable-editable">
<thead>
@*<th class="check-header hidden-xs">
<input id="checkAll" name="checkAll" type="checkbox">*@
<th>姓名</th>
<th>稱謂 </th>
<th>年齡 </th>
<th>政治面貌</th>
<th>電話號碼 </th>
<th>工作單位</th>
<th class="hidden-xs">家庭住址</th>
<th width="60"></th>
<th width="75"></th>
</thead>
<tbody>
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>)
{
<tr>
@*<td>
<input name="checkbox" type="checkbox" id="1">
</td>*@
<td>@enStuFam.Name </td>
<td>@enStuFam.RelationShip</td>
<td>@enStuFam.Age</td>
<td>@enStuFam.PoliticalStatus</td>
<td>@enStuFam.TelNum </td>
<td>@enStuFam.WorkUnit</td>
<td>@enStuFam.Address </td>
<td>
<a class="edit-row" href="#">Edit</a>
</td>
<td>
<a class="delete-row" href="#">Delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- end DataTables Example -->
</div>
</div>
</body>
</html>
版本三
1.樣式
卡片式表格：
添加/修改 彈出一個新頁面：
2.代碼
View代碼：
<div class="container-fluid main-content"> <div class="row"> <div class="col-lg-12"> <div class="widget-container fluid-height clearfix"> @*按鈕*@ <div class="heading"> @*添加按鈕*@ <span class="ui-button"> <a class="btn btn-success glyphicon glyphicon-plus" href="../AddEduInfo/AddEduInfo">添加</a> </span> @*修改*@ <span class="ui-button"> <a class="btn btn-warning glyphicon glyphicon-edit" href="../AddEduInfo/AddEduInfo">修改</a> </span> @*刪除*@ @* <span class="ui-button" data-target="#myModal" > <a class="btn btn-danger glyphicon glyphicon-minus" >刪除</a> </span>*@ <span> <button type="button" class="btn btn-danger glyphicon glyphicon-minus" data-toggle="modal" data-target="#myModal"> 刪除 </button> </span> </div> <table id="events-table" style="font-size: 15px" class="table" data-toggle="table" data-card-view="true" data-url="/StuPersonInfo/ShowEducation"> <thead> <tr class="info"> <th data-field="state" data-checkbox="true"></th> <th data-field="StartDate" data-sortable="true">開始日期</th> <th data-field="EndDate" data-sortable="true">結(jié)束日期</th> <th data-field="SchoolName" data-sortable="true">畢業(yè)學(xué)校</th> <th data-field="TeacherName" data-visible="true">證明教師</th> @* <th data-field="" data-sortable="true" data-formatter="operateFormatter" data-events="operateEvents">編 輯</th>*@ </tr> </thead> </table> </div> </div> </div> </div>
Controller代碼：
#region ShowEducation() 顯示教育經(jīng)歷 王美 2015年6月5日
/// <summary>
/// 顯示教育經(jīng)歷
/// </summary>
/// <returns>教育經(jīng)歷Json</returns>
public JsonResult ShowEducation()
{
//創(chuàng)建WCF接口
IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService();
//從緩存中獲取身份證號
string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID");
//調(diào)用WCF查詢方法
List<EduExperienceViewModel> listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID);
//返回Json串
return Json(listEduInfo, JsonRequestBehavior.AllowGet);
}
#endregion
以上所述是小編給大家介紹的BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- JS表格組件神器bootstrap table詳解（強(qiáng)化版）
- JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- 基于Bootstrap使用jQuery實(shí)現(xiàn)簡單可編輯表格
- 利用Bootstrap實(shí)現(xiàn)表格復(fù)選框checkbox全選
- 基于Bootstrap3表格插件和分頁插件實(shí)例詳解
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- Bootstrap實(shí)現(xiàn)的表格合并單元格示例
相關(guān)文章
最新需要js 文件壓縮圖片上傳 以前沒搞過，新手把學(xué)習(xí)過程分享，對JS HTML圖片顯示Canvas 壓縮功能感興趣的朋友一起看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序ibeacon三點(diǎn)定位的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
Util.js文件包含了一些工具函數(shù)，來幫助人們使用JavaScript數(shù)據(jù)（例如從服務(wù)器返回的數(shù)據(jù)）來更新Web頁面。有需要的小伙伴可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單購物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript簡單實(shí)現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了Bootstrap中data-target 到底是什么的相關(guān)資料，我目前理解到在bootstrap中data-target，data-toggle等屬性主要有兩種作用，具體哪兩種作用，大家通過本文詳細(xì)了解下2017-02-02
Javascript實(shí)現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁漂浮廣告代碼
帶有關(guān)閉功能的漂浮圖片的實(shí)現(xiàn)方法有很多，下面為大家介紹下使用Javascript是如何實(shí)現(xiàn)的，喜歡的額朋友可以了解下2014-01-01
JS利用window.print()實(shí)現(xiàn)網(wǎng)頁打印功能
print作為瀏覽已經(jīng)比較成熟的技術(shù)可以經(jīng)常被用來打印頁面的部分內(nèi)容。本文將在JS中調(diào)用window.print()方法實(shí)現(xiàn)網(wǎng)頁打印功能，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了js選項(xiàng)卡的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
利用Axios實(shí)現(xiàn)無感知雙Token刷新的詳細(xì)教程
在現(xiàn)代系統(tǒng)中,Token認(rèn)證已成為保障用戶安全的標(biāo)準(zhǔn)做法,然而,盡管許多系統(tǒng)采用了這種認(rèn)證方式,卻在處理Token刷新方面存在不足,導(dǎo)致用戶體驗(yàn)不佳,許多系統(tǒng)未能提供一種無縫的、用戶無感知的Token刷新機(jī)制,所以本文介紹了教你用Axios實(shí)現(xiàn)無感知雙Token刷新2024-08-08