页面滚动条优化

resources/views/grid/data-table.blade.php

@@ -33,53 +33,53 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 0;margin-bottom:10px!important' : '' !!}">
-        <table
-                class="table custom-data-table dataTable dt-checkboxes-select
+    <div class="table-responsive table-wrapper" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 0;margin-bottom:10px!important' : '' !!}">
+            <table
+                    class="table custom-data-table dataTable dt-checkboxes-select
                  {{ $grid->getComplexHeaders() ? 'complex-headers' : ''}}
-                {{ $grid->option('table_class') }}
-                {{ $grid->option('show_bordered') ? 'table-bordered' : '' }} "
-                id="{{ $tableId }}"
-        >
-            <thead>
-            @if ($headers = $grid->getComplexHeaders())
+                    {{ $grid->option('table_class') }}
+                    {{ $grid->option('show_bordered') ? 'table-bordered' : '' }} "
+                    id="{{ $tableId }}"
+            >
+                <thead>
+                @if ($headers = $grid->getComplexHeaders())
+                    <tr>
+                        @foreach($headers as $header)
+                            {!! $header->render() !!}
+                        @endforeach
+                    </tr>
+                @endif
                 <tr>
-                    @foreach($headers as $header)
-                        {!! $header->render() !!}
+                    @foreach($grid->columns() as $column)
+                        <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
                     @endforeach
                 </tr>
-            @endif
-            <tr>
-                @foreach($grid->columns() as $column)
-                    <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
-                @endforeach
-            </tr>
-            </thead>
+                </thead>
 
-            @if ($grid->hasQuickCreate())
-                {!! $grid->renderQuickCreate() !!}
-            @endif
+                @if ($grid->hasQuickCreate())
+                    {!! $grid->renderQuickCreate() !!}
+                @endif
 
-            <tbody>
-            @foreach($grid->rows() as $row)
-                <tr {!! $row->rowAttributes() !!}>
-                    @foreach($grid->getColumnNames() as $name)
-                        <td {!! $row->columnAttributes($name) !!}>
-                            {!! $row->column($name) !!}
+                <tbody>
+                @foreach($grid->rows() as $row)
+                    <tr {!! $row->rowAttributes() !!}>
+                        @foreach($grid->getColumnNames() as $name)
+                            <td {!! $row->columnAttributes($name) !!}>
+                                {!! $row->column($name) !!}
+                            </td>
+                        @endforeach
+                    </tr>
+                @endforeach
+                @if ($grid->rows()->isEmpty())
+                    <tr>
+                        <td colspan="{!! count($grid->getColumnNames()) !!}">
+                            <div style="margin:5px 0 0 10px;"><span class="help-block" style="margin-bottom:0"><i class="feather icon-alert-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span></div>
                         </td>
-                    @endforeach
-                </tr>
-            @endforeach
-            @if ($grid->rows()->isEmpty())
-                <tr>
-                    <td colspan="{!! count($grid->getColumnNames()) !!}">
-                        <div style="margin:5px 0 0 10px;"><span class="help-block" style="margin-bottom:0"><i class="feather icon-alert-circle"></i>&nbsp;{{ trans('admin.no_data') }}</span></div>
-                    </td>
-                </tr>
-            @endif
-            </tbody>
-        </table>
-    </div>
+                    </tr>
+                @endif
+                </tbody>
+            </table>
+        </div>
 
     {!! $grid->renderFooter() !!}
 

resources/views/grid/table.blade.php

@@ -33,7 +33,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive complex-container" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!};border-bottom: 1px solid #f8f8f8!important;">
+    <div class="table-responsive table-wrapper complex-container" style="{!! $grid->option('show_bordered') ? 'padding:3px 10px 10px' : '' !!};border-bottom: 1px solid #f8f8f8!important;">
         <table
                 class="table dt-checkboxes-select
                 {{ $grid->getComplexHeaders() ? 'complex-headers' : ''}}

src/Grid/Responsive.php

@@ -4,6 +4,7 @@ namespace Dcat\Admin\Grid;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
+use Dcat\Admin\Layout\Content;
 
 /**
  * @see http://gergeo.se/RWD-Table-Patterns/#demo
@@ -65,10 +66,19 @@ class Responsive
         return $this;
     }
 
+    protected function disablePerfectScrollbar()
+    {
+        Content::composed(function (Content $content) {
+            $content->disablePerfectScrollbar();
+        });
+    }
+
     public function build()
     {
         Admin::collectAssets('rwd-table');
 
+        $this->disablePerfectScrollbar();
+
         $opt = json_encode($this->options);
 
         // 这里需要延迟执行，否则可能会造成页面元素跳跃闪动

src/Layout/Content.php

@@ -53,6 +53,11 @@ class Content implements Renderable
      */
     protected $config = [];
 
+    /**
+     * @var bool
+     */
+    protected $usingPerfectScrollbar = true;
+
     /**
      * Content constructor.
      *
@@ -151,6 +156,18 @@ class Content implements Renderable
         return $this;
     }
 
+    /**
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function disablePerfectScrollbar(bool $value = true)
+    {
+        $this->usingPerfectScrollbar = ! $value;
+
+        return $this;
+    }
+
     /**
      * @param array $breadcrumb
      *
@@ -387,6 +404,35 @@ class Content implements Renderable
         }
     }
 
+    /**
+     * 页面滚动条优化
+     */
+    protected function makePerfectScrollbar()
+    {
+        if (! $this->usingPerfectScrollbar) {
+            return;
+        }
+
+        Admin::script(
+            <<<'JS'
+(function () {
+    var ps, wps;            
+   if ($('.full-page .wrapper').length) {
+        wps = new PerfectScrollbar('.full-page .wrapper');
+    }
+    ps = new PerfectScrollbar('html');
+    $(document).one('pjax:send',function () {
+        ps && ps.destroy();
+        ps = null; 
+          
+        wps && wps.destroy();
+        wps = null; 
+    });
+})()
+JS
+        );
+    }
+
     /**
      * @return array
      */
@@ -478,6 +524,8 @@ class Content implements Renderable
 
         $this->callComposed();
 
+        $this->makePerfectScrollbar();
+
         return view($this->view, $variables)->render();
     }