报表 增加 导出文件格式选择、快速翻页功能

baobiao.html

@@ -104,7 +104,7 @@
                   </div>
                 </div>
                 <div class="col-lg-10 p-0">
-                  <div class="toolsbar-f">
+                  <div class="toolsbar-f d-flex justify-content-between">
                     <div class="print-toolsbar">
                       <div class="panel">
                         <div class="panel-body">
@@ -112,7 +112,7 @@
                             <i class="fa fa-print"></i><br>
                             打印 <span id="checkCount" class="badge badge-primary">5</span>
                           </button>
-                          <button class="btn btn-secondary btn-sm" type="button">
+                          <button class="btn btn-secondary btn-sm" type="button"  href="#export" data-toggle="modal" data-target="#export">
                             <i class="fa fa-share-square-o"></i><br>
                             导出 <span id="checkCount" class="badge badge-primary">5</span>
                           </button>
@@ -146,9 +146,9 @@
                       <div class="panel">
                           <div class="panel-body">
                             <div class="btn-group" role="group">
-                              <button type="button" class="btn btn-secondary btn-sm">-</button>
+                              <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="缩小">-</button>
                               <button class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="重置默认大小">1000%</button>
-                              <button type="button" class="btn btn-secondary btn-sm">+</button>
+                              <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="放大">+</button>
                             </div>
                           </div>
                           <div class="panel-foot text-muted">
@@ -167,6 +167,22 @@
                             报表设置
                           </div>
                       </div>
+                      <div class="panel">
+                        <div class="panel-body">
+                          <div class="input-group input-group-sm" role="group">
+                            <span class="input-group-btn">
+                              <button type="button" class="btn btn-secondary btn-sm" disabled data-toggle="tooltip" data-placement="bottom" title="上一页"><i class="fa fa-chevron-left"></i></button>
+                            </span>
+                            <input class="form-control" value="1/10" style="width:60px"  data-toggle="tooltip" data-placement="bottom" title="输入页码按回车键，快速跳转">
+                            <span class="input-group-btn">
+                              <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="下一页"><i class="fa fa-chevron-right"></i></button>
+                            </span>
+                          </div>
+                        </div>
+                        <div class="panel-foot text-muted">
+                          翻页
+                        </div>
+                      </div>
                     </div>
                   </div>
                     <div class="print-view form-view">
@@ -497,6 +513,45 @@
               </div>
           </div>
       </div>
+      <!--弹出导出-->
+      <div class="modal fade" id="export" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">选择导出格式</h5>
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                  </div>
+                  <div class="modal-body">
+                    <div class="row">
+                      <div class="col-6">
+                        <a class="btn btn-block btn-primary" href="#">
+                          <i class="fa fa-check-square pull-right"></i>
+                          <div class="card-body text-center">
+                            <h1 class="display-3"><i class="fa fa-file-pdf-o"></i></h1>
+                            <h1>PDF</h1>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col-6">
+                        <!-- <i class="fa fa-check-square pull-right"></i> -->
+                        <a class="btn btn-block btn-outline-secondary" href="#">
+                          <div class="card-body text-center">
+                            <h1 class="display-3"><i class="fa fa-file-excel-o"></i></h1>
+                            <h1>Excel</h1>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+                      <a href="" class="btn btn-primary">确定</a>
+                  </div>
+              </div>
+          </div>
+      </div>
     <!-- JS. -->
     <script src="js/jquery/jquery-3.2.1.min.js"></script>
     <script src="js/popper/popper.min.js"></script>