前言
bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋。但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一、零碎,JS、CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家。
表格封装了3个版本,接下来给大家展示一下样式和代码。
版本一
1. 样式
表格布局:
修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态。
2.代码
rush:js;">
@using DatatableDemo.Models
@using ITOO.FreshNewReport.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. 代码
rush:js;">
@using ITOO.FreshNewReport.viewmodel
@{
Layout = null;
}
数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。