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

前言

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

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

版本一

1. 样式

表格布局：

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

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

2.代码

@using DatatableDemo.Models 
@using ITOO.FreshNewReport.ViewModel 
@{ 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
 
 
 
 
 
 
 
@*表格JS*@ 
 
 
@*动态添加表格*@ 
 
 
 
 
 
 
 
 
@*添加批量删除*@ 
 
 
 
@*添加一行新表格数据*@ 
 
@*表格样式CSS*@ 
 
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; 
} 
 
@*添加批量删除*@ 
 
 
 
 
@*按钮*@ 
 
@*添加按钮*@ 
 
添加 
 
@*修改按钮*@ 
 
修改 
 
@*删除按钮---无弹出框*@ 
 
删除 
 
 
@*表格*@ 
 
 
@*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@ 
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List) 
{ 
 
} 
 
 
 
 
姓名
 
称谓 
 
年龄 
 
政治面貌
 
电话号码 
 
工作单位
 
家庭住址
 
 
 
 
 
 
@enStuFam.Name 
 
@enStuFam.RelationShip
 
@enStuFam.Age
 
@enStuFam.PoliticalStatus
 
@enStuFam.TelNum 
 
@enStuFam.WorkUnit
 
@enStuFam.Address 
 
 
 
 
 
@*创建表格*@ 
 
 

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

@using ITOO.FreshNewReport.ViewModel 
@{ 
Layout = null; 
} 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Editable DataTables 
 
 
 
 
 
 
 
DataTable with SortingAdd row 
 
 
 
@* 
@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List) 
{ 
 
@**@ 
 
} 
 
 
*@ 
姓名
 
称谓 
 
年龄 
 
政治面貌
 
电话号码 
 
工作单位
 
家庭住址
 
 
 
 
 
 
@enStuFam.Name 
 
@enStuFam.RelationShip
 
@enStuFam.Age
 
@enStuFam.PoliticalStatus
 
@enStuFam.TelNum 
 
@enStuFam.WorkUnit
 
@enStuFam.Address 
 
 
Edit 
 
 
Delete 
 
 
 
 
 
 
 
 
 
 
 

版本三

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详解)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！