数据表格异步渲染

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

@@ -1,25 +1,144 @@
-
-let defaultName = '_def_';
-
-export default class Grid {
-    constructor(Dcat) {
-        Dcat.grid = this;
-
-        this.selectors = {};
-    }
-
-    // 添加行选择器对象
-    addSelector(selector, name) {
-        this.selectors[name || defaultName] = selector
-    }
-
-    // 获取行选择器选中的ID字符串
-    selected(name) {
-        return this.selectors[name || defaultName].getSelectedKeys()
-    }
-
-    // 获取行选择器选中的行
-    selectedRows(name) {
-        return this.selectors[name || defaultName].getSelectedRows()
-    }
-}
+
+let defaultName = '_def_';
+
+export default class Grid {
+    constructor(Dcat) {
+        Dcat.grid = this;
+
+        this.selectors = {};
+    }
+
+    // 添加行选择器对象
+    addSelector(selector, name) {
+        this.selectors[name || defaultName] = selector
+    }
+
+    // 获取行选择器选中的ID字符串
+    selected(name) {
+        return this.selectors[name || defaultName].getSelectedKeys()
+    }
+
+    // 获取行选择器选中的行
+    selectedRows(name) {
+        return this.selectors[name || defaultName].getSelectedRows()
+    }
+
+    async(options) {
+        return new AsyncGrid(options);
+    }
+}
+
+class AsyncGrid {
+    constructor(options) {
+        options = $.extend({
+            selector: null,
+            bodySelector: '.async-body',
+            tableSelector: '.async-table',
+            queryName: null,
+            url: null,
+            loadingStyle: 'height:240px;',
+        }, options);
+
+        var self = this,
+            $box = $(options.selector),
+            $body = $box.find(options.bodySelector);
+
+        self.options = options;
+        self.$box = $box;
+        self.$body = $body;
+        self.loading = false;
+    }
+
+    render(url) {
+        let self = this, options = self.options;
+
+        url = url || options.url;
+
+        if (self.loading || url.indexOf('javascript:') !== -1) {
+            return;
+        }
+        self.loading = true;
+
+        let $box = self.$box,
+            $body = self.$body,
+            reqName = options.queryName,
+            tableSelector = options.tableSelector;
+
+        // loading效果
+        let loadingOptions = {background: 'transparent'}
+        if ($body.find(`${tableSelector} tbody tr`).length <= 2) {
+            loadingOptions['style'] = options.loadingStyle;
+        }
+        $body.find(tableSelector).loading(loadingOptions);
+        Dcat.NP.start();
+
+        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) {
+            self.loading = false;
+            Dcat.NP.done();
+
+            $body.html(html);
+
+            let refresh = function () {
+                self.render($box.data('current'));
+            };
+
+            // 表格渲染事件
+            $body.off('grid:render').on('grid:render', refresh);
+            $body.find('table').on('grid:render', refresh);
+
+            // 刷新按钮
+            $box.find('.grid-refresh').off('click').on('click', function () {
+                refresh();
+
+                return false;
+            });
+
+            // 分页
+            $box.find('.pagination .page-link').on('click', loadLink);
+            // 页选择器
+            $box.find('.per-pages-selector .dropdown-item a').on('click', loadLink);
+            // 表头url
+            $box.find('.grid-column-header a').on('click', loadLink);
+
+            // 快捷搜索、表头搜索以及过滤器筛选
+            $box.find('form').off('submit').on('submit', function () {
+                var action = $(this).attr('action');
+
+                if ($(this).attr('method') === 'post') {
+                    return;
+                }
+
+                if (action.indexOf('?') === -1) {
+                    action += '?';
+                }
+
+                self.render(action+'&'+$(this).serialize());
+
+                return false;
+            });
+
+            $box.find('.filter-box .reset').on('click', loadLink);
+
+            // 规格选择器
+            $box.find('.grid-selector a').on('click', loadLink);
+        });
+
+        function loadLink() {
+            self.render($(this).attr('href'));
+
+            return false;
+        }
+    }
+}

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

@@ -0,0 +1,200 @@
+@if($grid->isAsyncRequest())
+    {!! $grid->renderHeader() !!}
+
+    <div class="table-responsive table-wrapper {{ $grid->option('table_collapse') ? 'table-collapse' : '' }}">
+        <div class="tables-container">
+            <div class="table-wrap table-main" data-height="{{ $tableHeight }}">
+                <table class="custom-data-table async-table {{ $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>
+
+                    @if ($grid->hasQuickCreate())
+                        {!! $grid->renderQuickCreate() !!}
+                    @endif
+
+                    <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>
+
+            @if ($grid->leftVisibleColumns()->isNotEmpty() || $grid->leftVisibleComplexColumns()->isNotEmpty())
+                <div class="table-wrap table-fixed table-fixed-left" data-height="{{ $tableHeight }}">
+                    <table class="custom-data-table  {{ $grid->formatTableClass() }} ">
+                        <thead>
+
+                        @if ($grid->getVisibleComplexHeaders())
+                            <tr>
+                                @foreach($grid->leftVisibleComplexColumns() as $header)
+                                    {!! $header->render() !!}
+                                @endforeach
+                            </tr>
+                            <tr>
+                                @foreach($grid->leftVisibleComplexColumns() as $header)
+                                    @if ($header->getColumnNames()->count() > 1)
+                                        @foreach($header->columns() as $column)
+                                            <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                                        @endforeach
+                                    @endif
+                                @endforeach
+                            </tr>
+                        @else
+                            <tr>
+                                @foreach($grid->leftVisibleColumns() as $column)
+                                    <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                                @endforeach
+                            </tr>
+                        @endif
+                        </thead>
+                        <tbody>
+
+                        @foreach($grid->rows() as $row)
+                            <tr {!! $row->rowAttributes() !!}>
+                                @foreach($grid->leftVisibleColumns() as $column)
+                                    <td {!! $row->columnAttributes($column->getName()) !!}>
+                                        {!! $row->column($column->getName()) !!}
+                                    </td>
+                                @endforeach
+                            </tr>
+                        @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            @endif
+
+            @if ($grid->rightVisibleColumns()->isNotEmpty() || $grid->rightVisibleComplexColumns()->isNotEmpty())
+                <div class="table-wrap table-fixed table-fixed-right" data-height="{{ $tableHeight }}">
+                    <table class="custom-data-table  {{ $grid->formatTableClass() }} ">
+                        <thead>
+                        @if ($grid->getVisibleComplexHeaders())
+                            <tr>
+                                @foreach($grid->rightVisibleComplexColumns() as $header)
+                                    {!! $header->render() !!}
+                                @endforeach
+                            </tr>
+                            <tr>
+                                @foreach($grid->rightVisibleComplexColumns() as $header)
+                                    @if ($header->getColumnNames()->count() > 1)
+                                        @foreach($header->columns() as $column)
+                                            <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                                        @endforeach
+                                    @endif
+                                @endforeach
+                            </tr>
+                        @else
+                            <tr>
+                                @foreach($grid->rightVisibleColumns() as $column)
+                                    <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                                @endforeach
+                            </tr>
+                        @endif
+
+                        </thead>
+
+                        <tbody>
+
+                        @foreach($grid->rows() as $row)
+                            <tr {!! $row->rowAttributes() !!}>
+                                @foreach($grid->rightVisibleColumns() as $column)
+                                    <td {!! $row->columnAttributes($column->getName()) !!}>
+                                        {!! $row->column($column->getName()) !!}
+                                    </td>
+                                @endforeach
+                            </tr>
+                        @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            @endif
+        </div>
+    </div>
+
+    {!! $grid->renderFooter() !!}
+
+    {!! $grid->renderPagination() !!}
+@else
+<div class="dcat-box custom-data-table async-{{ $tableId }}">
+    @include('admin::grid.table-toolbar')
+
+    {!! $grid->renderFilter() !!}
+
+    <div class="async-body">
+        {!! $grid->renderHeader() !!}
+
+        <div class="table-responsive table-wrapper {{ $grid->option('table_collapse') ? 'table-collapse' : '' }}">
+            <div class="tables-container">
+                <div class="table-wrap table-main" data-height="{{ $tableHeight }}">
+                    <table class="custom-data-table async-table {{ $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>
+
+                        @if ($grid->hasQuickCreate())
+                            {!! $grid->renderQuickCreate() !!}
+                        @endif
+
+                        <tbody>
+                            <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>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        {!! $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

@@ -2,7 +2,7 @@
     {!! $grid->renderHeader() !!}
 
     <div class="{!! $grid->formatTableParentClass() !!}">
-        <table class="{{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
+        <table class="async-table {{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
             <thead>
             @if ($headers = $grid->getVisibleComplexHeaders())
                 <tr>
@@ -26,9 +26,7 @@
             @foreach($grid->rows() as $row)
                 <tr {!! $row->rowAttributes() !!}>
                     @foreach($grid->getVisibleColumnNames() as $name)
-                        <td {!! $row->columnAttributes($name) !!}>
-                            {!! $row->column($name) !!}
-                        </td>
+                        <td {!! $row->columnAttributes($name) !!}>{!! $row->column($name) !!}</td>
                     @endforeach
                 </tr>
             @endforeach
@@ -57,8 +55,10 @@
         {!! $grid->renderFilter() !!}
 
         <div class="async-body">
+            {!! $grid->renderHeader() !!}
+
             <div class="{!! $grid->formatTableParentClass() !!}">
-                <table class="{{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
+                <table class="async-table {{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
                     <thead>
                     @if ($headers = $grid->getVisibleComplexHeaders())
                         <tr>
@@ -76,84 +76,23 @@
 
                     <tbody>
                     <tr>
-                        <td colspan="{!! count($grid->getVisibleColumnNames()) !!}">
-                            &nbsp;
-                        </td>
+                        <td colspan="{!! count($grid->getVisibleColumnNames()) !!}">&nbsp;</td>
                     </tr>
                     </tbody>
                 </table>
             </div>
+
+            {!! $grid->renderFooter() !!}
         </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);
+        Dcat.grid.async({
+            selector: '.async-{{ $tableId }}',
+            queryName: '{!! Dcat\Admin\Grid::ASYNC_NAME !!}',
+            url: '{!! $asyncUrl !!}',
+        }).render()
     });
     </script>
 @endif

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

@@ -8,7 +8,7 @@
     <div class="table-responsive table-wrapper {{ $grid->option('table_collapse') ? 'table-collapse' : '' }}">
         <div class="tables-container">
             <div class="table-wrap table-main" data-height="{{ $tableHeight }}">
-                <table class="custom-data-table dataTable {{ $grid->formatTableClass() }}" id="{{ $tableId }}">
+                <table class="custom-data-table {{ $grid->formatTableClass() }}" id="{{ $tableId }}">
                     <thead>
                     @if ($headers = $grid->getVisibleComplexHeaders())
                         <tr>
@@ -51,7 +51,7 @@
 
             @if ($grid->leftVisibleColumns()->isNotEmpty() || $grid->leftVisibleComplexColumns()->isNotEmpty())
                 <div class="table-wrap table-fixed table-fixed-left" data-height="{{ $tableHeight }}">
-                    <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
+                    <table class="custom-data-table {{ $grid->formatTableClass() }} ">
                         <thead>
 
                         @if ($grid->getVisibleComplexHeaders())
@@ -95,7 +95,7 @@
 
             @if ($grid->rightVisibleColumns()->isNotEmpty() || $grid->rightVisibleComplexColumns()->isNotEmpty())
                 <div class="table-wrap table-fixed table-fixed-right" data-height="{{ $tableHeight }}">
-                    <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
+                    <table class="custom-data-table {{ $grid->formatTableClass() }} ">
                         <thead>
                         @if ($grid->getVisibleComplexHeaders())
                             <tr>

resources/views/grid/table.blade.php

@@ -34,9 +34,7 @@
             @foreach($grid->rows() as $row)
                 <tr {!! $row->rowAttributes() !!}>
                     @foreach($grid->getVisibleColumnNames() as $name)
-                        <td {!! $row->columnAttributes($name) !!}>
-                            {!! $row->column($name) !!}
-                        </td>
+                        <td {!! $row->columnAttributes($name) !!}>{!! $row->column($name) !!}</td>
                     @endforeach
                 </tr>
             @endforeach

src/Grid.php

@@ -294,8 +294,7 @@ class Grid
 
             $this->view('admin::grid.async-table');
             $this->addVariables([
-                'currentUrl' => $url,
-                'asyncUrl'   => Helper::urlWithQuery($url, [static::ASYNC_NAME => 1]),
+                'asyncUrl' => Helper::urlWithQuery($url, [static::ASYNC_NAME => 1]),
             ]);
         }
 
@@ -906,9 +905,7 @@ HTML;
      */
     public function with(array $variables)
     {
-        $this->variables = $variables;
-
-        return $this;
+        return $this->addVariables($variables);
     }
 
     /**
@@ -1037,6 +1034,15 @@ HTML;
         return $this->doWrap();
     }
 
+    public function getView()
+    {
+        if ($this->async && $this->hasFixColumns()) {
+            return 'admin::grid.async-fixed-table';
+        }
+
+        return $this->view;
+    }
+
     /**
      * @return string
      */
@@ -1046,7 +1052,7 @@ HTML;
             return;
         }
 
-        $view = view($this->view, $this->variables());
+        $view = view($this->getView(), $this->variables());
 
         if (! $wrapper = $this->wrapper) {
             return $view->render();

src/Grid/Concerns/CanFixColumns.php

@@ -29,6 +29,11 @@ trait CanFixColumns
         return $this->fixColumns;
     }
 
+    public function hasFixColumns()
+    {
+        return $this->fixColumns;
+    }
+
     protected function resetActions()
     {
         $actions = $this->getActionClass();

src/Grid/FixColumns.php

@@ -170,32 +170,32 @@ class FixColumns
 
 (function () {
     var $tableMain = $('.table-main'), minHeight = 600;
-    
+
     var theadHeight = $('.table-main thead tr').outerHeight();
     $('.table-fixed thead tr').outerHeight(theadHeight);
-    
+
     var tfootHeight = $('.table-main tfoot tr').outerHeight();
     $('.table-fixed tfoot tr').outerHeight(tfootHeight);
-    
+
     $('.table-main tbody tr').each(function(i, obj) {
         var height = $(obj).outerHeight();
 
         $('.table-fixed-left tbody tr').eq(i).outerHeight(height);
         $('.table-fixed-right tbody tr').eq(i).outerHeight(height);
     });
-    
+
     if ($tableMain.width() >= $tableMain.prop('scrollWidth') || $(window).width() < 600) {
         $('.table-fixed').hide();
     } else {
         var height = ($(window).height() - 220);
         height = height < minHeight ? minHeight : height;
-        
+
         $tableMain.each(function (k, v) {
             var tableHight = $(v).find('.custom-data-table.table').eq(0).height();
             var maxHeight = $(v).data('height') || (height >= tableHight ? tableHight : height);
-            
+
             $(v).css({'max-height': maxHeight + 'px'});
-            
+
             if (maxHeight < tableHight) {
                 $(v).parents('.tables-container').find('.table-fixed-right').css({right: '12px'})
             }
@@ -203,24 +203,24 @@ class FixColumns
         $('.table-fixed-right,.table-fixed-left').each(function (k, v) {
             $(v).css({'max-height': (($(v).data('height') || height) - 15) + 'px'});
         });
-        
+
         $tableMain.scroll(function () {
-            var self = $(this); 
-            
+            var self = $(this);
+
             self.parents('.tables-container').find('.table-fixed-right,.table-fixed-left').scrollTop(self.scrollTop());
         });
     }
-    
+
     $('.table-wrap tbody tr').on('mouseover', function () {
         var index = $(this).index();
         $('.table-main tbody tr').eq(index).addClass('active');
         $('.table-fixed-left tbody tr').eq(index).addClass('active');
         $('.table-fixed-right tbody tr').eq(index).addClass('active');
     });
-    
+
     $('.table-wrap tbody tr').on('mouseout', function () {
         var index = $(this).index();
-        
+
         $('.table-main tbody tr').eq(index).removeClass('active');
         $('.table-fixed-left tbody tr').eq(index).removeClass('active');
         $('.table-fixed-right tbody tr').eq(index).removeClass('active');