wip - fix column

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

@@ -0,0 +1,146 @@
+<div class="dcat-box custom-data-table dt-bootstrap4">
+    @if ($grid->allowToolbar())
+        <div class="custom-data-table-header">
+            <div class="table-responsive">
+                <div class="top d-block clearfix p-0">
+                    @if(!empty($title))
+                        <h4 class="pull-left" style="margin:5px 10px 0;">
+                            {!! $title !!}&nbsp;
+                            @if(!empty($description))
+                                <small>{!! $description!!}</small>
+                            @endif
+                        </h4>
+                        <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
+                            {!! $grid->renderTools() !!} {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}  {!! $grid->renderQuickSearch() !!}
+                        </div>
+                    @else
+                        {!! $grid->renderTools() !!}  {!! $grid->renderQuickSearch() !!}
+
+                        <div class="pull-right" data-responsive-table-toolbar="{{$tableId}}">
+                            {!! $grid->renderCreateButton() !!} {!! $grid->renderExportButton() !!}
+                        </div>
+                    @endif
+                </div>
+            </div>
+        </div>
+    @endif
+
+    {!! $grid->renderFilter() !!}
+
+    {!! $grid->renderHeader() !!}
+
+    <div class="table-responsive table-wrapper">
+        <div class="tables-container">
+            <div class="table-wrap table-main">
+                <table class="custom-data-table dataTable {{ $grid->formatTableClass() }}" id="{{ $tableId }}">
+                    <thead>
+                    @if ($headers = $grid->getComplexHeaders())
+                        <tr>
+                            @foreach($headers as $header)
+                                {!! $header->render() !!}
+                            @endforeach
+                        </tr>
+                    @endif
+                    <tr>
+                        @foreach($grid->columns() 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->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>
+                        </tr>
+                    @endif
+                    </tbody>
+                </table>
+            </div>
+
+            @if($grid->leftVisibleColumns()->isNotEmpty())
+                <div class="table-wrap table-fixed table-fixed-left">
+                    <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
+                        <thead>
+                        <tr>
+                            @foreach($grid->leftVisibleColumns() as $column)
+                                <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                            @endforeach
+                        </tr>
+                        </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())
+                <div class="table-wrap table-fixed table-fixed-right">
+                    <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
+                        <thead>
+                        <tr>
+                            @foreach($grid->rightVisibleColumns() as $column)
+                                <th {!! $column->formatTitleAttributes() !!}>{!! $column->getLabel() !!}{!! $column->renderHeader() !!}</th>
+                            @endforeach
+                        </tr>
+                        </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() !!}
+
+    @if ($paginator = $grid->paginator())
+        <div class="box-footer clearfix " style="padding-bottom:5px;">
+            {!! $paginator->render() !!}
+        </div>
+    @else
+        <div class="box-footer clearfix text-80 " style="height:48px;line-height:25px;">
+            @if ($grid->rows()->isEmpty())
+                {!! trans('admin.pagination.range', ['first' => '<b>0</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
+            @else
+                {!! trans('admin.pagination.range', ['first' => '<b>1</b>', 'last' => '<b>'.$grid->rows()->count().'</b>', 'total' => '<b>'.$grid->rows()->count().'</b>',]) !!}
+            @endif
+        </div>
+    @endif
+</div>

src/Grid.php

@@ -31,6 +31,7 @@ class Grid
         Concerns\HasSelector,
         Concerns\HasQuickCreate,
         Concerns\HasQuickSearch,
+        Concerns\CanFixColumns,
         Macroable {
             __call as macroCall;
         }
@@ -898,6 +899,8 @@ HTML;
             $this->callComposing();
 
             $this->build();
+
+            $this->applyFixColumns();
         } catch (\Throwable $e) {
             return Admin::makeExceptionHandler()->handle($e);
         }

src/Grid/Concerns/CanFixColumns.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Dcat\Admin\Grid\Concerns;
+
+use Dcat\Admin\Grid\FixColumns;
+use Illuminate\Support\Collection;
+
+trait CanFixColumns
+{
+    /**
+     * @var FixColumns
+     */
+    protected $fixColumns;
+
+    /**
+     * @param int $head
+     * @param int $tail
+     *
+     * @return $this
+     */
+    public function fixColumns(int $head, int $tail = -1)
+    {
+        $this->fixColumns = new FixColumns($this, $head, $tail);
+
+        return $this;
+    }
+
+    protected function applyFixColumns()
+    {
+        if ($this->fixColumns) {
+            $this->withBorder();
+
+            $this->fixColumns->apply();
+        }
+    }
+
+    /**
+     * @return Collection
+     */
+    public function leftVisibleColumns()
+    {
+        return $this->fixColumns->leftColumns();
+    }
+
+    /**
+     * @return Collection
+     */
+    public function rightVisibleColumns()
+    {
+        return $this->fixColumns->rightColumns();
+    }
+}

src/Grid/FixColumns.php

@@ -0,0 +1,204 @@
+<?php
+
+namespace Dcat\Admin\Grid;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Grid;
+use Illuminate\Support\Collection;
+
+class FixColumns
+{
+    /**
+     * @var Grid
+     */
+    protected $grid;
+
+    /**
+     * @var int
+     */
+    protected $head;
+
+    /**
+     * @var int
+     */
+    protected $tail;
+
+    /**
+     * @var Collection
+     */
+    protected $left;
+
+    /**
+     * @var Collection
+     */
+    protected $right;
+
+    /**
+     * @var string
+     */
+    protected $view = 'admin::grid.fixed-table';
+
+    /**
+     * FixColumns constructor.
+     *
+     * @param Grid $grid
+     * @param int  $head
+     * @param int  $tail
+     */
+    public function __construct(Grid $grid, $head, $tail = -1)
+    {
+        $this->grid = $grid;
+        $this->head = $head;
+        $this->tail = $tail;
+
+        $this->left = Collection::make();
+        $this->right = Collection::make();
+    }
+
+    /**
+     * @return Collection
+     */
+    public function leftColumns()
+    {
+        return $this->left;
+    }
+
+    /**
+     * @return Collection
+     */
+    public function rightColumns()
+    {
+        return $this->right;
+    }
+
+    /**
+     * @return \Closure
+     */
+    public function apply()
+    {
+        $this->grid->view($this->view);
+
+        if ($this->head > 0) {
+            $this->left = $this->grid->columns()->slice(0, $this->head);
+        }
+
+        if ($this->tail < 0) {
+            $this->right = $this->grid->columns()->slice($this->tail);
+        }
+
+        $this->addStyle();
+        $this->addScript();
+    }
+
+    /**
+     * @return $this
+     */
+    protected function addScript()
+    {
+        $allName = $this->grid->getSelectAllName();
+        //$rowName = $this->grid->getGridRowName();
+
+        $selected = trans('admin.grid_items_selected');
+
+        $script = <<<JS
+
+(function () {
+    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 ($('.table-main').width() >= $('.table-main').prop('scrollWidth')) {
+        $('.table-fixed').hide();
+    }
+    
+    $('.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');
+    });
+})();
+
+JS;
+
+        Admin::script($script, true);
+
+        return $this;
+    }
+
+    /**
+     * @return $this
+     */
+    protected function addStyle()
+    {
+        $style = <<<'CSS'
+.tables-container {
+    position:relative;
+}
+
+.tables-container table {
+    margin-bottom: 0 !important;
+}
+
+.tables-container table th, .tables-container table td {
+    white-space:nowrap;
+}
+
+.table-wrap table tr .active {
+    background: #f5f5f5;
+}
+
+.table-main {
+    overflow-x: auto;
+    width: 100%;
+}
+
+.table-fixed {
+    position:absolute;
+	top: 0;
+	z-index:10;
+}
+
+.table-fixed th {
+    background: #eff3f8;
+}
+
+.table-fixed-left {
+	left:0;
+}
+
+.table-fixed-right {
+	right:0;
+}
+
+.table-fixed-left table {
+ box-shadow: 5px 0 5px -5px rgba(0,0,0,.1);
+}
+
+.table-fixed-right table {
+ box-shadow: -5px 0 5px -5px rgba(0,0,0,.1);
+}
+CSS;
+
+        Admin::style($style);
+
+        return $this;
+    }
+}