BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)

2019-11-20 08:39:40

字體：大中小

供稿：網(wǎng)友

前言

bootstrap的表格樣式，有類似EasyUI的表格，也有卡片式表格，放到移動(dòng)端顯示，各有千秋。但是BootStrap自帶的表格是沒(méi)有操作列的，網(wǎng)上的資源不少，但是都是比較單一、零碎，JS、CSS也經(jīng)常給的不全，自己經(jīng)過(guò)大概一個(gè)月左右的時(shí)間，把表格封裝了一下,希望能分享給大家。

表格封裝了3個(gè)版本，接下來(lái)給大家展示一下樣式和代碼。

版本一

1. 樣式

表格布局：

添加：添加一行新的空白代碼

修改：選中可修改的列，點(diǎn)擊需要修改的單元格，即可變成可編輯的狀態(tài)。

2.代碼

@using%20DatatableDemo.Models%20@using%20ITOO.FreshNewReport.ViewModel%20@{%20Layout%20=%20"~/Views/Shared/_Layout.cshtml";%20}%20<!DOCTYPE%20html>%20<html>%20<head>%20<title>Bootstrap%20實(shí)例%20-%20表格</title>%20<link%20href="../../BootStrap/StuPersonInfo/bootstrap.min.css"%20rel="stylesheet"%20/>%20<script%20src="../../BootStrap/StuPersonInfo/bootstrap.min.js"></script>%20<script%20src="../../BootStrap/StuPersonInfo/jquery.min.js"></script>%20@*表格JS*@%20<link%20href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css"%20rel="stylesheet"%20/>%20<meta%20name="viewport"%20content="width=device-wdith,initia-scale=1.0">%20@*動(dòng)態(tài)添加表格*@%20<meta%20charset="utf-8">%20<meta%20name="viewport"%20content="width=device-width,%20initial-scale=1.0">%20<link%20href="../../BootStrap/datagrid/css/bootstrap-table.min.css"%20rel="stylesheet"%20/>%20<link%20href="../../BootStrap/datagrid/css/bootstrap.min.css"%20rel="stylesheet"%20/>%20<script%20src="../../BootStrap/datagrid/js/jquery.min.js"></script>%20<script%20src="../../BootStrap/datagrid/js/jquery.base64.js"></script>%20<script%20src="../../BootStrap/datagrid/js/bootstrap-table.js"></script>%20<script%20src="../../BootStrap/datagrid/js/bootstrap-table-export.js"></script>%20@*添加批量刪除*@%20<meta%20charset="utf-8">%20<script%20type="text/javascript"%20src="../../BootStrap/datagrid/js/jquery.min.js"></script>%20<script%20type="text/javascript">%20$(document).ready(function%20()%20{%20$("#btnDel").click(function%20()%20{%20$(":checked").parent().parent().fadeOut("show");%20//隱藏所有被選中的input元素%20//parent()%20獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素,%20})%20$("tr").mousemove(function%20()%20{%20$(this).css("background",%20"#F0F0F0");%20//鼠標(biāo)經(jīng)過(guò)背景顏色變?yōu)榛疑?20})%20$("tr").mouseout(function%20()%20{%20$(this).css("background",%20"#fff");%20//離開(kāi)后背景顏色回復(fù)白色%20})%20//全選%20$("#checkAll").click(function%20()%20{%20if%20($("#checkAll").attr("checked")%20==%20false)%20{%20$("input[name='checkbox']").each(function%20()%20{%20$(this).attr("checked",%20true);%20});%20}%20else%20{%20$("input[name='checkbox']").each(function%20()%20{%20$(this).attr("checked",%20false);%20});%20}%20});%20});%20</script>%20@*添加一行新表格數(shù)據(jù)*@%20<script>%20function%20append()%20{%20var%20strAppend%20=%20'<tr%20style="background:%20rgb(255,%20255,%20255)%20none%20repeat%20scroll%200%%200%;"><td%20><input%20type="checkbox"%20value=""%20editable="false"%20name="checkbox"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><tr>';%20$("#AddFamily%20tbody%20").append(strAppend).editableTableWidget();%20}%20</script>%20@*表格樣式CSS*@%20<style>%20table%20{%20border-collapse:%20collapse;%20border:%201px%20solid%20#FFFFFF;%20}%20table%20td%20{%20text-align:%20center;%20height:%2030px;%20font-size:%2012px;%20line-height:%2030px;%20border:%201px%20solid%20#efecec;%20}%20</style>%20@*添加批量刪除*@%20<script%20src="../../JS/TableJs.js"></script>%20</head>%20<body>%20<script%20src="../../BootStrap/FamilyJS.js"></script>%20@*按鈕*@%20<div%20class="heading">%20@*添加按鈕*@%20<button%20id="build"%20type="button"%20class="btn%20btn-success"%20data-toggle="modal"%20data-target=""%20onclick="append()">%20<span%20class="glyphicon%20glyphicon-plus"%20aria-hidden="true"></span>添加%20</button>%20@*修改按鈕*@%20<button%20id="btnEdit"%20type="button"%20class="btn%20btn-warning">%20<span%20class="glyphicon%20glyphicon-edit"%20aria-hidden="true"></span>修改%20</button>%20@*刪除按鈕---無(wú)彈出框*@%20<button%20id="btnDel"%20type="button"%20class="btn%20btn-danger"%20data-toggle="modal"%20data-target="#DeleteForm"%20onclick="">%20<span%20class="glyphicon%20glyphicon-minus"%20aria-hidden="true"></span>刪除%20</button>%20</div>%20@*表格*@%20<div%20class="widget-content%20padded%20clearfix">%20<table%20id="AddFamily"%20class="table%20table-bordered%20table-striped"%20width="1000px"%20border="0"%20cellspacing="0"%20cellpadding="0"%20style="margin:%200%20auto">%20<thead>%20<th%20class="check-header%20hidden-xs">%20<input%20id="checkAll"%20name="checkAll"%20type="checkbox">%20<th>姓名</th>%20<th>稱謂%20</th>%20<th>年齡%20</th>%20<th>政治面貌</th>%20<th>電話號(hào)碼%20</th>%20<th>工作單位</th>%20<th>家庭住址</th>%20</thead>%20<tbody%20id="mainbody">%20@*從數(shù)據(jù)庫(kù)讀取的數(shù)據(jù)，遍歷ViewModel里面的字段并賦值*@%20@foreach%20(FamilyInfoViewModel%20enStuFam%20in%20ViewData["DataList"]%20as%20List<FamilyInfoViewModel>)%20{%20<tr>%20<td>%20<input%20name="checkbox"%20type="checkbox"%20id="1">%20</td>%20<td%20data-field="Name">@enStuFam.Name%20</td>%20<td%20data-field="RelationShip">@enStuFam.RelationShip</td>%20<td%20data-field="Age">@enStuFam.Age</td>%20<td>@enStuFam.PoliticalStatus</td>%20<td>@enStuFam.TelNum%20</td>%20<td>@enStuFam.WorkUnit</td>%20<td>@enStuFam.Address%20</td>%20</tr>%20}%20</tbody>%20</table>%20</div>%20<link%20href="../../BootStrap/jquery.bdt.css"%20rel="stylesheet"%20/>%20@*創(chuàng)建表格*@%20<script>%20//綁定編輯、回車事件%20$(function%20()%20{%20//%20$('#build').click(build);//實(shí)現(xiàn)創(chuàng)建表格%20$('#btnEdit').click(edit);%20$('#cells,%20#rows').keyup(function%20(e)%20{%20if%20(e.keyCode%20===%2013)%20{%20//添加存入數(shù)據(jù)庫(kù)的代碼%20}%20});%20});%20//將表格轉(zhuǎn)成可編輯的表格%20function%20edit(index)%20{%20//%20$('#table').editableTableWidget();--效果是單擊編輯按鈕后，所有的都可以編輯%20//%20$(":checked").editableTableWidget();%20$(":checked").parent().parent().editableTableWidget();//整行的可以編輯%20}%20//轉(zhuǎn)成可編輯的表格%20/*global%20$,%20window*/%20$.fn.editableTableWidget%20=%20function%20(options)%20{%20'use%20strict';%20return%20$(this).each(function%20()%20{%20var%20buildDefaultOptions%20=%20function%20()%20{%20var%20opts%20=%20$.extend({},%20$.fn.editableTableWidget.defaultOptions);%20opts.editor%20=%20opts.editor.clone();%20return%20opts;%20},%20activeOptions%20=%20$.extend(buildDefaultOptions(),%20options),%20ARROW_LEFT%20=%2037,%20ARROW_UP%20=%2038,%20ARROW_RIGHT%20=%2039,%20ARROW_DOWN%20=%2040,%20ENTER%20=%2013,%20ESC%20=%2027,%20TAB%20=%209,%20element%20=%20$(this),%20editor%20=%20activeOptions.editor.css('position',%20'absolute').hide().appendTo(element.parent()),%20active,%20showEditor%20=%20function%20(select)%20{%20active%20=%20element.find('td:focus');%20if%20(active.length)%20{%20editor.val(active.text())%20.removeClass('error')%20.show()%20.offset(active.offset())%20.css(active.css(activeOptions.cloneProperties))%20.width(active.width())%20.height(active.height())%20.focus();%20if%20(select)%20{%20editor.select();%20}%20}%20},%20setActiveText%20=%20function%20()%20{%20var%20text%20=%20editor.val(),%20evt%20=%20$.Event('change'),%20originalContent;%20if%20(active.text()%20===%20text%20||%20editor.hasClass('error'))%20{%20return%20true;%20}%20originalContent%20=%20active.html();%20active.text(text).trigger(evt,%20text);%20if%20(evt.result%20===%20false)%20{%20active.html(originalContent);%20}%20},%20movement%20=%20function%20(element,%20keycode)%20{%20if%20(keycode%20===%20ARROW_RIGHT)%20{%20return%20element.next('td');%20}%20else%20if%20(keycode%20===%20ARROW_LEFT)%20{%20return%20element.prev('td');%20}%20else%20if%20(keycode%20===%20ARROW_UP)%20{%20return%20element.parent().prev().children().eq(element.index());%20}%20else%20if%20(keycode%20===%20ARROW_DOWN)%20{%20return%20element.parent().next().children().eq(element.index());%20}%20return%20[];%20};%20editor.blur(function%20()%20{%20setActiveText();%20editor.hide();%20}).keydown(function%20(e)%20{%20if%20(e.which%20===%20ENTER)%20{%20setActiveText();%20editor.hide();%20active.focus();%20e.preventDefault();%20e.stopPropagation();%20}%20else%20if%20(e.which%20===%20ESC)%20{%20editor.val(active.text());%20e.preventDefault();%20e.stopPropagation();%20editor.hide();%20active.focus();%20}%20else%20if%20(e.which%20===%20TAB)%20{%20active.focus();%20}%20else%20if%20(this.selectionEnd%20-%20this.selectionStart%20===%20this.value.length)%20{%20var%20possibleMove%20=%20movement(active,%20e.which);%20if%20(possibleMove.length%20>%200)%20{%20possibleMove.focus();%20e.preventDefault();%20e.stopPropagation();%20}%20}%20})%20.on('input%20paste',%20function%20()%20{%20var%20evt%20=%20$.Event('validate');%20active.trigger(evt,%20editor.val());%20if%20(evt.result%20===%20false)%20{%20editor.addClass('error');%20}%20else%20{%20editor.removeClass('error');%20}%20});%20element.on('click%20keypress%20dblclick',%20showEditor)%20.css('cursor',%20'pointer')%20.keydown(function%20(e)%20{%20var%20prevent%20=%20true,%20possibleMove%20=%20movement($(e.target),%20e.which);%20if%20(possibleMove.length%20>%200)%20{%20possibleMove.focus();%20}%20else%20if%20(e.which%20===%20ENTER)%20{%20showEditor(false);%20}%20else%20if%20(e.which%20===%2017%20||%20e.which%20===%2091%20||%20e.which%20===%2093)%20{%20showEditor(true);%20prevent%20=%20false;%20}%20else%20{%20prevent%20=%20false;%20}%20if%20(prevent)%20{%20e.stopPropagation();%20e.preventDefault();%20}%20});%20element.find('td').prop('tabindex',%201);%20$(window).on('resize',%20function%20()%20{%20if%20(editor.is(':visible'))%20{%20editor.offset(active.offset())%20.width(active.width())%20.height(active.height());%20}%20});%20});%20};%20$.fn.editableTableWidget.defaultOptions%20=%20{%20cloneProperties:%20['padding',%20'padding-top',%20'padding-bottom',%20'padding-left',%20'padding-right',%20'text-align',%20'font',%20'font-size',%20'font-family',%20'font-weight',%20'border',%20'border-top',%20'border-bottom',%20'border-left',%20'border-right'],%20editor:%20$('<input>')%20};%20</script>%20</body>%20</html>

版本二

1.%20樣式

布局樣式：

添加/修改：

2.%20代碼

@using%20ITOO.FreshNewReport.ViewModel%20@{%20Layout%20=%20null;%20}%20<html>%20<head>%20<title>數(shù)據(jù)表格編輯_大氣漂亮的Bootstrap后臺(tái)管理系統(tǒng)模板Se7en%20-%20JS代碼網(wǎng)%20</title>%20<!--<link%20 />

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">開(kāi)始日期</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(); //從緩存中獲取身份證號(hào) 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詳解)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！

上一篇：BootStrap modal模態(tài)彈窗使用小結(jié)

下一篇：BootStrap tooltip提示框使用小結(jié)