参考学习  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. Windows下搭建svn服务器端--创建自…

    Windows下搭建svn服务器端 1.软件 1)服务端:Subversion subversion.apache.org - Getting Subversion - Binary Packages ...

  2. sgu 321 The Spy Network (dfs+贪心)

    321. The Spy Network Time limit per test: 0.5 second(s)Memory limit: 65536 kilobytes input: standard ...

  3. Spring入门第十一课

    IOC容器中Bean的生命周期 Spring IOC容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行定制的任务. Spring IOC容器对Bean的生命周期进行管理的过 ...

  4. 通俗易懂，什么是.NET Core以及.NET Core能做什么

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/10880884.html 我们都知道.NET Core是一个可以用来构建现代.可伸缩和高性能的跨平台软件应 ...

  5. C++的dllexport和dllimport

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是C ...

  6. Java基础--常用API--日期相关API

    一.java.util.Date 1.只用于显示系统时间,其大部分操作由Calendar代替. 格林威治时间(GMT):指的是1970年1月1日0时,不同地区有时间差. 默认输出格式:星期.月.日.时 ...

  7. python 之 包的使用

    6.8 包的使用 包就是一个包含有init.py文件的文件夹,所以其实我们创建包的目的就是为了用文件夹将文件/模块组织起来 强调: 在python3中,即使包下没有__init__.py文件,impo ...

  8. CC11:链表分割

    题目 编写代码,以给定值x为基准将链表分割成两部分,所有小于x的结点排在大于或等于x的结点之前 给定一个链表的头指针 ListNode* pHead,请返回重新排列后的链表的头指针.注意:分割以后保持 ...

  9. Django之Form组件归类

    目录: Django内置字段 Django内置插件 常用选择插件 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; Field requi ...

  10. eclipse plugin

    快速查看目录 org.sf.easyexplore_1.0.4.jar mongo DB net.jumperz.app.MMonjaDB_1.0.16.jar jasper report jaspe ...