使用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真的有这种情况,答辩验收的时候几个人在讲台 ...
随机推荐
- Creating Node.js Command Line Utilities to Improve Your Workflow
转自:https://developer.telerik.com/featured/creating-node-js-command-line-utilities-improve-workflow/ ...
- graalvm 简单试用
安装 地址 http://www.graalvm.org/downloads/ 配置环境变量 linux: export PATH=/path/to/graalvm/bin:$PATH mac: ...
- phpdocumentor安装和使用总结
为了解决一校友在安装和使用phpDocumentor过程中遇到的问题,自己闲时也折腾了一下这个东西,总结见下: 一.定义: 自己刚听到这个词时还不知道这个是什么东西,干啥用的,就去百度了一下,说道: ...
- 轻量级web框架cicada----（转）
源码地址: https://github.com/TogetherOS/cicada 快速启动 下面来看看如何快速启动一个 HTTP 服务. 只需要创建一个 Maven 项目,并引入核心包. < ...
- js 的深拷贝
出处:https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html function deepClone(initalObj, finalObj) { var ...
- JFrame包含的容器(JRootPane)
JFrame对象创建后,此对象包含JRootPane类型的容器.JRootPane 下有GlassPane, 和 LayeredPane,LayeredPane下又有ContentPane , ...
- Linux VMware安装CentOS
VMware安装CentOS 1 检查BIOS虚拟化支持 2 新建虚拟机 3 新建虚拟机向导 4 创建虚拟空白光盘 ...
- PxCook 像素大厨 标注切图，一起搞定！专注设计本质
http://www.fancynode.com.cn/pxcook
- Video Test Pattern Generator(7.0)软件调试记录
Video Test Pattern Generator(7.0)软件调试记录 . XVidC_VideoMode XVIDC_VM_576_50_I = XVIDC_VM_720x576_50_I ...
- js写法【2】
1.stringobject.replace(/regex/,function(capture,index,stringob){});可 用来对每个捕获执行一段脚本,返回捕获替换值. 2.arrayo ...