Grid::scrollbarX

resources/assets/dcat/sass/components/_grid.scss

@@ -1,144 +1,153 @@
-.grid-column-header {
-  a {
-    color: darken($dark70, 5%);
-    font-size: 1rem;
-  }
-  a:hover, a.active {
-    color: $primary-darker;
-  }
-}
-// 排序图标
-.grid-sort {
-  display: inline-block;
-  margin: -2px -4px 0 3px;
-  height: 15px;
-
-  .up:before {
-    font-family: "feather";
-    padding-right: 0.3rem;
-    font-size: 0.7rem;
-    content: "\E845";
-  }
-
-  .down {
-    margin: 6px 0 0 -1.17rem;
-  }
-  .down:after {
-    font-family: "feather";
-    content: "\E842";
-    font-size: 0.7rem;
-  }
-}
-
-.dcat-box.card {
-  margin-bottom: 0;
-
-  .card-header {
-    border-bottom: 0;
-    padding: 1.3rem 1.5rem;
-    margin-bottom: .5rem;
-  }
-
-  .card-body {
-    padding: 1rem 0 0;
-  }
-
-  .box-footer {
-    border:0;
-    padding: 1rem 1.5rem 1.3rem;
-  }
-}
-
-// 过滤器滑动面板
-.right-side-filter-container .header {
-  border-bottom: 1px solid $divider-color;
-  width: 100%;
-  background: #fff;
-  z-index: 10;
-  top: 0;
-  margin-left: -1rem;
-}
-
-// 快捷新增
-.quick-create {
-  td {
-    padding-left: 45px;
-    background-color: #f3f3f3;
-    vertical-align: middle;
-    //border-radius: .5rem;
-    height: 42px;
-    color: #777;
-    border-bottom: $table-border-color;
-  }
-}
-
-
-.grid-modal {
-  .modal-body {
-    //background:$body-bg;
-    padding:1.5rem
-  }
-}
-
-.simple-grid {
-  .filter-box {
-    background: transparent;
-    box-shadow: none!important;
-    padding: 0!important;
-    margin: .5rem 0 -1rem!important;
-    padding-bottom: 0!important;
-
-    .form-group {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .dcat-box.card {
-    .card-header {
-      padding: .8rem 0
-    }
-
-    .box-footer {
-      padding: 1rem 1.5rem 0;
-    }
-  }
-}
-
-body:not(.dark-mode) .simple-grid {
-  .card {
-    box-shadow: none;
-  }
-
-  .table-collapse {
-    box-shadow: none;
-    background: transparent;
-    //border: 1px solid #ededf1!important;
-    .custom-data-table {
-      background: transparent;
-    }
-
-    .custom-data-table.data-table tbody td {
-      height: 48px;
-    }
-
-    .custom-data-table.data-table thead th {
-      height: 20px;
-    }
-
-    .custom-data-table {
-      padding: 5px 0 0;
-      //border-top: 1px solid $table-border-color;
-      border-bottom: 1px solid $table-border-color;
-    }
-
-    table.data-table thead tr:last-child th {
-      border-bottom: 2px solid $table-border-color;
-    }
-  }
-
-}
-
-.vs-checkbox-con.checkbox-grid-column input:disabled + .vs-checkbox {
-  cursor: not-allowed;
-  opacity: 0.33;
-}
+.grid-column-header {
+  a {
+    color: darken($dark70, 5%);
+    font-size: 1rem;
+  }
+  a:hover, a.active {
+    color: $primary-darker;
+  }
+}
+// 排序图标
+.grid-sort {
+  display: inline-block;
+  margin: -2px -4px 0 3px;
+  height: 15px;
+
+  .up:before {
+    font-family: "feather";
+    padding-right: 0.3rem;
+    font-size: 0.7rem;
+    content: "\E845";
+  }
+
+  .down {
+    margin: 6px 0 0 -1.17rem;
+  }
+  .down:after {
+    font-family: "feather";
+    content: "\E842";
+    font-size: 0.7rem;
+  }
+}
+
+.dcat-box.card {
+  margin-bottom: 0;
+
+  .card-header {
+    border-bottom: 0;
+    padding: 1.3rem 1.5rem;
+    margin-bottom: .5rem;
+  }
+
+  .card-body {
+    padding: 1rem 0 0;
+  }
+
+  .box-footer {
+    border:0;
+    padding: 1rem 1.5rem 1.3rem;
+  }
+}
+
+.table-responsive.table-scrollbar-x {
+    overflow-x: auto;
+    /*width: max-content;*/
+}
+.table-responsive.table-scrollbar-x .table {
+    width: max-content;
+    min-width: 100%;
+}
+
+// 过滤器滑动面板
+.right-side-filter-container .header {
+  border-bottom: 1px solid $divider-color;
+  width: 100%;
+  background: #fff;
+  z-index: 10;
+  top: 0;
+  margin-left: -1rem;
+}
+
+// 快捷新增
+.quick-create {
+  td {
+    padding-left: 45px;
+    background-color: #f3f3f3;
+    vertical-align: middle;
+    //border-radius: .5rem;
+    height: 42px;
+    color: #777;
+    border-bottom: $table-border-color;
+  }
+}
+
+
+.grid-modal {
+  .modal-body {
+    //background:$body-bg;
+    padding:1.5rem
+  }
+}
+
+.simple-grid {
+  .filter-box {
+    background: transparent;
+    box-shadow: none!important;
+    padding: 0!important;
+    margin: .5rem 0 -1rem!important;
+    padding-bottom: 0!important;
+
+    .form-group {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .dcat-box.card {
+    .card-header {
+      padding: .8rem 0
+    }
+
+    .box-footer {
+      padding: 1rem 1.5rem 0;
+    }
+  }
+}
+
+body:not(.dark-mode) .simple-grid {
+  .card {
+    box-shadow: none;
+  }
+
+  .table-collapse {
+    box-shadow: none;
+    background: transparent;
+    //border: 1px solid #ededf1!important;
+    .custom-data-table {
+      background: transparent;
+    }
+
+    .custom-data-table.data-table tbody td {
+      height: 48px;
+    }
+
+    .custom-data-table.data-table thead th {
+      height: 20px;
+    }
+
+    .custom-data-table {
+      padding: 5px 0 0;
+      //border-top: 1px solid $table-border-color;
+      border-bottom: 1px solid $table-border-color;
+    }
+
+    table.data-table thead tr:last-child th {
+      border-bottom: 2px solid $table-border-color;
+    }
+  }
+
+}
+
+.vs-checkbox-con.checkbox-grid-column input:disabled + .vs-checkbox {
+  cursor: not-allowed;
+  opacity: 0.33;
+}

resources/views/grid/table.blade.php

@@ -9,7 +9,7 @@
 
     {!! $grid->renderHeader() !!}
 
-    <div class="table-responsive {{ $grid->option('table_collapse') ? 'table-collapse' : '' }} table-wrapper complex-container table-middle mt-1">
+    <div class="{!! $grid->formatTableParentClass() !!}">
         <table class="{{ $grid->formatTableClass() }}" id="{{ $tableId }}" >
             <thead>
             @if ($headers = $grid->getVisibleComplexHeaders())

src/Grid.php

@@ -167,6 +167,7 @@ class Grid
         'create_mode'       => self::CREATE_MODE_DEFAULT,
         'dialog_form_area'  => ['700px', '670px'],
         'table_class'       => ['table', 'custom-data-table', 'data-table'],
+        'scrollbar_x'       => false,
     ];
 
     /**
@@ -930,6 +931,31 @@ HTML;
         return $this;
     }
 
+    /**
+     * 是否显示横向滚动条.
+     *
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function scrollbarX(bool $value = true)
+    {
+        $this->options['scrollbar_x'] = $value;
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    public function formatTableParentClass()
+    {
+         $tableCollaps = $this->option('table_collapse') ? 'table-collapse' : '';
+         $scrollbarX = $this->option('scrollbar_x') ? 'table-scrollbar-x' : '';
+
+         return "table-responsive table-wrapper complex-container table-middle mt-1 {$tableCollaps} {$scrollbarX}";
+    }
+
     /**
      * Get the string contents of the grid view.
      *