Basic use of tables

Simple Example

The Dcat\Admin\Grid class is used to generate a table based on the data model, starting with an example where there is a movies table in the database

  1. CREATE TABLE `movies` (
  2.   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  3.   `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  4.   `director` int(10) unsigned NOT NULL,
  5.   `describe` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  6.   `rate` tinyint unsigned NOT NULL,
  7.   `released` enum(0, 1),
  8.   `release_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  9.   `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  10.   `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  11.   PRIMARY KEY (`id`)
  12. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

The corresponding data model is App\Admin\Repositories\Movie and the corresponding data warehouse is App\Admin\Repositories\Movie with the following repository code.

{tip} If your data comes from MySQL, then repository is not necessary, you can also just use Model.

  1. <?php
  3. namespace App\Admin\Repositories;
  5. use Dcat\Admin\Repositories\EloquentRepository;
  6. use App\Models\Movie as MovieModel;
  8. class Movie extends EloquentRepository
  9. {
  10.     protected $eloquentClass = MovieModel::class;
  12.     /**
  13.      * Set the fields to be queried in the table, and query all fields by default.
  14.      * 
  15.      * @return array
  16.      */
  17.     public function getGridColumns(){
  18.         return ['id', 'title', 'director', 'rate', ...];
  19.     }
  20. }

The following code generates the data table for table movies：

  1. <?php
  3. namespace App\Admin\Controllers;
  5. use App\Admin\Repositories\Movie;
  6. use Dcat\Admin\Grid;
  7. use Dcat\Admin\Controllers\AdminController;
  9. class MovieController extends AdminController
  10. {
  11.     protected function grid()
  12.     {
  13.         return Grid::make(new Movie(), function (Grid $grid) {
  14.             // The first column displays the id field and sets this column as a rankable sequence.
  15.             $grid->column('id', 'ID')->sortable();
  17.             // The second column shows the title field, since the name of the title field conflicts with the title method of the Grid object, so use the column() method of the Grid instead.
  18.             $grid->column('title');
  20.             // The third column will display the director field and the contents of this column can be set to the user name in the users table by displaying($callback)
  21.             $grid->column('director')->display(function($userId) {
  22.                 return User::find($userId)->name;
  23.             });
  25.             // The fourth column is shown as the describe field
  26.             $grid->column('describe');
  28.             // The fifth column is shown as the rate field
  29.             $grid->column('rate');
  31.             // The sixth column displays the released field, which is formatted to display the output via the display($callback) method.
  32.             $grid->column('released', 'shown?')->display(function ($released) {
  33.                 return $released ? 'yes' : 'no';
  34.             });
  36.             // The following columns are displayed for the three time fields
  37.             $grid->column('release_at');
  38.             $grid->column('created_at');
  39.             $grid->column('updated_at');
  41.             // The filter($callback) method is used to set the table's simple search box.
  42.             $grid->filter(function ($filter) {
  43.                 // Set the range query for the created_at field
  44.                 $filter->between('created_at', 'Created Time')->datetime();
  45.             });
  46.         });
  47.     }
  48. }

Table display mode

table_collapse

Starting in this release, the default table layout will be in table_collapse mode, with the following result

Basic use of tables - 图1 Basic use of tables - 图2

If you want to switch back to the old table layout, you can add to app/Admin/bootstrap.php the following

  1. Grid::resolving(function (Grid $grid) {
  2.     $grid->tableCollapse(false);
  3. });

Border mode

You can make the table display a border by withBorder method.

  1. $grid->withBorder();

result Basic use of tables - 图3

Disable border mode

  1. $grid->withBorder(false);

Basic usage

Adding columns (column)

  1. // Add single column
  2. $grid->column('username', 'Name');
  4. // Add multiple columns
  5. $grid->columns('email', 'username' ...);

Modify source data

  1. $grid->model()->where('id', '>', 100);
  3. $grid->model()->orderBy('profile.age');
  5. // Recycle bin data
  6. $grid->model()->onlyTrashed();
  8. ...

It is also possible to use the following

  1. protected function grid()
  2. {
  3.     return Grid::make(Model::with('...')->where(...), function (Grid $grid) {
  4.         ...
  5.     });
  6. }

Other query methods can be found in the eloquent query method

Modify display output (display)

  1. $grid->column('text')->display(function($text) {
  2.     return str_limit($text, 30, '...');
  3. });
  5. // Allows mixing of multiple "display" methods
  6. $grid->column('name')->display(function ($name) {
  7.      return "<b>$name</b>";
  8.  })->display(function ($name) {
  9.     return "<span class='label'>$name</span>";
  10. });
  12. $grid->column('email')->display(function ($email) {
  13.     return "mailto:$email";
  14. });
  16. // You can write strings directly
  17. $grid->column('username')->display('...');
  19. // Adding non-existent fields
  20. $grid->column('column_not_in_table')->display(function () {
  21.     return 'blablabla....'.$this->id;
  22. });

Display number (number)

The number method allows you to add a row number column starting with 1 to the table.

  1. $grid->number();

Set name (setName)

When there are multiple Grid tables on the page, you need to set different names for the table, otherwise some of the functions may conflict!

  1. $grid->setName('name1');

Get current row data (row)

The display() method receives an anonymous function that binds the data object of the current row, in which other field data of the current row can be called.

  1. $grid->column('first_name');
  2. $grid->column('last_name');
  4. // Non-existent field columns
  5. $grid->column('full_name')->display(function () {
  6.     return $this->first_name.' '.$this->last_name;
  7. });

Set toolbar button styles

The toolbar buttons show outline mode by default, with the following result

Usage

  1. $grid->toolsWithOutline();
  3. // Outline Surpressed
  4. $grid->toolsWithOutline(false);

result Basic use of tables - 图4

Result after disabling outline:

Basic use of tables - 图5

If you don’t want a button to use outline mode, you can add disable-outline to the button’s class attribute

  1. $grid->tools('<a class="btn btn-primary disable-outline">测试按钮</a>');

Set create button

This feature is enabled by default

  1. // Disable Create Button
  2. $grid->disableCreateButton();
  3. // show
  4. $grid->showCreateButton();

opens a pop-up window to create a form

This feature is not enabled by default

  1. $grid->enableDialogCreate();
  3. // Set popup width and height, default value is '700px', '670px'.
  4. $grid->setDialogFormDimensions('50%', '50%');

Modify the routing of the Create and Update buttons (setResource)

Set the route prefix for the Modify Create and Update buttons.

  1. $grid->setResource('auth/users');

Set the query filter

This feature is enabled by default.

  1. // Disable
  2. $grid->disableFilter();
  3. // Display
  4. $grid->showFilter();
  6. // Disable filter button
  7. $grid->disableFilterButton();
  8. // Display filter button
  9. $grid->showFilterButton();

line selector (rowSelector)

  1. // Disable
  2. $grid->disableRowSelector();
  3. // show
  4. $grid->showRowSelector();

Set the title field of the selected middle row

If not set, the default is name, title, username.

  1. $grid->column('full_name');
  2. $grid->column('age');
  4. ...
  6. $grid->rowSelector()->titleColumn('full_name');

Set the ID field of the selected middle row.

Set the fields to be saved when selected, default is the Data Table Primary Key (id) field.

  1. $grid->column('new_id');
  3. ...
  5. $grid->rowSelector()->idColumn('new_id');

Set the checkbox selection box color

Default primary, support: default, primary, success, info, danger, purple, inverse.

  1. $grid->rowSelector()->style('success');

Click anywhere in the current row to select

This feature is not enabled by default

  1. $grid->rowSelector()->click();

Set the background color of selected rows

  1. use Dcat\Admin\Admin;
  3. $grid->rowSelector()->background(Admin::color()->dark20());

set default check (check)

Since v2.0.21

The check method allows you to set the default selected row, which accepts an array type or an anonymous function argument

  1. // Set the default check for rows 1/3/5
  2. $grid->rowSelector()->check([0, 2, 4]);
  4. // Pass the closure
  5. $grid->rowSelector()->check(function () {
  6.     // set the default to check rows 1/3/5
  7.     return in_array($this->_index, [0, 2, 4]);
  8. });
  10. // Use other fields of the current row in the closure
  11. $grid->rowSelector()->check(function () {
  12.     // set the default to check rows with id > 10
  13.     return $this->id > 10;
  14. });

Disable changing the check state (disable)

Since v2.0.21

The disable method allows you to set the row whose selected state is disabled, and accepts an array type or an anonymous function argument

  1. // disable row 1/3/5 from changing selection status
  2. $grid->rowSelector()->disable([0, 2, 4]);
  4. // Pass the closure
  5. $grid->rowSelector()->disable(function () {
  6.     // disable row 1/3/5 from changing selection status
  7.     return in_array($this->_index, [0, 2, 4]);
  8. });
  10. // Use other fields of the current row in the closure
  11. $grid->rowSelector()->disable(function () {
  12.     // disable the selected state for rows with id > 10
  13.     return $this->id > 10;
  14. });
  16. // disable can be used in conjunction with the check method
  17. $grid->rowSelector()->check([2, 4])->disable([0, 2, 4]);

Set row action buttons

  1. // Disable
  2. $grid->disableActions();
  3. // Show
  4. $grid->showActions();
  6. // Disable details button
  7. $grid->disableViewButton();
  8. // Show details button
  9. $grid->showViewButton();
  11. // Disable Edit Button
  12. $grid->disableEditButton();
  13. // Show edit button
  14. $grid->showEditButton();
  16. // Disable Quick Edit Button
  17. $grid->disableQuickEditButton();
  18. // Show quick edit buttons
  19. $grid->showQuickEditButton();
  21. // Set the width and height of the popup window, default value is '700px', '670px'
  22. $grid->setDialogFormDimensions('50%', '50%');
  25. // Disable the delete button
  26. $grid->disableDeleteButton();
  27. // Show delete button
  28. $grid->showDeleteButton();

Set the batchActions button (batchActions)

  1. // Disable
  2. $grid->disableBatchActions();
  3. // show
  4. $grid->showBatchActions();
  6. // 禁用批量删除按钮
  7. $grid->disableBatchDelete();
  8. // 显示批量删除按钮
  9. $grid->showBatchDelete();

Setting the toolbar (toolbar)

  1. // Disable
  2. $grid->disableToolbar();
  3. // show
  4. $grid->showToolbar();

Setting the refresh button (refresh)

  1. // Disable
  2. $grid->disableRefreshButton();
  3. // show
  4. $grid->showRefreshButton();

Setting up pagination (paginate)

  1. // Disable
  2. $grid->disablePagination();
  3. // show
  4. $grid->showPagination();

Simple Pagination (simplePaginate)

Enabling the simplePaginate function will use the simplePaginate function of Laravel for pagination, which can greatly improve the page response speed when the data volume is large. However, it is important to note that the total rows of the data table will not be queried after using this feature.

  1. // Enable
  2. $grid->simplePaginate();
  4. // Disable
  5. $grid->simplePaginate(false);

Set the number of rows per page

  1. // Default is 20 items per page
  2. $grid->paginate(15);

Set pagination selector options

  1. $grid->perPages([10, 20, 30, 40, 50]);
  3. // Disable pagination selector
  4. $grid->disablePerPages();

addTableClass

The css style can be added to table table through addTableClass.

  1. $grid->addTableClass(['class1', 'class2']);

Set table text centering (text-center)

  1. $grid->addTableClass(['table-text-center']);

Show horizontal scrollbar (scrollbarX)

Show the horizontal scrollbar of the table, which is not displayed by default

  1. // Enable
  2. $grid->scrollbarX();
  4. // Disable
  5. $grid->scrollbarX(false);

Setting the form outer container

  1.  // Change the table outer container
  2. $grid->wrap(function (Renderable $view) {
  3.     $tab = Tab::make();
  5.     $tab->add('example', $view);
  6.     $tab->add('code', $this->code(), true);
  8.     return $tab;
  9. });

Relationship model

Reference table-relationship