使用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真的有这种情况,答辩验收的时候几个人在讲台 ...
随机推荐
- apache kafka系列之在zookeeper中存储结构
1.topic注册信息 /brokers/topics/[topic] : 存储某个topic的partitions所有分配信息 Schema: { "version": ...
- nginx https配置——Let's Encrypt 部署和维护
let's encrypt Let's Encrypt 的最大贡献是它的 ACME 协议,第一份全自动服务器身份验证协议,以及配套的基础设施和客户端.这是为了解决一直以来 HTTPS TLS X.50 ...
- C/S架构程序多种类服务器之间实现单点登录
(一) 在项目开发的过程中,经常会出现这样的情况:我们的产品包括很多,以QQ举例,如登陆.好友下载.群下载.网络硬盘.QQ游戏.QQ音乐等,总不能要求用户每次输入用户名.密码吧,为解决这个问题,高手提 ...
- 突破本地离线存储的JS库 localforage
localforage 简介 项目地址 https://github.com/localForage/localForage API中文地址 https://localforage.docschina ...
- Jenkins进阶-应用的远程部署(12)
越来越多的公司部署需要实现自动化模式,大家的首选的工具就是Jenkins,下来介绍下通过Publish Over SSH Plugin插件实现远程部署: 一.安装插件Publish Over SSH ...
- 在CentOS6.8系统上安装MySQL5.7(转)
mysql-57">如何在CentOS 6.8系统上安装MySQL 5.7? 一.检查系统上是否已经安装MySQL 命令: ? 1 2 3 4 5 [root@localhost ~] ...
- 蒲公英 Bug 管理云
官网访问地址:https://www.tracup.com/ 优势地方: ①免费使用 现在免费,今后也一直免费. ②无需部署 网站采用云端部署,这也就意味着无需开发者自己搭建.部署,注册一个蒲公英账号 ...
- PHP 解压 ZIP 文件到指定文件夹
本类实现参考 php manual 评论 [php] view plain copy /** * function: 解压zip 格式的文件 * author:friker * date:2015-1 ...
- 回看《例说FPGA》---DDR2控制器集成与读写测试
回看<例说FPGA> ---DDR2控制器集成与读写测试 1.DDR2 IP核的配置 需要弄清楚的选项主要有: PLL reference clock frequency Memory c ...
- GetClass与RegisterClass的应用一例
利用GetClass与RegisterClass可以实现根据字符串来实例化具体的子类,这对于某些需要动态配置程序的场合是很有用的.其他的应用如子窗体切换,算法替换等都能得到应用. unit Examp ...