异步数据表格

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

@@ -1,12 +1,4 @@
-
-<div class="dcat-box">
-
-    <div class="d-block pb-0">
-        @include('admin::grid.table-toolbar')
-    </div>
-
-    {!! $grid->renderFilter() !!}
-
+@if($grid->isAsyncRequest())
     {!! $grid->renderHeader() !!}
 
     <div class="{!! $grid->formatTableParentClass() !!}">
@@ -30,18 +22,138 @@
                 {!! $grid->renderQuickCreate() !!}
             @endif
 
-            <tbody class="async-tbody"></tbody>
+            <tbody>
+            @foreach($grid->rows() as $row)
+                <tr {!! $row->rowAttributes() !!}>
+                    @foreach($grid->getVisibleColumnNames() as $name)
+                        <td {!! $row->columnAttributes($name) !!}>
+                            {!! $row->column($name) !!}
+                        </td>
+                    @endforeach
+                </tr>
+            @endforeach
+            @if ($grid->rows()->isEmpty())
+                <tr>
+                    <td colspan="{!! count($grid->getVisibleColumnNames()) !!}">
+                        <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>
 
     {!! $grid->renderFooter() !!}
-</div>
 
-<script>
-Dcat.ready(function () {
-    // history.pushState({}, '', '/tests');
-    $.get('{!! $asyncUrl !!}', function () {
+    {!! $grid->renderPagination() !!}
+
+@else
+    <div class="dcat-box async-{{ $tableId }}">
+
+        <div class="d-block pb-0">
+            @include('admin::grid.table-toolbar')
+        </div>
+
+        {!! $grid->renderFilter() !!}
+
+        <div class="async-body">
+            <div class="{!! $grid->formatTableParentClass() !!}">
+                <table class="{{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
+                    <thead>
+                    @if ($headers = $grid->getVisibleComplexHeaders())
+                        <tr>
+                            @foreach($headers as $header)
+                                {!! $header->render() !!}
+                            @endforeach
+                        </tr>
+                    @endif
+                    <tr>
+                        @foreach($grid->getVisibleColumns() as $column)
+                            <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                        @endforeach
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    <tr>
+                        <td colspan="{!! count($grid->getVisibleColumnNames()) !!}">
+                            &nbsp;
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    <script>
+    Dcat.ready(function () {
+        var reqName = '{!! Dcat\Admin\Grid::ASYNC_NAME !!}',
+            $box = $('.async-{{ $tableId }}'),
+            $body = $box.find('.async-body'),
+            url = '{!! $asyncUrl !!}',
+            loading = false;
+
+        function render(url) {
+            if (loading || url.indexOf('javascript:') !== -1) {
+                return;
+            }
+            loading = true;
+
+            $body.find('table').loading({style:'height:250px', background:'transparent'});
+
+            if (url.indexOf('?') === -1) {
+                url += '?';
+            }
+
+            if (url.indexOf(reqName) === -1) {
+                url += '&'+reqName+'=1'
+            }
+
+            history.pushState({}, '', url.replace(reqName+'=1', ''));
+
+            $box.data('current', url);
+
+            Dcat.helpers.asyncRender(url, function (html) {
+                loading = false;
+
+                $body.html(html);
+
+                $box.find('.grid-refresh').off('click').on('click', function () {
+                    render($box.data('current'));
+
+                    return false;
+                });
+
+                $box.find('.pagination .page-link').on('click', loadLink);
+                $box.find('.per-pages-selector .dropdown-item a').on('click', loadLink);
+                $box.find('.grid-column-header a').on('click', loadLink);
+
+                $box.find('form').off('submit').on('submit', function () {
+                    var action = $(this).attr('action');
+                    if (action.indexOf('?') === -1) {
+                        action += '?';
+                    }
+
+                    render(action+'&'+$(this).serialize());
+
+                    return false;
+                });
+
+                $box.find('.filter-box .reset').on('click', loadLink);
+
+                $box.find('.grid-selector a').on('click', loadLink);
+            });
+        }
+
+        function loadLink() {
+            render($(this).attr('href'));
+
+            return false;
+        }
+
+        // $table.on('grid:render', render);
 
+        render(url);
     });
-});
-</script>
+    </script>
+@endif

src/Admin.php

@@ -13,6 +13,7 @@ use Dcat\Admin\Layout\Navbar;
 use Dcat\Admin\Layout\SectionManager;
 use Dcat\Admin\Repositories\EloquentRepository;
 use Dcat\Admin\Support\Composer;
+use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Traits\HasAssets;
 use Dcat\Admin\Traits\HasHtml;
 use Dcat\Admin\Traits\HasPermissions;
@@ -379,6 +380,54 @@ class Admin
         return static::context()->ignoreQueries ?? [];
     }
 
+    /**
+     * 输入直接渲染的内容.
+     *
+     * @param mixed $value
+     */
+    public static function content($value)
+    {
+        static::context()->add('contents', $value);
+    }
+
+    /**
+     * @return bool
+     */
+    public static function hasContents()
+    {
+        return count(static::context()->getArray('contents')) > 0;
+    }
+
+    /**
+     * 渲染内容.
+     *
+     * @return string
+     */
+    public static function renderContents()
+    {
+        $contents = static::context()->getArray('contents');
+
+        $results = '';
+
+        foreach ($contents as $content) {
+            $results .= Helper::render($content);
+        }
+
+        $asset = static::asset();
+
+        Admin::baseCss([], false);
+        Admin::baseJs([], false);
+        Admin::headerJs([], false);
+
+        $results .= Admin::html()
+            .$asset->jsToHtml()
+            .$asset->cssToHtml()
+            .$asset->scriptToHtml()
+            .$asset->styleToHtml();
+
+        return $results;
+    }
+
     /**
      * 响应json数据.
      *

src/Grid.php

@@ -290,10 +290,12 @@ class Grid
         $this->async = $async;
 
         if ($async) {
+            $url = Helper::fullUrlWithoutQuery(['_pjax']);
+
             $this->view('admin::grid.async-table');
             $this->addVariables([
-                'currentUrl' => $this->request->fullUrl(),
-                'asyncUrl'   => Helper::fullUrlWithoutQuery([static::ASYNC_NAME => 1]),
+                'currentUrl' => $url,
+                'asyncUrl'   => Helper::urlWithQuery($url, [static::ASYNC_NAME => 1]),
             ]);
         }
 
@@ -307,7 +309,15 @@ class Grid
      */
     public function buildable()
     {
-        return $this->async && $this->request->get(static::ASYNC_NAME);
+        return ! $this->async || $this->isAsyncRequest();
+    }
+
+    /**
+     * @return bool
+     */
+    public function isAsyncRequest()
+    {
+        return $this->request->get(static::ASYNC_NAME);
     }
 
     /**

src/Grid/Concerns/HasPaginator.php

@@ -16,7 +16,7 @@ trait HasPaginator
      *
      * @var array
      */
-    protected $perPages = [10, 20, 30, 50, 100, 200];
+    protected $perPages = [5, 10, 20, 30, 50, 100, 200];
 
     /**
      * Default items count per-page.

src/Grid/LazyRenderable.php

@@ -89,7 +89,7 @@ HTML;
             $visibleColumn && $grid->rowSelector()->titleColumn($visibleColumn);
         }
 
-        return $grid;
+        return $grid->async(false);
     }
 
     /**

src/Grid/Tools/PerPageSelector.php

@@ -86,7 +86,7 @@ class PerPageSelector implements Renderable
             ->render();
 
         return <<<EOT
-<label class="pull-right d-none d-sm-inline" style="margin-right: 10px">
+<label class="pull-right d-none d-sm-inline per-pages-selector" style="margin-right: 10px">
     $dropdown
 </label>
 EOT;

src/Layout/Asset.php

@@ -587,13 +587,13 @@ class Asset
      *
      * @param string|array $js
      */
-    public function headerJs($js)
+    public function headerJs($js, bool $merge = true)
     {
-        if (! $js) {
-            return;
+        if ($merge) {
+            $this->headerJs = $js ? array_merge($this->headerJs, (array) $js) : $this->headerJs;
+        } else {
+            $this->headerJs = (array) $js;
         }
-
-        $this->headerJs = array_merge($this->headerJs, (array) $js);
     }
 
     /**

src/Layout/Column.php

@@ -2,6 +2,8 @@
 
 namespace Dcat\Admin\Layout;
 
+use Dcat\Admin\Admin;
+use Dcat\Admin\Grid;
 use Dcat\Admin\Support\Helper;
 use Illuminate\Contracts\Support\Renderable;
 
@@ -97,6 +99,11 @@ class Column implements Renderable
         $html = $this->startColumn();
 
         foreach ($this->contents as $content) {
+            if ($content instanceof Grid && $content->isAsyncRequest()) {
+                Admin::content($content->render());
+
+                continue;
+            }
             $html .= Helper::render($content);
         }
 

src/Layout/Content.php

@@ -535,6 +535,10 @@ class Content implements Renderable
 
         $this->callComposed();
 
+        if (Admin::hasContents()) {
+            return Admin::renderContents();
+        }
+
         return view($this->view, $this->variables())->render();
     }
 

src/Support/Context.php

@@ -15,6 +15,7 @@ use Illuminate\Support\Fluent;
  * @property array|null $ignoreQueries
  * @property array|null $jsVariables
  * @property string $translation
+ * @property array $contents
  */
 class Context extends Fluent
 {

src/Traits/HasAssets.php

@@ -62,12 +62,13 @@ trait HasAssets
      * Add js.
      *
      * @param string|array $js
+     * @param bool $merge
      *
      * @return void
      */
-    public static function headerJs($js)
+    public static function headerJs($js, bool $merge = true)
     {
-        static::asset()->headerJs($js);
+        static::asset()->headerJs($js, $merge);
     }
 
     /**