使用Bootstrap 基于MVC输出移动化table 列表
基于Bootrap的列表组及栅格布局来实现
模型定义
public class StreetEvent
{
public int Id { get; set; }
public string StreetName { get; set; }
public int LACnt { get; set; } public int JACnt { get; set; } public int SLCnt { get; set; } public int PQCnt { get; set; }
}
测试Controller方法
public ActionResult TableView2([Form]Para para)
{
List<StreetEvent> list = new List<StreetEvent>();
for (int i = ; i < ; i++)
{
list.Add(new StreetEvent
{
Id = i,
StreetName = "街道" + i.ToString(),
LACnt = + i * ,
SLCnt = + i * ,
JACnt = + i * ,
PQCnt = + i *
});
}
return View(list);
}
输出视图
@model IEnumerable<MvcWeb01.Models.StreetEvent>
@{
ViewBag.Title = "TableView2";
}
<div class="container">
<div class="row">
<div class="col-xs-12 text-center"><h3>案件统计报表</h3></div>
</div>
</div>
@foreach (MvcWeb01.Models.StreetEvent item in Model)
{
<div class="list-group">
<a href="#" class="list-group-item">
<div class="container">
<div class="row">
<div class="col-xs-6 text-left">街道</div>
<div class="col-xs-6 text-right">@item.StreetName</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="container">
<div class="row">
<div class="col-xs-6 text-left">立案数</div>
<div class="col-xs-6 text-right">@item.LACnt</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="container">
<div class="row">
<div class="col-xs-6 text-left">结案数</div>
<div class="col-xs-6 text-right">@item.JACnt</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="container">
<div class="row">
<div class="col-xs-6 text-left">受理数</div>
<div class="col-xs-6 text-right">@item.SLCnt</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="container">
<div class="row">
<div class="col-xs-6 text-left">派遣数</div>
<div class="col-xs-6 text-right">@item.PQCnt</div>
</div>
</div>
</a>
</div>
}
输出效果：
响应式Table：https://dbushell.com/demos/tables/rt_05-01-12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Tables</title> <style> .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; }
*:first-child+html .cf { zoom: 1; } body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; } code { padding: 0 .5em; background: #fff2b2; } body { padding: 1.25em; font-family: 'Helvetica Neue', Arial, sans-serif; background: #eee; } h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h1, h2 { margin: .5em 0; font-weight: bold; } .rt { width: 100%; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; } .rt th,
.rt td { margin: 0; padding: 0.4166em;/*10*/ vertical-align: top; border: 1px solid #babcbf; background: #fff; }
.rt th { text-align: left; background: #fff2b2; } @media only screen and (max-width: 40em) { /*640*/ #rt1 { display: block; position: relative; width: 100%; }
#rt1 thead { display: block; float: left; }
#rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
#rt1 thead tr { display: block; }
#rt1 th { display: block; }
#rt1 tbody tr { display: inline-block; vertical-align: top; }
#rt1 td { display: block; min-height: 1.25em; } #rt2 { display: block; position: relative; width: 100%; }
#rt2 thead { display: block; float: left; }
#rt2 tbody { display: -webkit-box; overflow-x: auto; }
#rt2 th,
#rt2 tr,
#rt2 td { display: block; } /* sort out borders */ .rt th { border-bottom: 0; }
.rt td { border-left: 0; border-right: 0; border-bottom: 0; }
.rt tbody tr { border-right: 1px solid #babcbf; }
.rt th:last-child,
.rt td:last-child { border-bottom: 1px solid #babcbf; } } </style> </head>
<body> <h1>Responsive Tables (2)</h1> <p><strong>Introduction:</strong> <a href="http://dbushell.com/2012/01/05/responsive-tables-2">Responsive Tables</a> — 5th January, 2012.</p> <p>The following tables change orientation on small screens. A horizontal scroll or swipe is used to view more data. The table head is always visible.</p> <table id="rt1" class="rt cf">
<thead class="cf">
<tr>
<th>Selector</th>
<th>IE7</th>
<th>IE8</th>
<th>IE9</th>
<th>FF 3.6</th>
<th>FF 4</th>
<th>Safari 5</th>
<th>Chrome 5</th>
<th>Opera 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>* selector</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr><tr>
<td>:before :after</td>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr><tr>
<td>:nth-of-type()</td>
<td>no</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>incorrect</td>
</tr><tr>
<td>background-clip</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>no</td>
<td>yes</td>
<td>-webkit-</td>
<td>-webkit-</td>
<td>buggy</td>
</tr><tr>
<td>background-repeat</td>
<td>incomplete</td>
<td>incomplete</td>
<td>yes</td>
<td>incomplete</td>
<td>incomplete</td>
<td>incorrect</td>
<td>incorrect</td>
<td>yes</td>
</tr><tr>
<td>::selection</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>-moz-</td>
<td>-moz-</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table> <p>The trick is to use <code>display: inline-block;</code> on the table rows and <code>white-space: nowrap;</code> on the table body.</p> <br>
<h2>CSS3 Flexible Box model</h2>
<p>This table replicates the same layout using <code>display: -webkit-box;</code></p> <table id="rt2" class="rt cf">
<thead class="cf">
<tr>
<th>Selector</th>
<th>IE7</th>
<th>IE8</th>
<th>IE9</th>
<th>FF 3.6</th>
<th>FF 4</th>
<th>Safari 5</th>
<th>Chrome 5</th>
<th>Opera 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>* selector</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr><tr>
<td>:before :after</td>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr><tr>
<td>:nth-of-type()</td>
<td>no</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>incorrect</td>
</tr><tr>
<td>background-clip</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>no</td>
<td>yes</td>
<td>-webkit-</td>
<td>-webkit-</td>
<td>buggy</td>
</tr><tr>
<td>background-repeat</td>
<td>incomplete</td>
<td>incomplete</td>
<td>yes</td>
<td>incomplete</td>
<td>incomplete</td>
<td>incorrect</td>
<td>incorrect</td>
<td>yes</td>
</tr><tr>
<td>::selection</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>-moz-</td>
<td>-moz-</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table> <br> <p>This concept needs further work to achieve cross-browser support but I think it has potential!</p> <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9497100-1']);
_gaq.push(['_setDomainName', 'dbushell.com']);
_gaq.push(['_trackPageview']); (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> </body>
</html>
使用Bootstrap 基于MVC输出移动化table 列表的更多相关文章
- 【JAVA】基于MVC架构Java技术荟萃案例演练
基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...
- 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...
- Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)
对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...
- iOS基于MVC的项目重构总结
关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说,MVC本身是没有问题的,你认为的MVC的问题,一定是你自己理解的问题(资深架构师请自动忽略本文). 行 ...
- ASP.NET MVC 4 插件化架构简单实现-思路篇
用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...
- 转：iOS基于MVC的项目重构总结
转:http://www.cocoachina.com/ios/20160519/16346.html 关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说 ...
- MVC 4 插件化架构简单实现
转ASP.NET MVC 4 插件化架构简单实现-思路篇 用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...
- MVC页面静态化
MVC 页面静态化 最近工作需要,实现页面静态化,以前在ASP时代,都是FSO自己手动生成的. 新时代,MVC了,当然也要新技术,网上一搜,找到一种解决方案,是基于MVC3的,实现原理是通过mvc ...
- [置顶]
MVC输出缓存(OutputCache参数详解）
1.学习之前你应该知道这些 几乎每个项目都会用到缓存,这是必然的.以前在学校时做的网站基本上的一个标准就是1.搞定增删改查2.页面做的不要太差3.能运行(ps真的有这种情况,答辩验收的时候几个人在讲台 ...
随机推荐
- 数学的语言 化无形为可见 (Keith Devlin 著)
第一章 数字为何靠的住 (已看) 第二章 心智的模式 (已看) 第三章 动静有数 (已看) 第四章 当数学成型 (已看) 第五章 数学揭开美之本质 (已看) 第六章 当数学到位 (已看) 第七章 数学 ...
- 设置 sideload Outlook Add-ins
上期,我们讲到了用前端技术去建立一个outlook add-ins 我们今天来讲解一下怎样测试一个sideload outlook add-ins. 1. 我们需要登录Outlook在Office 3 ...
- 为什么 PCB 生产时推荐出 Gerber 给工厂？
为什么 PCB 生产时推荐出 Gerber 给工厂? 事情是这样的,有一天电工王工,画了一块 PCB,发给 PCB 板厂. 过了几天 PCB 回来了,一看不对呀,这里的丝印怎么少了,那里怎么多了几条线 ...
- 22 初始模块 random time collections functools
一 .初始模块 1.从⼩到⼤的顺序: ⼀条代码 < 语句块 < 代码块(函数, 类) < 模块 2.引入模块的方式 ① import 模块 ② from 模块 im ...
- 艰苦的编译boost python (失败）
1.下载 boost_1_67_0 2.在目录下执行 bootstrap 3.将python36添加到path环境变量 4.执行 b2 --with-python,将会声场如下dll 2018/04/ ...
- MongoDB从3.0.6升级到MongoDB3.4.9
最初进入公司的时候,有些爬虫数据需要存储在mongo数据库里面,当时看到最新的数据库版本是3.0.6,现在公司开展了新的项目需要使用到Mongo,使用到了Mongo的一些表关联查询的方法,但是只有在最 ...
- JAVA_HOME 设置为JDK 7无效
场景: Window 10中有Jdk 7和jdk8, 还有Oracle配置 环境变量的配置如下 然后JAVA_HOME 设置为java 7 但是java -version显示为java 8 解决方法 ...
- spark-streaming-kafka-0-8 和 0-10的使用区别
一.spark-streaming-kafka-0-8_2.11-2.0.2.jar 1.pom.xml <!-- https://mvnrepository.com/artifact/org. ...
- openwrt挂载摄像头及视频保存
一.编译选项的选择: -> Utilities ->usbutils (这个里面包含lsusb的命令,是查看你的摄像头型号的) -> Kernel modules -> I2C ...
- Django--ORM--模型增删改查--备忘
以上运算符都区分大小写,在这些运算符前加上i表示不区分大小写,如iexact.icontains.istartswith.iendswith.insert into tb_bookinfo()valu ...