奥丁9

后端
- 数据库
  - redis
  - mysql
  - mongoDB
  - 达梦
- php
  - laravel
    - laravel-admin
    - dcat
      - 表单
      - 表格
- java
  - spring
- python
- go
- c
- c++
前端
- vue
- nodejs
- sass/less
- html/css
- 前端框架
- javascript
- 微信生态
  - 公众号
  - 小程序
- uniapp
- typescript
其他
- AI
- 数据结构
- 安全
- linux
- seo
- git
- 健身
- 算法
- 正则表达式
- docker
待分类

后端 / php / laravel / dcat

dcat表格批量操作弹窗表单，将选中的ids传给form

1年前 aoding9 53

laravel dcat

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

![dcat表格批量操作弹窗表单，将选中的ids传给form](https://cdn.learnku.com/uploads/images/202308/23/78338/0l3hnXz3nt.png!large)

![dcat表格批量操作弹窗表单，将选中的ids传给form](https://cdn.learnku.com/uploads/images/202308/23/78338/FFR7YNIljp.png!large)

文档中通过Modal的onLoad，在里面用getSelectedKeysScript获取到ids，然后js赋值给form的ids隐藏域，此时form已经渲染完成了，如果要根据ids，给form填充数据，例如填充订单合计金额，就需要在渲染之前，把ids传过去。

![dcat表格批量操作弹窗表单，将选中的ids传给form](https://cdn.learnku.com/uploads/images/202308/23/78338/sd564Ai8fb.png!large)

点击按钮，首先浏览器的网络，会发起`http://xxx.com/admin/dcat-api/render?....`的请求，响应内容就是表单的html，也就是说要想办法给这个url拼接上ids参数就行了。

Modal类作为字符串返回时调用父级定义的`__toString`，里面再调用render方法，查看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) {
		//...
    }

}
```

本作品采用《CC 协议》，转载必须注明作者和本文链接