BootStrap实现带有增删改查功能的表格(DEMO详解)

2019-11-20 08:39:40

字体：大中小

来源：转载

供稿：网友

前言

bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。

表格封装了3个版本，接下来给大家展示一下样式和代码。

版本一

1. 样式

表格布局：

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

修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。

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实例%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@*动态添加表格*@%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获得当前匹配元素集合中每个元素的父元素,%20})%20$("tr").mousemove(function%20()%20{%20$(this).css("background",%20"#F0F0F0");%20//鼠标经过背景颜色变为灰色%20})%20$("tr").mouseout(function%20()%20{%20$(this).css("background",%20"#fff");%20//离开后背景颜色回复白色%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@*添加一行新表格数据*@%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@*删除按钮---无弹出框*@%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>电话号码%20</th>%20<th>工作单位</th>%20<th>家庭住址</th>%20</thead>%20<tbody%20id="mainbody">%20@*从数据库读取的数据，遍历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@*创建表格*@%20<script>%20//绑定编辑、回车事件%20$(function%20()%20{%20//%20$('#build').click(build);//实现创建表格%20$('#btnEdit').click(edit);%20$('#cells,%20#rows').keyup(function%20(e)%20{%20if%20(e.keyCode%20===%2013)%20{%20//添加存入数据库的代码%20}%20});%20});%20//将表格转成可编辑的表格%20function%20edit(index)%20{%20//%20$('#table').editableTableWidget();--效果是单击编辑按钮后，所有的都可以编辑%20//%20$(":checked").editableTableWidget();%20$(":checked").parent().parent().editableTableWidget();//整行的可以编辑%20}%20//转成可编辑的表格%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>数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en%20-%20JS代码网%20</title>%20%20<link%20href="../../BootStrap/se7ven/../../BootStrap/se7ven/stylesheets/bootstrap.min.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/font-awesome.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/se7en-font.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/isotope.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/jquery.fancybox.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/fullcalendar.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/wizard.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/select2.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/morris.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/datatables.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/datepicker.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/timepicker.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/colorpicker.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/bootstrap-switch.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/daterange-picker.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/typeahead.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/summernote.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/pygments.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/style.css"%20media="all"%20rel="stylesheet"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/color/green.css"%20media="all"%20rel="alternate%20stylesheet"%20title="green-theme"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/color/orange.css"%20media="all"%20rel="alternate%20stylesheet"%20title="orange-theme"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/color/magenta.css"%20media="all"%20rel="alternate%20stylesheet"%20title="magenta-theme"%20type="text/css"%20/>%20<link%20href="../../BootStrap/se7ven/stylesheets/color/gray.css"%20media="all"%20rel="alternate%20stylesheet"%20title="gray-theme"%20type="text/css"%20/>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery-ui.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/raphael.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/selectivizr-min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.mousewheel.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.vmap.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.vmap.sampledata.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.vmap.world.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.bootstrap.wizard.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/fullcalendar.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/gcal.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.dataTables.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/datatable-editable.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.easy-pie-chart.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/excanvas.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.isotope.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/isotope_extras.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/modernizr.custom.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.fancybox.pack.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/select2.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/styleswitcher.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/wysiwyg.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/summernote.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.inputmask.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.validate.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap-fileupload.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap-datepicker.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap-timepicker.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap-colorpicker.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/bootstrap-switch.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/typeahead.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/daterange-picker.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/date.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/morris.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/skycons.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/fitvids.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/jquery.sparkline.min.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/main.js"%20type="text/javascript"></script>%20<script%20src="../../BootStrap/se7ven/javascripts/respond.js"%20type="text/javascript"></script>%20<meta%20content="width=device-width,%20initial-scale=1.0,%20maximum-scale=1.0,%20user-scalable=no"%20name="viewport">%20</head>%20<body>%20<div%20class="modal-shiftfix">%20<div%20class="container-fluid%20main-content">%20<div%20class="page-title">%20<h1>Editable%20DataTables%20</h1>%20</div>%20%20<div%20class="row">%20<div%20class="col-lg-12">%20<div%20class="widget-container%20fluid-height%20clearfix">%20<div%20class="heading">%20<i%20class="icon-table"></i>DataTable%20with%20Sorting<a%20class="btn%20btn-sm%20btn-primary-outline%20pull-right"%20href="#"%20id="add-row"><i%20class="icon-plus"></i>Add%20row</a>%20</div>%20<div%20class="widget-content%20padded%20clearfix">%20<table%20class="table%20table-bordered%20table-striped"%20id="datatable-editable">%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>电话号码%20</th>%20<th>工作单位</th>%20<th%20class="hidden-xs">家庭住址</th>%20<th%20width="60"></th>%20<th%20width="75"></th>%20</thead>%20<tbody>%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>@enStuFam.Name%20</td>%20<td>@enStuFam.RelationShip</td>%20<td>@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<td>%20<a%20class="edit-row"%20href="#">Edit</a>%20</td>%20<td>%20<a%20class="delete-row"%20href="#">Delete</a>%20</td>%20</tr>%20}%20</tbody>%20</table>%20</div>%20</div>%20</div>%20</div>%20%20</div>%20</div>%20</body>%20</html>

版本三

1.样式

卡片式表格：

添加/修改%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">开始日期</th> <th data-field="EndDate" data-sortable="true">结束日期</th> <th data-field="SchoolName" data-sortable="true">毕业学校</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() 显示教育经历 王美 2015年6月5日 /// <summary> /// 显示教育经历 /// </summary> /// <returns>教育经历Json</returns> public JsonResult ShowEducation() { //创建WCF接口 IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService(); //从缓存中获取身份证号 string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID"); //调用WCF查询方法 List<EduExperienceViewModel> listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID); //返回Json串 return Json(listEduInfo, JsonRequestBehavior.AllowGet); } #endregion

以上所述是小编给大家介绍的BootStrap实现带有增删改查功能的表格(DEMO详解)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！