【fastadmin】实现了原有的编辑按钮改为弹出一个窗口批量修改多条数据的需求

2.在对应的js文件中添加点击事件，（我是在require-table.js 中添加了一个multicheckbtn）并将multicheck_url定位到需要弹出的html文件中）1.前端index中“编辑”按钮先不动、将弹出的edit.html页面中的内容更改为普遍数据，（例如标题等就不可以批量更改，状态可以批量更改）3，在对应js文件中添加页面地址，批量选择，还需要将表格初始化第一行加上{c

一个僵尸

1468人浏览 · 2024-04-24 11:13:52

一个僵尸 · 2024-04-24 11:13:52 发布

一、背景原因

原有的编辑按钮会循环弹出多个编辑页面，无法完成进行一个窗口全部更改状态的要求

二、设计思路

1.前端index中“编辑”按钮先不动、将弹出的edit.html页面中的内容更改为普遍数据，（例如标题等就不可以批量更改，状态可以批量更改）

2.在对应的js文件中添加点击事件，（我是在require-table.js 中添加了一个multicheckbtn）并将multicheck_url定位到需要弹出的html文件中）

3.在controller层增加函数或者覆写已有的函数均可，实现表单数据与数据库的交互

三、代码实现

1.index.html页面前端展示批量审核按钮。（注意这里的btn-multicheck是调用js文件中点击事件的关键）

<a href="javascript:;" class="btn btn-success btn-multicheck btn-disabled disabled {:$auth->check('library/library/multi_check')?'':'hide'}"title="{:__('multi_edit')}" ><i class="fa fa-pencil"></i> {:__('multi_edit')}</a>

实现效果：

2. 弹出的multi_check.html页面代码如下

<form id="multi_check-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}">s

                    <input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key"  value="$row.status" }checked{/in} > {$vo}
                </label>
                {/foreach}
            </div>
        </div>
    </div>
    <div data-favisible="status=1">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Get_score')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-get_score" data-rule="required" min="0" class="form-control" name="rows[get_score]"
                       type="number" value="{if !empty($row.get_score)}{$row.get_score|htmlentities}{else}0{/if}">
            </div>
        </div>
        {if condition="($row.mimetype != 'rar') && ($row.mimetype != 'zip')"}
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Pre_page')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-pre_page" data-rule="required;number" min="0" class="form-control" name="row[pre_page]"
                       type="number" value="{$row.pre_page|htmlentities}">
            </div>
        </div>
        {/if}
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Fee_type')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input type="radio" name="row[fee_type]" value="1" checked/> {:__('Fee_type 1')}
                <input type="radio" name="row[fee_type]" value="2"/>{:__('Fee_type 2')}
                <input type="radio" name="row[fee_type]" value="3"/>{:__('Fee_type 3')}
            </div>
        </div>
        <div data-favisible="fee_type=2" >
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Exchange_score')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-exchange_score" data-rule="required;integer;range(1~)" min="1" class="form-control"
                           name="row[exchange_score]" type="number"
                           value="{if empty($row.exchange_score)}0{else}{$row.exchange_score|htmlentities}{/if}">
                </div>
            </div>
        </div>

        <div data-favisible="fee_type=3">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Old_price')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-old_price" data-rule="required;money" min="0" class="form-control" step="0.01"
                           name="row[old_price]" type="number" value="{if !empty($row.old_price)}{$row.old_price|htmlentities}{else}0{/if}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-price" data-rule="required;money" min="0" class="form-control" step="0.01"
                           name="row[price]" type="number" value="{if !empty($row.price)}{$row.price|htmlentities}{else}0{/if}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Is_sale')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="radio">
                        {foreach name="isSaleList" item="vo"}
                        <label for="row[is_sale]-{$key}"><input id="row[is_sale]-{$key}" name="row[is_sale]" type="radio" value="{$key}" {in name="key" value="$row.is_sale" }checked{/in} /> {$vo}</label>

                        {/foreach}
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div data-favisible="status=-1">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Reason')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea id="c-reason" class="form-control " rows="5" name="row[reason]" cols="50">{$row.reason|htmlentities}</textarea>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Remove')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                {foreach name="removeList" item="vo"}
                    <label for="row[remove]-{$key}"><input id="row[remove]-{$key}" name="row[remove]" type="radio" value="{$key}" {in name="key" value="$row.remove"}checked{/in} /> {$vo}</label>
                    {/foreach}
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed ">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

实现效果：

3，在对应js文件中添加页面地址，批量选择，还需要将表格初始化第一行加上{checkbox: true},这个是表格前面的多选框。

multicheck_url: 'library/library/multi_check',

require-table.js文件中配置按钮和前端class对应（不要忘记这里有个"."），并且弹出窗口地址也要加上

multicheckbtn: '.btn-multicheck',

js事件详细代码如下，确保multicheckbtn和multicheck_url配置无误。

//文库管理一个窗口批量审核按钮事件
                toolbar.on('click', Table.config.multicheckbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    // 如果选中的行数超过10行，则不执行编辑操作
                    if (ids.length > 25) {
                        alert("警告：选取的文件数量超过了25！");
                        return;
                    }
                    var title = $(that).data('title') || $(that).attr("title") || __('Edit');
                    var data = $(that).data() || {};
                    delete data.title;
                    var selectedData = Table.api.selecteddata(table);
                    var url = options.extend.multicheck_url;
                    var editData = {
                        ids: ids,
                        selectedData: selectedData
                    };
                    url = Table.api.replaceurl(url, editData, table);
                    Fast.api.open(url, typeof title === 'function' ? title.call(table, editData) : title, data);
                });

4控制层相关文件中的multi_check函数如下

public function multi_check($ids = null)
    {
        // 将传递的 $ids 参数转换为数组
        $idsArray = explode(',', $ids);

        // 获取选中的数据，可能是多条数据
        $rows = $this->model->whereIn('id', $idsArray)->select();

        // 检查是否有数据被选中
        if ($rows->isEmpty()) {
            $this->error(__('No Results were found'));
        }

        // 循环检查每条数据的权限
        foreach ($rows as $row) {
            $adminIds = $this->getDataLimitAdminIds();
            if (is_array($adminIds) && !in_array($row[$this->dataLimitField], $adminIds)) {
                $this->error(__('You have no permission'));
            }
        }

        // 处理 POST 请求，即更新数据
        if ($this->request->isPost()) {
            $params = $this->request->post('row/a');

            // 数据验证
            // 这里需要根据实际情况进行验证，确保数据的有效性

            Db::startTrans();
            try {

                // 批量更新数据
                foreach ($rows as $row) {
                    // 更新数据
                    $params['checktime']=time();
                    $row->allowField(true)->save($params);
                }

                Db::commit();
            } catch (ValidateException | PDOException | Exception $e) {
                Db::rollback();
                $this->error($e->getMessage());
            }

            // 如果更新成功，返回成功响应
            $this->success();
        }

        // 渲染视图，并将选中的数据传递到视图中
        $this->view->assign('row', $rows[0]);
        return $this->view->fetch();
    }