Laravel-admin 如何在同一页面直接显示选中数据的详情?如图~

Laravel-admin version:^1.7

Laravel-admin 如何在同一页面直接显示选中数据的详情?如图~

视图代码:

Laravel-admin 如何在同一页面直接显示选中数据的详情?如图~

按钮代码:

Laravel-admin 如何在同一页面直接显示选中数据的详情?如图~

Laravel-admin 如何在同一页面直接显示选中数据的详情?如图~

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

最终用了【列展开】和【列视图】2个功能实现了。谢谢各位的建议和回答。

4年前 评论
讨论数量: 10

弹出模态框了解一下? :wink:

4年前 评论

@EvenToss 需求是右边显示详情,用这个框架不知道怎么实现。

4年前 评论

它自带的首页和编辑菜单页面不是就是左边显示,右边是编辑吗

4年前 评论

@echo_dump 他是默认显示的,这我截图的代码就可以实现,我现在要做的功能是点击左边传递当前数据到右边显示。

4年前 评论

看你说的意思,我觉得是要嵌 js 片段进去的。

嗯,我倒是有个粗暴的想法。晚点到家,我再贴上来~


回来好晚了,想想还是答一下吧。 先声明,不要在意变量名称,起名字真的太难了。

嗯.. 顺便说一下,你的提问,没有注明版本。那我就凭感觉猜了~ (截图有下拉菜单,那就最新版本吧)

1. 列表页,超简单的详情页
public function index(Content $content)
{
    $content->header('xxx')->description('xxx');
    $content->row(function(Row $row){
        $row->column(8, $this->grid());
        // 这里给了一个 div, 记住这个 rightHtml ,下面要用到
        $row->column(4, "<div id='rightHtml'></div>");
    });
    return $content;
}
public function show($id, Content $content)
{
    return 'View-RightHtml-'.$id;
}
2. grid() 方法内部 就是把原来的按钮去掉,再加一个新的进去...(这个粗暴了点,如果想要菜单位置不变,得再想想)
protected function grid()
{
    /** @var GridExt $grid */
    $grid = new Grid(new Area());

    $grid->setActionClass(Grid\Displayers\DropdownActions::class);

    $grid->actions(function(Grid\Displayers\DropdownActions $actions){

        $actions->disableView();

        $viewAction = new ShowRight();
        $viewAction->setGrid($this->grid)
            ->setColumn($this->column)
            ->setRow($this->row)
            // 把定位用的要素,传递过去
            ->setViewSelector('#rightHtml');

        $actions->add($viewAction);
    });
    // ... 
}
3. 拷贝一个 Show 来改成 ShowRight 命名空间,位置按需修改吧
<?php
namespace App\Admin\Extensions\Grid\Actions;

use Encore\Admin\Actions\RowAction;
use Encore\Admin\Admin;

class ShowRight extends RowAction
{
    protected $viewSelector;
    protected $viewHrefAfter;

    public function setViewSelector($selector, $after = '')
    {
        $this->viewSelector = $selector;
        $this->viewHrefAfter = empty($after)?'':"/{$after}";
        return $this;
    }

    public function name()
    {
        return __('admin.show');
    }

    public function href()
    {
        // 这里加了一点点
        return "{$this->getResource()}/{$this->getKey()}" . $this->viewHrefAfter;
    }

   // 对,这里就是之前说的 js 片段。
    protected function addScript()
    {
        $script = <<<SCRIPT
(function ($) {
    $('{$this->selector($this->selectorPrefix)}').off('{$this->event}').on('{$this->event}', function() {
        var data     = $(this).data();
        var target   = $(this);
        var url      = data['url'];
        var localUrl = window.location.href;

        // 异常处理,防止本页面被意外调起
        if(localUrl.indexOf(url)>0 || !url)
        {
            $('{$this->viewSelector}').html('<h5><i class="fa fa-close"></i> 加载失败 </h5>');
            return;
        }
        // 请求详情页面,然后放到指定位置。 
        // ... 或者用其他方式来构造
        $.get(url,{},function(html){
            $('{$this->viewSelector}').html(html);
        }, 'html');
    });
})(jQuery);

SCRIPT;
        Admin::script($script);
    }

    public function render()
    {
        $this->addScript();

        $attributes = $this->formatAttributes();
        // 这里也改了点,加了一个 data-url
        return sprintf(
            "<a data-_key='%s' data-url='%s' href='javascript:void(0);' class='%s' {$attributes}>%s</a>",
            $this->getKey(),
            $this->href(),
            $this->getElementClass(),
            $this->asColumn ? $this->display($this->row($this->column->getName())) : $this->name()
        );
    }
}
5. 最后,试一试效果 OK,我本机是没问题的...

Laravel

Laravel

4年前 评论

@水米 Laravel-admin 版本用的最新。按钮用的

file

这个。

4年前 评论
水米 4年前
剑客不能说 (作者) (楼主) 4年前
水米 4年前

可以加一个详情,点击下拉一个tab表格显示,类似这种

file

4年前 评论
他这个效果,文档里的这个方法,应该有用

#列的显示##列展开【文档 | Laravel-admin】

4年前 评论

最终用了【列展开】和【列视图】2个功能实现了。谢谢各位的建议和回答。

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!