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

这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧

前言

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

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

版本一

1. 样式

表格布局：

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

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

2.代码

 @using DatatableDemo.Models @using ITOO.FreshNewReport.ViewModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; }   Bootstrap 实例 - 表格 @*表格JS*@  @*动态添加表格*@  @*添加批量删除*@  @*添加一行新表格数据*@  @*表格样式CSS*@  @*添加批量删除*@   @*按钮*@  @*添加按钮*@  @*修改按钮*@  @*删除按钮---无弹出框*@ 
 @*表格*@  @*创建表格*@

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

 @using ITOO.FreshNewReport.ViewModel @{ Layout = null; }   数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网     Editable DataTables

版本三

1.样式

卡片式表格：

添加/修改弹出一个新页面：

2.代码

View代码：

     @*按钮*@  @*添加按钮*@  添加 @*修改*@  修改 @*删除*@ @*  删除*@  
 @* *@    开始日期 结束日期 毕业学校 证明教师 编 辑

Controller代码：

 #region ShowEducation() 显示教育经历 王美 2015年6月5日 ///  /// 显示教育经历 /// 
 /// 教育经历Json public JsonResult ShowEducation() { //创建WCF接口 IEduInfoService EduServiceShow = ServiceFactory.GetEduInfoService(); //从缓存中获取身份证号 string IdentityCardID = (String)MemcacheHelper.Get("IdentityCardID"); //调用WCF查询方法 List listEduInfo = EduServiceShow.QueryEduInfo(IdentityCardID); //返回Json串 return Json(listEduInfo, JsonRequestBehavior.AllowGet); } #endregion

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

以上就是BootStrap实现带有增删改查功能的表格(DEMO详解)的详细内容，更多请关注0133技术站其它相关文章！