Bootstrap Table的使用

前言：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的内容。在接下来的文章中详细介绍。）