基于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 列表的更多相关文章

  1. 【JAVA】基于MVC架构Java技术荟萃案例演练

    基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

  2. 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  3. Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)

    对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...

  4. iOS基于MVC的项目重构总结

    关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说,MVC本身是没有问题的,你认为的MVC的问题,一定是你自己理解的问题(资深架构师请自动忽略本文). 行 ...

  5. ASP.NET MVC 4 插件化架构简单实现-思路篇

    用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...

  6. 转:iOS基于MVC的项目重构总结

    转:http://www.cocoachina.com/ios/20160519/16346.html 关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说 ...

  7. MVC 4 插件化架构简单实现

    转ASP.NET MVC 4 插件化架构简单实现-思路篇   用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...

  8. MVC页面静态化

    MVC 页面静态化   最近工作需要,实现页面静态化,以前在ASP时代,都是FSO自己手动生成的. 新时代,MVC了,当然也要新技术,网上一搜,找到一种解决方案,是基于MVC3的,实现原理是通过mvc ...

  9. [置顶] MVC输出缓存(OutputCache参数详解)

    1.学习之前你应该知道这些 几乎每个项目都会用到缓存,这是必然的.以前在学校时做的网站基本上的一个标准就是1.搞定增删改查2.页面做的不要太差3.能运行(ps真的有这种情况,答辩验收的时候几个人在讲台 ...

随机推荐

  1. tile38 复制配置

    基于复制我们可以保证tile38 server 的ha 环境准备 docker-compose 文件 说明里面多了一个webhook 的服务,可以不用管   version: "3" ...

  2. replicatedhq-ship 基于Kustomize 项目的快速kubernetes 应用部署工具

    replicatedhq-ship 是对Kustomize 项目的扩展,我们可以用它来快速的进行三方应用的管理部署, 可以和helm,kubernetes 清单文件,knative 集成,我们可以方便 ...

  3. 【转载】Win10打开U盘提示“文件或目录损坏无法读取”怎么办?

    以下文转载至系统之家 网址:http://www.xitongzhijia.net/xtjc/20190314/152334.html (PS:暂未亲测) Win10打开U盘提示“文件或目录损坏无法读 ...

  4. 基于SVN提交历史筛选作者并修改文件内容

    笔者最近开发的项目中,是通过SVN做为版本管理工具的,因为需要创建的文件太多,所以有许多文件是在原有文件基础上拷贝过来修改的,这里就涉及到一个问题,原有文件中注释里填的JAVA类名.作者工号.创建时间 ...

  5. 高级openg 混合,一个完整程序

    1.当片段着色器处理完一个片段之后,模板测试(stencil test)会开始执行,和深度测试一样,它也可能会丢弃片段,接下来,被保留的片段会进入深度测试2.每个窗口库都需要为你配置一个模板缓冲,但是 ...

  6. Window下Tomcat单机部署多应用

    1. 新增tomcat相关环境变量 如上图,有两个tomcat,tomcat1和tomcat2 2.修改catalina.bat 文件 第一个tomcat不变 第二个tamcat的catalina.b ...

  7. WCF入门教程(二)从零做起-创建WCF服务

    通过最基本的操作看到最简单的WCF如何实现的.这是VS的SDK默认创建的样本 1.创建WCF服务库 2.看其生成结构 1)IService1.cs(协议) 定义了协议,具体什么操作,操作的参数和返回值 ...

  8. golang gorilla websocket例子

    WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. WebSocket通信协议于2011年被IETF定 ...

  9. file命令详解

    Linux file命令 Linux file命令用于辨识文件类型. 通过file指令,我们得以辨识该文件的类型 用法: file [-bchikLNnprsvz0] [--apple] [--mim ...

  10. JavaScript跟踪-Piwik

    1.先决条件:使用新版本的JavaScript跟踪代码 2.JavaScript跟踪代码的功能 (1)自定义在Piwik中显示的页面名称 (2)手动触发目标转化 (3)考虑一个主机的“别名”,不将这个 ...