Laravel-admin 1.8 列表异步加载模态框的bug

Laravel Admin Laravel PHP 技术

Laravel-admin 1.8 列表异步加载模态框的bug

2020-07-08 17:22 3522 更新于 2020-07-08 18:09

Laravel-admin 1.8，列表，异步加载模态框，若有多个模态框（不论是否是异步模态框），当点击某一个模态框的时候，都会异步加载成后台返回的内容

主要原因就是执行了如下方法
```
$this->addRenderableModalScript();
```
目前的解决办法，只有修改 Laravel-admin 源码，文件如下

`\vendor\encore\laravel-admin\src\Grid\Displayers\Modal.php`

修改后的完整文件如下
```
<?php

namespace Encore\Admin\Grid\Displayers;

use Encore\Admin\Admin;
use Illuminate\Contracts\Support\Renderable;

class Modal extends AbstractDisplayer
{
    /**
     * @var string
     */
    protected $renderable;

/**
     * @param int $multiple
     *
     * @return string
     */
    protected function getLoadUrl()
    {
        $renderable = str_replace('\\', '_', $this->renderable);

return route('admin.handle-renderable', compact('renderable'));
    }

protected function addRenderableModalScript()
    {
        $key = $this->getKey().'-'.str_replace('.', '_', $this->getColumn()->getName());
        $script = <<<SCRIPT
(function () {
    var modal = $('.grid-modal-ajax-{$key}');

modal.on('show.bs.modal', function (e) {
        var key = $(e.relatedTarget).data('key');
        $.get('{$this->getLoadUrl()}'+'&key='+key, function (data) {
            modal.find('.modal-body').html(data);
        });
    })
})();
SCRIPT;

Admin::script($script);
    }

public function display($callback = null)
    {
        if (func_num_args() == 2) {
            list($title, $callback) = func_get_args();
        } elseif (func_num_args() == 1) {
            $title = $this->trans('title');
        }
        $class = '';
        $key = $this->getKey().'-'.str_replace('.', '_', $this->getColumn()->getName());
        if (is_subclass_of($callback, Renderable::class)) {
            $html = <<<'HTML'
<div class="loading text-center">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
HTML;
            $this->renderable = $callback;
            $this->addRenderableModalScript();
            $class = 'grid-modal-ajax-'.$key;
        } else {
            $callback = $callback->bindTo($this->row);
            $html = call_user_func_array($callback, [$this->row]);
        }

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

<div class="modal grid-modal {$class}" 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">×</span></button>
        <h4 class="modal-title">{$title}</h4>
      </div>
      <div class="modal-body">
        {$html}
      </div>
    </div>
  </div>
</div>

EOT;
    }
}
```
增加或修改的内容如下
```
...
protected function addRenderableModalScript()

{

$key = $this->getKey().'-'.str_replace('.', '_', $this->getColumn()->getName());

$script = <<<SCRIPT

(function () {

var modal = $('.grid-modal-ajax-{$key}');
...
```
```
...
$class = '';

$key = $this->getKey().'-'.str_replace('.', '_', $this->getColumn()->getName());

if (is_subclass_of($callback, Renderable::class)) {

$class = 'grid-modal-ajax-'.$key;
...
```
```
...
<div class="modal grid-modal {$class}" id="grid-modal-{$key}" tabindex="-1" role="dialog">
...
```

推荐阅读

博客升级啦~~~！

Flutter 版的 authcode 加密/解密方法

Vue Router 动态加载路由后，刷新空白的问题（vue-element-admin）

CentOS6.4安装Swoole4.2 Gcc的问题-error: #error "GCC 4.8 or later required.

百度地图JS API，自动完成输入框，点击地图获取位置并标注的示例

Laravel-admin 1.8 列表异步加载模态框的bug