参考学习  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. PCL推荐的命名规范(2)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=210 函数/成员函数命名 函数和类的成员函数的命名应该采用camelCase ...

  2. 正则表达式&nbsp;LINUX

    正则表达式 热身 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 例如 g ...

  3. Struts&nbsp;result&nbsp;param详细设置

    <</span>result type="json"> <</span>param name="root">da ...

  4. SQL中的drop,truncate和delete的区别

    (1)   DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作.TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把 ...

  5. HDU 2112 HDU Today Dij+map转化

    HDU Today 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并 ...

  6. LabVIEW - 破解加密vi

    步骤 使用二进制阅读软件打开加密vi 查找字段"00 00 00 30",其后的16位即可能是密码(可能查找到多个位置带有该字段,只有其中之一为密码位置) 将查找到的密码复制到MD ...

  7. 集成Python Shell

    每次启动shell会话都要导入Python相关对象(数据库实例和模型),这是件十分枯燥的工作.为了避免一直重复导入,我们可以做些配置,让flask-script的shell命令自动导入特定的对象. F ...

  8. codevs3145 汉诺塔游戏

    3145 汉诺塔游戏  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver     题目描述 Description 汉诺塔问题(又称为河内塔问题),是一个大家熟知 ...

  9. 笔记-JavaWeb学习之旅18

    AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端操作后必须等待服务器端的响应, ...

  10. Python 开发基础-字符串类型讲解（字符串方法）-2

    s = 'Hello World!'print(s.index('W',0,9))#返回某个字母的索引值,本例返回6.没有该字母会报错,和FIND比较像,find不会报错,没找到会返回-1print( ...