Laravel-admin 1.8 列表异步加载模态框的bug
2020-07-08 17:22 浏览(2939 更新于 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>&nbsp;&nbsp;{$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">&times;</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">

...

评论(4)
发布评论
回复X
聊天室(0