使用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真的有这种情况,答辩验收的时候几个人在讲台 ...

随机推荐

几张简单的terraform flow 图——可以快速了解terraform的使用
以下是一个简单额terraform flow 我们快速的了解terraform 的使用,基于流程参考图参考架构简单使用流程说明从上图我们可以看出terraform 的使用 tf 内容编写定 ...
quartz.net实现集群部署的笔记
一..表信息 QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron Trigger,包括Cron表达式和 ...
Java反射之如何判断类或变量、方法的修饰符(Modifier解析)
a->public b->public static c->public static final d->private 就是返回这些 https://blog.csdn.ne ...
NET设计模式第二部分结构性模式(12)：享元模式（Flyweight Pattern）
享元模式(Flyweight Pattern) ——.NET设计模式系列之十三 Terrylee,2006年3月摘要:面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情 ...
MySQL程序之mysqlshow详解
mysqlshow命令详解显示MySQL数据库的结构(数据库.表和列) 如果最后一个参数包含shell或SQL通配符(*,?,%,_)将显示通配符匹配的内容. 如果没有给定数据库,则显示所有匹配的数 ...
xilinx AXI相关IP核学习
xilinx AXI相关IP核学习 1.阅读PG044 (1)AXI4‐Stream to Video Out Top‐Level Signaling Interface (2)AXI4‐Stream ...
PHP-不同Str 拼接方法性能对比
问题在PHP中,有多种字符串拼接的方式可供选择,共有: 1 . , .= , sprintf, vprintf, join, implode 那么,那种才是最快的,或者那种才是最适合业务使用的,需要 ...
!important强制此css最强，其它被覆盖
有时我们引用别人写的插件不知道某个样式在哪儿,或者想要覆盖其它样式,就要用到 !importan; 例如以下是引用boostrap,默认bootstrap都是圆边框,我们不想用,例子中同一样式也出现多 ...
ubuntu 脚本执行
1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以无"执行权限" 注:该命令通常用 ...
sql重置标识
DBCC CHECKIDENT ( 'table_name' [ , { NORESEED | { RESEED [ , new_reseed_val ...

使用Bootstrap 基于MVC输出移动化table 列表

使用Bootstrap 基于MVC输出移动化table 列表的更多相关文章

随机推荐

热门专题