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

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

前言

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

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

版本一

1. 样式

表格布局：

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

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

2.代码

@using DatatableDemo.Models

@using ITOO.FreshNewReport.ViewModel

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

@*表格JS*@

@*动态添加表格*@

@*添加批量删除*@

@*添加一行新表格数据*@

@*表格样式CSS*@

@*添加批量删除*@

@*按钮*@

@*添加按钮*@

添加

@*修改按钮*@

修改

@*删除按钮---无弹出框*@

删除

@*表格*@

姓名

称谓

年龄

政治面貌

电话号码

工作单位

家庭住址

@*从数据库读取的数据，遍历ViewModel里面的字段并赋值*@

@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)

{

}

@*创建表格*@

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

@using ITOO.FreshNewReport.ViewModel

@{

Layout = null;

}

DataTable with SortingAdd row

@*

*@

姓名

称谓

年龄

政治面貌

电话号码

工作单位

家庭住址

@*

*@

@foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List)

{

@*

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。