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

前言

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

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

版本一

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">结束日期</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详解),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对来客网网站的支持!