前言:BootstrapTable基于Bootstrap,Bootstrap基于jquery,所以需要引入jquery后再引入bootstrap。

<link href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.css">
<script src="${ctx}/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.js"></script>
<script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css"> //icon:官网

通过 JavaScript 的方式

通过表格 id 来启用 bootstrap table。

文档链接戳这里


<div class="box-body">
     <div id="toorbar" class="btn-group">
       <shiro:hasPermission name="admin:ordervip:create">
       <button id="addBtn" type="button" class="btn btn-default">
         <i class="glyphicon glyphicon-plus"></i>新增订单
       </button>
       </shiro:hasPermission>
     </div>
     <table id="table"></table>
  </div>

function initTable() {

$("#table").bootstrapTable({
         url: "${aapi}/orderVip/list",   //服务器数据加载地址,与末尾sidePagination参数设置为server对应。
         columns: [{             //列配置项,橙名为列参数,本文介绍有限,具体有哪些可以详细看文档介绍。
              field: 'orderNo',
              title: '订单编号',
              formatter: function(value, row, index) {  // value:field的值,row:行数据,用row.createdDtm找发起时间字段,index:行下标
                 return [
                       '<shiro:hasPermission name="admin:ordervip:detail">

<a class="detail ml10" href="javascript:void(0)" title="订单详情">',
                       value, '</a></shiro:hasPermission>',
                       '<shiro:lacksPermission name="admin:ordervip:detail">', value,
                       '</shiro:lacksPermission>'
                       ].join('');
                   },
              events: {
                       'click .detail': function(e, value, row, index) {  
                             $.FORM.showFormDialog({    //bootstrap-dialog与app-jquery-dialog.js结合使用,下面的文章中详细阐述。

title: "订单详情",
                               isReadOnly: true,
                               dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
                               templateUrl: '${aapi}/page/custom/vipOrderDetail'
                             });
                        }
                      }
              }, {
              field: 'createdDtm',
              title: '发起时间'
              }, {
              field: 'cusName',
              title: '发起人'
              }, {
              field: 'splitDtm',
              title: '拆单时间'
              }, {
              field: 'splitnum',
              title: '拆单数量'
              }, {
              field: 'type',
              title: '类型',
              formatter: function(value, row, index) {
                            if(value == '0') {
                            return "维修";
                            }
                            if(value == '1') {
                               return "搬运";
                            }
                            if(value == "1,0") {
                               return "搬运,维修"
                            }
                         }
              }, {
              field: 'state',
              title: '订单状态',
              formatter: function(value, row, index) {
                            if(typeof(value) == 'undefined' || value == "0") {
                               return "未拆分";
                            }
                            if(value == '1') {
                               return "已拆分";
                            }

}
              }, {
              field: 'remark',
              title: '备注'
              }, {
              field: 'file',
              title: '文件',
              formatter: function(value, row, index) {
                            if(row.orderFile == undefined) {
                                 return "--";
                            } else {
                                 return '<shiro:hasPermission name="admin:ordervip:download"><a class="download ml10" href="javascript:void(0)" title="下载表格">                                  <i class="fa fa-file-o" aria-hidden="true"></i></a></shiro:hasPermission>';
                            }
                         },
              events: {
                        'click .download': function(e, value, row, index) {
                             window.open('${aapi}/orderVip/downLoad/' + row.orderNo, '_self');
                         }

}
              }, {
              field: 'opt',
              title: '操作',
              formatter: function(value, row, index) {
                         return [
                                '<shiro:hasPermission name="admin:ordervip:splitorder">

<a class="split ml10" href="javascript:void(0)" title="拆分订单">

<i class ="fa fa-wrench" aria-hidden="true"></i></a></shiro:hasPermission>',
                                '<shiro:hasPermission name="admin:ordervip:update">

<a class="edit ml10" href="javascript:void(0)" title="修改订单">

<i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>',
                                '<shiro:hasPermission name="admin:ordervip:delete">

<a class="cancel ml10" href="javascript:void(0)" title="取消订单">

<i class="glyphicon glyphicon-ban-circle"></i></a></shiro:hasPermission>'
                                ].join('');
                         },    //紫色为添加图标(icon),插件:font-awesome,效果图见底部。
              events: {
                        'click .split': function(e, value, row, index) {
                             $.FORM.showFormDialog({
                                 title: "拆分VIP订单",
                                 isReadOnly: true,
                                 dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
                                 templateUrl: '${aapi}/page/custom/vipOrderSplit'
                             });

},
                        'click .edit': function(e, value, row, index) {
                        if(row.state == '1') {
                    $.NOTIFY.showNotice('提示', '不能修改已拆分的订单!');

} else {
                                $.FORM.showFormDialog({
                        title: "修改VIP订单",
                                     postUrl: "${aapi}/orderVip/update",
                                     dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
                      isReadOnly: false,
                      templateUrl: '${aapi}/page/custom/vipModifyForm',
                      formId: "#vipForm",
                      postType: "multipart",
                      data: {
                          pid: 0,
                          pname: "--",
                          level: 0
                          },
                      onPostSuccess: function() {
                          $("#table").bootstrapTable("refresh");
                      }
                    });
                  }

              },
              'click .cancel': function(e, value, row, index) {
                  if(row.state == '1') {
                      $.NOTIFY.showNotice('提示', '不能删除已拆分的订单!');

                  } else {
                      $.FORM.showConfirm({
                          title: "提示",
                          message: "您确认要取消订单【" + row.orderNo + "】?",
                          url: "${aapi}/orderVip/delete/" + row.orderNo,
                          autoClose: true,
                          successTitle: "成功",
                          successMessage: "订单【" + row.orderNo + "】已取消!",
                          onSuccess: function() {
                                 $("#table").bootstrapTable("refresh");
                          }
                       });
                               }

}
         }
         }],
      queryParams: function(params) {
          return $.extend({}, params, searchformData);    //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,本项目中用于自定义表格的查询,于别的文章详细阐述。
          },
         toolbar: "#toolbar",  //一个jQuery 选择器,指明自定义的toolbar(工具栏),将需要的功能放置在表格工具栏(默认)位置。
         sidePagination: "server",  //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
         pageNumber: 1,    //如果设置了分页,首页页码
         pageSize: 10,   //如果设置了分页,页面数据条数
         pageList: [
             10, 20, 50, 100, 200   //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
         ],
         pagination: true,  //设置为 true 会在表格底部显示分页条
         showRefresh: true, //显示 刷新按钮
         showColumns: true, //是否显示 内容列下拉框
         searchOnEnterKey: true,  //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法

search:true   //是否启用搜索框

});
    }

   initTable();

分页使用后台代码写,并且返回参数order=asc&limit=10&offset=0(正序,10条,从0开始),不懂这些值是怎么设置的= =

url: http://127.0.0.1:8081/piano/a/orderVip/list?order=asc&limit=10&offset=0

请求成功后的表格如下图所示:

(本篇内容还结合了bootstrap-dialog的内容。在接下来的文章中详细介绍。)

Bootstrap Table的使用的更多相关文章

  1. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  2. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  6. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. 后台系统组件:一丶bootstrap table

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

  10. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

随机推荐

  1. Linux入门学习教程:虚拟机体验之KVM篇

    本文中可以学习到的命令: 1. aptitude 是apt-get 不会产生垃圾的版本 2.       dpkg -L virtualbox 显示属于该包的文件 lsmod | grep kvmfi ...

  2. 产生一个int数组,长度为100,并向其中随机插入1-100,不重复

    #define RANDOM(X) (rand() % X + 1) int main() { //标志数组 ] = {}; ] = {}; //默认的随机数种子是1,这样的话,每次执行这个程序都会得 ...

  3. CDONTS组件

    在ASP中发送Email时往往需要一个COM组件支持,如果你没有第三方的Email组件,你可以使用IIS本身提供CDONTS EMail组件.这个组件使用时需要安装和启动SMTP服务.这个组件的名称为 ...

  4. 【转】How to build and install PHP 5.6.9 from source on Ubuntu 14.04 VPS

    原文 https://vpsineu.com/blog/how-to-build-and-install-php-5-6-9-from-source-on-ubuntu-14-04-vps/ In t ...

  5. OpenGL------显示列表

    我们已经知道,使用OpenGL其实只要调用一系列的OpenGL函数就可以了.然而,这种方式在一些时候可能导致问题.比如某个画面中,使用了数千个多边形来表现一个比较真实的人物,OpenGL为了产生这数千 ...

  6. CodeForces 566B Replicating Processes

    #include <bits/stdc++.h> #define N 3010 #define LL long long #define unsigned U using namespac ...

  7. c++绘图软件<一>

    准备写一个绘图软件,参考了三层架构(表现层.业务逻辑层.数据访问层). //////////////////////////////////////////////////////////////// ...

  8. linux视频学习4(crontab和进程)

    1 . crontab定时任务: 任务调度: 系统在某个时间执行的特定的命令. 分类: 1.系统工作.2.个别的用户工作. 设置任务调度文件: /etc/crontab 1.crontab -e  : ...

  9. Note over Chinese Encodings

    I been confused years ago. Till recently I collected my thoughts together, and now I am clear about ...

  10. java 数据结构 栈的实现

    java数据结构之栈的实现,可是入栈,出栈操作: /** * java数据结构之栈的实现 * 2016/4/26 **/ package cn.Link; public class Stack{ No ...