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

前言

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

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

版本一

1. 样式

表格布局：

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

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

2.代码

rush:js;"> @using DatatableDemo.Models @using ITOO.FreshNewReport.viewmodel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @*表格JS*@ <Meta name="viewport" content="width=device-wdith,initia-scale=1.0"> @*动态添加表格*@ <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> @*添加批量删除*@ <Meta charset="utf-8"> @*添加一行新表格数据*@ @*表格样式CSS*@ @*添加批量删除*@ @*按钮*@

heading"> @*添加按钮*@ 添加 @*修改按钮*@ 修改 @*删除按钮---无弹出框*@ 删除

@*表格*@

Box"> 姓名 称谓 年龄 政治面貌 电话号码 工作单位 家庭住址 数据库读取的数据，遍历viewmodel里面的字段并赋值*@ @foreach (FamilyInfoviewmodel enStuFam in ViewData["DataList"] as List) { Box" type="checkBox" id="1"> @*创建表格*@

版本二

1. 样式

布局样式：

添加/修改：

2. 代码

rush:js;"> @using ITOO.FreshNewReport.viewmodel @{ Layout = null; }