异步渲染数据表格

resources/assets/dcat/js/extensions/Grid.js

@@ -30,6 +30,8 @@ export default class Grid {
 
 class AsyncGrid {
     constructor(options) {
+        let nullFun = function () {};
+
         options = $.extend({
             selector: null,
             bodySelector: '.async-body',
@@ -37,6 +39,8 @@ class AsyncGrid {
             queryName: null,
             url: null,
             loadingStyle: 'height:240px;',
+            before: nullFun,
+            after: nullFun,
         }, options);
 
         var self = this,
@@ -49,7 +53,7 @@ class AsyncGrid {
         self.loading = false;
     }
 
-    render(url) {
+    render(url, callback) {
         let self = this, options = self.options;
 
         url = url || options.url;
@@ -62,14 +66,23 @@ class AsyncGrid {
         let $box = self.$box,
             $body = self.$body,
             reqName = options.queryName,
-            tableSelector = options.tableSelector;
+            tableSelector = options.tableSelector,
+            $table = $body.find(tableSelector),
+            events = {0: 'grid:rendering', 1: 'grid:render', 2: 'grid:rendered'},
+            before = options.before,
+            after = options.after;
+
+        // 开始渲染前事件
+        before($box, url);
+        $box.trigger(events[0], [url]);
+        $body.trigger(events[0], [url]);
 
         // loading效果
         let loadingOptions = {background: 'transparent'}
         if ($body.find(`${tableSelector} tbody tr`).length <= 2) {
             loadingOptions['style'] = options.loadingStyle;
         }
-        $body.find(tableSelector).loading(loadingOptions);
+        $table.loading(loadingOptions);
         Dcat.NP.start();
 
         if (url.indexOf('?') === -1) {
@@ -95,8 +108,9 @@ class AsyncGrid {
             };
 
             // 表格渲染事件
-            $body.off('grid:render').on('grid:render', refresh);
-            $body.find('table').on('grid:render', refresh);
+            $box.off(events[1]).on(events[1], refresh);
+            $body.off(events[1]).on(events[1], refresh);
+            $table.on(events[1], refresh);
 
             // 刷新按钮
             $box.find('.grid-refresh').off('click').on('click', function () {
@@ -133,6 +147,15 @@ class AsyncGrid {
 
             // 规格选择器
             $box.find('.grid-selector a').on('click', loadLink);
+
+            // 渲染完成后事件
+            $box.trigger(events[2], [url, html]);
+            $body.trigger(events[2], [url, html]);
+            $table.trigger(events[2], [url, html]);
+
+            after($box, url, html);
+
+            callback && callback($box, url, html);
         });
 
         function loadLink() {

resources/views/filter/button.blade.php

@@ -6,7 +6,7 @@
     >
         <i class="feather icon-filter"></i>@if($filter_text)<span class="d-none d-sm-inline">&nbsp;&nbsp;{{ trans('admin.filter') }}</span>@endif
 
-        @if($valueCount) &nbsp;({!! $valueCount !!}) @endif
+        <span class="filter-count">@if($valueCount) &nbsp;({!! $valueCount !!}) @endif</span>
     </button>
     @if($scopes->isNotEmpty())
         <ul class="dropdown-menu" role="menu">

resources/views/grid/async-fixed-table.blade.php

@@ -186,15 +186,4 @@
         {!! $grid->renderFooter() !!}
     </div>
 </div>
-
-<script>
-    Dcat.ready(function () {
-        Dcat.grid.async({
-            selector: '.async-{{ $tableId }}',
-            queryName: '{!! Dcat\Admin\Grid::ASYNC_NAME !!}',
-            url: '{!! $asyncUrl !!}',
-            loadingStyle: 'height:145px;'
-        }).render()
-    });
-</script>
 @endif

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

@@ -44,7 +44,6 @@
     {!! $grid->renderFooter() !!}
 
     {!! $grid->renderPagination() !!}
-
 @else
     <div class="dcat-box async-{{ $tableId }}">
 
@@ -85,14 +84,4 @@
             {!! $grid->renderFooter() !!}
         </div>
     </div>
-
-    <script>
-    Dcat.ready(function () {
-        Dcat.grid.async({
-            selector: '.async-{{ $tableId }}',
-            queryName: '{!! Dcat\Admin\Grid::ASYNC_NAME !!}',
-            url: '{!! $asyncUrl !!}',
-        }).render()
-    });
-    </script>
 @endif

src/Grid.php

@@ -290,17 +290,17 @@ class Grid
         $this->async = $async;
 
         if ($async) {
-            $url = Helper::fullUrlWithoutQuery(['_pjax']);
-
             $this->view('admin::grid.async-table');
-            $this->addVariables([
-                'asyncUrl' => Helper::urlWithQuery($url, [static::ASYNC_NAME => 1]),
-            ]);
         }
 
         return $this;
     }
 
+    public function getAsync()
+    {
+        return $this->async;
+    }
+
     /**
      * 判断是否允许查询数据.
      *
@@ -1031,6 +1031,10 @@ HTML;
 
         $this->setUpOptions();
 
+        $this->addFilterScript();
+
+        $this->addScript();
+
         return $this->doWrap();
     }
 
@@ -1043,6 +1047,25 @@ HTML;
         return $this->view;
     }
 
+    protected function addScript()
+    {
+        if ($this->async && ! $this->isAsyncRequest()) {
+            $query = static::ASYNC_NAME;
+            $url = Helper::fullUrlWithoutQuery(['_pjax']);
+            $url = Helper::urlWithQuery($url, [static::ASYNC_NAME => 1]);
+
+            Admin::script(
+                <<<JS
+Dcat.grid.async({
+    selector: '.async-{$this->getTableId()}',
+    queryName: '{$query}',
+    url: '{$url}',
+}).render()
+JS
+            );
+        }
+    }
+
     /**
      * @return string
      */

src/Grid/Concerns/HasFilter.php

@@ -3,6 +3,7 @@
 namespace Dcat\Admin\Grid\Concerns;
 
 use Closure;
+use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
 use Illuminate\Support\Collection;
 
@@ -137,4 +138,21 @@ trait HasFilter
     {
         return $this->disableFilterButton(! $val);
     }
+
+    protected function addFilterScript()
+    {
+        if (! $this->isAsyncRequest()) {
+            return;
+        }
+
+        Admin::script(
+            <<<JS
+var count = {$this->filter()->countConditions()};
+
+if (count > 0) {
+    $('.async-{$this->getTableId()}').find('.filter-count').text('('+count+')');
+}
+JS
+        );
+    }
 }

src/Grid/Filter.php

@@ -533,6 +533,17 @@ class Filter implements Renderable
         return $this->filters;
     }
 
+    /**
+     * 统计查询条件的数量.
+     *
+     * @return int
+     */
+    public function countConditions()
+    {
+        return $this->mode() === Filter::MODE_RIGHT_SIDE
+            ? count($this->getConditions()) : 0;
+    }
+
     /**
      * @param string $key
      * @param string $label

src/Grid/Tools/FilterButton.php

@@ -57,33 +57,33 @@ class FilterButton extends AbstractTool
 
             $script = <<<JS
 (function () {
-    var slider, 
+    var slider,
         expand = {$expand};
-    
+
      function initSlider() {
         slider = new Dcat.Slider({
             target: '#{$id}',
         });
-        
+
         slider
             .\$container
             .find('.right-side-filter-container .header')
             .width(slider.\$container.width() - 20);
-        
+
         expand && setTimeout(slider.open.bind(slider), 10);
     }
-    
+
     expand && setTimeout(initSlider, 10);
-    
+
     $('.{$this->getElementClassName()}').on('click', function () {
         if (! slider) {
             initSlider()
         }
         slider.toggle();
-       
+
         return false
     });
-    
+
     $('.wrapper').on('click', '.modal', function (e) {
         if (typeof e.cancelBubble != "undefined") {
             e.cancelBubble = true;
@@ -103,7 +103,7 @@ JS;
             $script = <<<JS
 $('.{$this->getElementClassName()}').on('click', function(){
     $('#{$id}').parent().toggleClass('d-none');
-}); 
+});
 JS;
         }
 
@@ -141,8 +141,7 @@ JS;
 
         $scopres = $filter->scopes();
         $filters = $filter->filters();
-        $valueCount = $filter->mode() === Filter::MODE_RIGHT_SIDE
-            ? count($this->parent->filter()->getConditions()) : 0;
+        $valueCount = $filter->countConditions();
 
         if ($scopres->isEmpty() && ! $filters) {
             return;