参考学习  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. Redux API之creatStore

    createStore(reducer, [initialState]) 创建一个 Redux store 来以存放应用中所有的 state.应用中应有且仅有一个 store. 参数 reducer  ...

  2. 11_listview入门

    listview是在安卓开发当中很常用的API. 以垂直滚动的列表的方式展示条目的控件. ListAdapter是一个桥梁,给ListView提供数据的.数据是由适配器来进行提供的.Adapter是数 ...

  3. Struts2&nbsp;+&nbsp;easyui的DataGrid&nbsp;分页

    jsp页面 js代码: $(function() { $('#ff').hide(); $('#tt').datagrid({ title : '信息显示', iconCls : 'icon-save ...

  4. 2-7 Flutter开发工具使用指南

    这里选择用哪个模拟器运行 Mac系统下可以通过这个Open IOS Siumlator打开IOS模拟器 debug用来调试的 可以创建新的模拟器 选择安卓模拟器的版本 这是sdk的配置 点开就是打开了 ...

  5. clone分支，修改文件本地commit后， push回原分支失败，处理方法

    从远程clone 一个仓库到本地仓库A后,由于有多个分支,经常需要切换,不同分支区别比较大,切换一下,需要重编译,于是又在本地clone了改动较大的一个分支F到仓库B: 在B仓库改动后,提交到A仓库的 ...

  6. php如何判断文件是否存在，包括本地和远程文件

    当检查的文件是本地时用PHP自带的file_exists检查就行了,而此函数只能检查本地的函数是否存在, 所以如果要检查远程的文件是否存在只能用其它的方法了. 如果所服务器中php的配置开启了“all ...

  7. [Xcode 实际操作]七、文件与数据-(3)创建文本文件、属性列表文件、图片文件

    目录:[Swift]Xcode实际操作 本文将演示如何创建各种类型的文件. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  8. 洛谷P4407 [JSOI2009]电子字典

    题目描述 人们在英文字典中查找某个单词的时候可能不知道该单词的完整拼法,而只知道该单词的一个错误的近似拼法,这时人们可能陷入困境,为了查找一个单词而浪费大量的时间.带有模糊查询功能的电子字典能够从一定 ...

  9. IDEA导入HttpServlet包

    转载此篇博客,言简意赅.https://blog.csdn.net/liu_yanzhao/article/details/78838670

  10. 线程组之间的JMeter传递变量

    在这个JMeter教程中,我们将了解如何在线程组之间共享和传递变量. 在开发高级JMeter脚本时,很可能您将拥有多个线程组.每个线程组将执行不同的请求. 一个很好的例子就是我们需要使用Bearer ...