参考学习  http://bootstrap-table.wenzhixin.net.cn/getting-started/

包括Bootstrap库（如果你的项目没有使用它）和bootstrap-table.csshead标签你的html文档。

<link rel="stylesheet" href="bootstrap.min.css">

<link rel="stylesheet" href="bootstrap-table.css">

包括jQuery库，引导程序库（如果您的项目没有使用它），并bootstrap-table.js在头标签或文档的最底部，在关闭正文标记之前（通常建议为了更好的性能）。

<script src="jquery.min.js"></script>

<script src="bootstrap.min.js"></script>

<script src="bootstrap-table.js"></script>

<script src="bootstrap-table-zh-CN.js"></script>

Example:

　　

<script type="text/javascript">

    $(document).ready(function () {

        $('#table').bootstrapTable({

            columns: [

               { field: 'Seq', title: 'Seq', width: 30, align: 'center', "colspan": 1 },

               { field: 'BOL', title: 'BOL', width: 120, align: 'center', "colspan": 1 },

               { field: 'IsUrgent', title: '加急', width: 30, align: 'center', "colspan": 1 },

               { field: 'PickState', title: '拣配状态', width: 60, align: 'center', "colspan": 1 },

               { field: 'PreAllocationState', title: '包装状态', width: 60, align: 'center', "colspan": 1 },

               { field: 'DNCount', title: 'DN', width: 30, align: 'center', "colspan": 1 },

               { field: 'Request', title: 'Request', width: 60, align: 'center', "colspan": 1 },

               { field: 'UrgentTime', title: 'UrgentTime', width: 60, align: 'center', "colspan": 1 }

            ],
　　　　　　　　

cache:false,
icons:{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'},

            pageList: [10, 25, 50, 100, 200]

        });

        $.ajax({

            url: "/FRUInventoryBarCodeMobile/GetShipmentList",

            type: "POST",

            data: {},

            datatype: "json",

            success: function (data) {

                if (data.msgType == "success") {

                    $('#table').bootstrapTable('load', data.rows);

                }

                else if (data.msgType == "error") {

                    layer.open({

                        content: data.msg

                 , skin: 'msg'

                 , time: 2 //2秒后自动关闭

                    });

                }

            }

        })

    })

</script>

<body>

    <div class="panel-body">

        <div id="toolbar" class="btn-group">

            <button id="btn_edit" type="button" class="btn btn-default">

                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改

            </button>

            <button id="btn_delete" type="button" class="btn btn-default">

                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除

            </button>

        </div>

    </div>

    <table id="table" data-striped="true"  @*stripe the rows*@

        data-pagination="true"           @*show a pagination toolbar on table bottom.*@

        data-show-columns="true"        @*show the columns drop down list.*@

        data-toolbar="#toolbar"         @*A jQuery selector that indicates the toolbar, for example:#toolbar, .toolbar, or a DOM node.*@

        data-search="true"              @*Enable the search input.*@

        data-show-toggle="true"         @*show the toggle button to toggle table / card view.*@

        data-maintain-selected="true"  @*True to maintain selected rows on change page and search.*@
　　　　  data-icons-prefix="glyphicon">  @*添加自定义图标*@

    </table>

</body>

后台取数据：

   public ActionResult GetShipmentList(FormCollection fc)

        {

            LogHelper lh = new LogHelper();

            if (user != null)

            {

                DBConn = user.DBConn.ToString();

            }

            else

            {

                return RedirectToAction("Login", "P2Mobile");

            }

            JsonMsg jsmsg = new JsonMsg();

            var arrlist = p2mobile_inventorybarcodeibll.GetShipmentList(DBConn);

            if (arrlist.Count > )

            {

                int total = arrlist.Count;

                return Json(new { msgType = JsonMsgType.Success, total = total, rows = arrlist }, JsonRequestBehavior.AllowGet);

            }

            return Json(new { msgType = JsonMsgType.Error, msg = "未找到相关数据" }, JsonRequestBehavior.AllowGet);

        }

bootstrap-table学习的更多相关文章

  1. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  2. bootstrap table 学习记录

    效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...

  3. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  4. 后台系统组件：一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  5. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  6. ABP+AdminLTE+Bootstrap Table权限管理系统一期

       学而时习之,不亦说乎,温顾温知新,可以为师矣. 这也是算是一种学习的方法和态度吧,经常去学习和总结,在博客园看了很多大神的文章,写下一点对于ABP(ABP是“ASP.NET Boilerplat ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI

    一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...

  8. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十二节--小结,Bootstrap Table之角色管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 很多人说ABP不适合高并发大型,有一定的道理,但是我觉得还是可以的,就看架构师的能力了,哈哈,我之前公司就是ABP ...

  9. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展

    SignalR简介 SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  10. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十七节--Quartz与ABP框架Abp.Quartz及扩展

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

随机推荐

  1. [poj1741]Tree(点分治+容斥原理)

    题意:求树中点对距离<=k的无序点对个数. 解题关键:树上点分治,这个分治并没有传统分治的合并过程,只是分成各个小问题,并将各个小问题的答案相加即可,也就是每层的复杂度并不在合并的过程,是在每层 ...

  2. go语言中将函数作为变量传递

    在Go中函数也是一种变量,我们可以通过type来定义它,它的类型就是所有拥有相同的参数,相同的返回值的一种类型,函数当做值和类型在我们写一些通用接口的时候非常有用,通过下面这个例子我们可以看到test ...

  3. 洛谷P2257 YY的GCD（莫比乌斯反演）

    传送门 原来……莫比乌斯反演是这么用的啊……(虽然仍然不是很明白) 首先,题目所求如下$$\sum_{i=1}^n\sum_{j=1}^m[gcd(i,j)=prim]$$ 我们设$f(d)$表示$g ...

  4. java中对List进行分组和排序

    排序 对List进行排序,有两种办法 第一个是用java提供的工具类Collections提供的sort方法进行排序 废话不多说,上代码 首先定义一个Student public class Stud ...

  5. 日期和时间-time时间模块

    时间的检测 #时间的检测 #导入时间模块 import time #返回当前时区与格林尼治所在时区的相差秒数(推荐) print(time.timezone) #输出结果:-28800 #返回当前时区 ...

  6. thinkphp5修改入口文件位置及相应的问题

    问题1:thinkphp5修改入口文件 解决:参考手册 http://www.kancloud.cn/manual/thinkphp5/129746,然后需要把.htaccess跟入口文件放到同一目录 ...

  7. Maven - StackOverflowError

    问题与分析 今天发现服务器上的Jenkins在集成项目时报错,报错原因如下: error compiling: java.lang.StackOverflowError -> [Help 1] ...

  8. java获取本机ip的方法

    直接上代码: public class LocalIPUtil { public static String getLocalIp(HttpServletRequest request){ Strin ...

  9. Python集合的常用操作

    字典常用的就是,他的去重. set集合是python的一个基本数据类型. set中的元素是不重复的.⽆无序的.⾥面的元素必须是可hash的(int, str, tuple,bool). 我们可以这样来 ...

  10. Python模块之re

    re模块 准备: flags有很多可选值: re.I(IGNORECASE)忽略大小写,括号内是完整的写法 re.M(MULTILINE)多行模式,改变^和$的行为 re.S(DOTALL)点可以匹配 ...