前言
bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
表格封装了3个版本，接下来给大家展示一下样式和代码。
版本一
1. 样式
表格布局：
修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。
2.代码
viewmodel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Bootstrap 实例 - 表格
@*表格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*@
@*添加批量删除*@
@*按钮*@
@*表格*@
Box">
姓名
称谓
年龄
政治面貌
电话号码
工作单位
家庭住址
数据库读取的数据，遍历viewmodel里面的字段并赋值*@
@foreach (FamilyInfoviewmodel enStuFam in ViewData["DataList"] as List)
{
Box" type="checkBox" id="1">
@*创建表格*@
版本二
1. 样式
布局样式：
2. 代码
viewmodel
@{
Layout = null;
}
数据表格编辑_大气漂亮的Bootstrap<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>管理系统模板Se7en - JS<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>网
<Meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
Editable DataTables
DataTable with SortingAdd row
@*Box">*@
姓名
称谓
年龄
政治面貌
电话号码
工作单位
@foreach (FamilyInfoviewmodel enStuFam in ViewData["DataList"] as List)
{
Box" type="checkBox" id="1">
版本三
1.样式
卡片式表格：
2.代码
View代码：
| @* | *@
Controller代码： 显示教育经历 王美 2015年6月5日
///
以上所述是小编给大家介绍的BootStrap实现带有增删改查功能的表格(DEMO详解)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 原文链接：https://www.f2er.com/bootstrap/44875.html猜你在找的Bootstrap相关文章 |
|---|