Laravel-admin 列展开 expand 或者 弹出模态

新增App\Admin\Extensions\Column\ExpandRow.php

// 原文件地址 \vendor\encore\laravel-admin\src\Grid\Displayers\Expand.php
<?php

namespace App\Admin\Extensions\Column;

use Encore\Admin\Admin;
use Encore\Admin\Grid\Displayers\AbstractDisplayer;

class ExpandRow extends AbstractDisplayer
{
    public function display(\Closure $callback = null, $isExpand = false)
    {
        static $idx = 0;   // 加序号
        $callback = $callback->bindTo($this->row);

        $html = call_user_func_array($callback, [$this->row]);

        $this->addScript($isExpand);

//        $key = $this->column->getName().'-'.$this->getKey();
        $key = $this->getKey().'-'.$idx++;  // 修改序号

        return <<<EOT
<span class="{$this->getElementClass()}" data-inserted="0" data-key="{$key}" data-toggle="collapse" data-target="#grid-collapse-{$key}">
   <a href="javascript:void(0)"><i class="fa fa-angle-double-down"></i>&nbsp;&nbsp;{$this->value}</a>
</span>
<template class="grid-expand-{$key}">
    <div id="grid-collapse-{$key}" class="collapse">
        <div  style="padding: 10px 10px 0 10px;">$html</div>
    </div>
</template>
EOT;
    }

    protected function addScript($isExpand)
    {
        $script = <<<EOT

$('.{$this->getElementClass()}').on('click', function () {
    
    if ($(this).data('inserted') == '0') {
    
        var key = $(this).data('key');
        var row = $(this).closest('tr');
        var html = $('template.grid-expand-'+key).html();

        row.after("<tr style='background-color: #ecf0f5;'><td colspan='"+(row.find('td').length)+"' style='padding:0 !important; border:0;'>"+html+"</td></tr>");

        $(this).data('inserted', 1);
    }
    
    $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
});
EOT;

        if ($isExpand) {
            $script .= "$('.{$this->getElementClass()}').trigger('click');";
        }

        Admin::script($script);
    }

    /**
     * @return string
     */
    protected function getElementClass()
    {
        return "grid-expand-{$this->grid->getGridRowName()}";
    }
}

在App\Admin\bootstrap.php中添加

use App\Admin\Extensions\Column\ExpandRow;
use Encore\Admin\Grid\Column;
Column::extend ('expand', ExpandRow::class);

同理modal弹出模态框也一样

新增App\Admin\Extensions\Column\ModalRow.php

// 原文件地址 \vendor\encore\laravel-admin\src\Grid\Displayers\Modal.php
<?php

namespace App\Admin\Extensions\Column;

use Encore\Admin\Grid\Displayers\AbstractDisplayer;

class ModalRow extends AbstractDisplayer
{
    public function display($callback = null)
    {
        static $idx = 0;   // 加序号
        if (func_num_args() == 2) {
            list($title, $callback) = func_get_args();
        } elseif (func_num_args() == 1) {
            $title = $this->trans('title');
        }

        $callback = $callback->bindTo($this->row);

        $html = call_user_func_array($callback, [$this->row]);

//        $key = $this->getKey().'-'.str_replace('.', '_', $this->getColumn()->getName());
        $key = $this->getKey().'-'.$idx++;  // 修改序号

        return <<<EOT
<span class="grid-expand" data-toggle="modal" data-target="#grid-modal-{$key}">
   <a href="javascript:void(0)"><i class="fa fa-clone"></i>&nbsp;&nbsp;{$this->value}</a>
</span>

<div class="modal" id="grid-modal-{$key}" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{$title}</h4>
      </div>
      <div class="modal-body">
        {$html}
      </div>
    </div>
  </div>
</div>

EOT;
    }
}