侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

dcat-admin中实现表格中将批量选中的ids传给form,并弹窗表单批量编辑

Laravel  /  管理员 发布于 1年前   1688

需求:在dcat-admin中通过表格列表实现批量操作功能,比如 批量选中、批量删除、批量编辑等适用场景。这里主要以在列表中多选id形成ids并把多个id传给弹出表单进行同类型数据的批量编辑功能示例代码。


dcat-admin文档(工具表单):

https://learnku.com/docs/dcat-admin/2.x/tools-form/8125#512b0f

进入步骤:

 1693193412490793.png

2.png

文档中通过 Modal 的 onLoad,在里面用 getSelectedKeysScript 获取到 ids,

然后 js 赋值给 form 的 ids 隐藏域,此时 form 已经渲染完成了,如果要根据 ids,给 form 填充数据,

例如填充订单合计金额,就需要在渲染之前,把 ids 传过去。

3.png

点击按钮,首先浏览器的网络,会发起一下请求

http://xxx.com/admin/dcat-api/render?.... 

响应内容就是表单的 html,它会触发对应的 Renderable 类的 render 方法,也就是 

modal->body ($form) 的中 $form 的 render,

然后里面再调用 prepareForm,最后再调用我们定义的工具表单类的 form。

想办法在此之前,给这个 render 请求的 url 拼接上 ids 参数,就可以在 form 中获取到选中的 key。

查看 Modal 的 render

  public function render()
    {
        $this->addLoadRenderableScript();
        $this->addScript();
        if ($this->join) {
            return $this->renderButton().parent::render();
        }
        Admin::html(parent::render());
        return $this->renderButton();
    }

跟踪 addScript,里面调用 getRenderableScript

    protected function getRenderableScript()
    {
        if (! $this->getRenderable()) {
            return;
        }
        $url = $this->renderable->getUrl();
        return <<<JS
target.on('{$this->target}:load', function () {
    Dcat.helpers.asyncRender('{$url}', function (html) {
        body.html(html);
        {$this->loadScript}
        target.trigger('{$this->target}:loaded');
    });
});
JS;
    }

其中 

$url = $this->renderable->getUrl(); 

就是开头说的 render 请求 url,然后我们要用 getSelectedKeysScript 获取到 ids 拼接到后面

    public function getSelectedKeysScript()
    {
        return "Dcat.grid.selected('{$this->parent->getName()}')";
    }

调试时发现,如果页面只有一个 grid 并且没有调用 setName,那么 {$this->parent->getName()} 为空字符串,于是直接调用 Dcat.grid.selected('') 就可以获取到选中的 ids。

最后,创建一个 BatchActionModal 用来重写 getRenderableScript 方法,然后用这个代替原先的 Modal

<?php
/**
* Desc: 重写modal,以实现获取选中的id数组
*/

namespace App\Admin\Renderable;

use Dcat\Admin\Widgets\Modal;

class BatchActionModal extends Modal {


   protected function getRenderableScript() {
       if (!$this->getRenderable()) {
           return;
       }

       $url = $this->renderable->getUrl();

       return <<<JS


target.on('{$this->target}:load', function () {

   var key = Dcat.grid.selected('')

   Dcat.helpers.asyncRender('{$url}&ids='+key, function (html) {
       body.html(html);

       {$this->loadScript}

       target.trigger('{$this->target}:loaded');
   });
});
JS;
   }
}

使用:

<?php

namespace App\Admin\Actions\Grid\BatchAction;

use App\Admin\Actions\Grid\BatchAction\Forms\BatchEditCompanyForm;
use Dcat\Admin\Admin;
use Dcat\Admin\Grid\BatchAction;
// 注意这里换成修改过的Modal
use App\Admin\Renderable\BatchActionModal as Modal;

class BatchEditCompany extends BatchAction {
   protected $title = '批量修改状态';

   public function render() {

       $form = BatchEditCompanyForm::make();

       return Modal::make($this)
                   ->lg()
                   ->title($this->title)
                   ->body($form)
                   // 因为此处使用了表单异步加载功能,所以一定要用 onLoad 方法
                   // 如果是非异步方式加载表单,则需要改成 onShow 方法
                   ->onLoad($this->getModalScript())
                   ->button($this->title);
   }

   protected function getModalScript() {
       // 弹窗加载后往ids隐藏域写入批量选中的行ID
       return <<<JS
// 获取选中的ID数组
var key = {$this->getSelectedKeysScript()}

$('#ids').val(key);
JS;
   }
}

form 中用 request 取出 ids

<?php

namespace App\Admin\Actions\Grid\BatchAction\Forms;

use Dcat\Admin\Contracts\LazyRenderable;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Widgets\Form;

class BatchEditCompanyForm extends Form implements LazyRenderable
{
    use LazyWidget;
   
    public function form() {
        dd(request('ids')); // 1,3,11
        // 这个是用文档中onLoad设置的方法
        // 此时已经提前拿到ids,可以不用onLoad了,用value($ids)就可以在提交时传给handle
        $this->hidden('ids')->attribute('id', 'ids')->value(request('ids')); 
        $this->radio('status', '状态')->options(Company::StatusOptions);
    }
   
    // 处理请求
    public function handle(array $input) {
        //...
    }
}

  • 上一条:
    Gokins基于Go语言开发的自动化构建工具安装使用流程步骤
    下一条:
    在mysql中快速生成100w条测试数据流程步骤
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
    • Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
    • Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
    • Laravel 11.11版本发布 - 查看模型中的第三方关系:show(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-07
    • 2017-08
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2020-07
    • 2020-08
    • 2020-09
    • 2020-10
    • 2020-11
    • 2021-01
    • 2021-02
    • 2021-03
    • 2021-04
    • 2021-05
    • 2021-06
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2021-12
    • 2022-01
    • 2022-02
    • 2022-03
    • 2022-04
    • 2022-05
    • 2022-06
    • 2022-07
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    • 2024-05
    • 2024-06
    • 2024-07
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客