Yii2中点击按钮修改行背景色并持久化到数据库的问题

要解决页面刷新后背景色状态丢失的问题，核心是把确认状态存储到数据库，再在页面加载时根据数据库状态渲染样式，具体步骤如下：

1. 数据库新增状态字段 #

给存储工单数据的表添加一个tinyint(1)类型的字段is_acknowledged，默认值设为0（0=未确认，1=已确认），用来标记该行是否已被用户确认。

2. 调整Yii后端接口逻辑 #

当前你的AJAX调用的是report/insert-data接口，建议修改该接口的逻辑，从插入新数据改为更新对应工单的确认状态（如果需要记录确认日志，可以同时插入日志表）：

public function actionInsertData()
{
    if (Yii::$app->request->isAjax && Yii::$app->request->isPost) {
        $jobId = Yii::$app->request->post('jobId');
        $orderdate = Yii::$app->request->post('orderdate');

        // 根据jobId和orderdate定位目标工单
        $jobModel = YourJobModel::findOne([
            'job_id' => $jobId,
            'orderdate' => $orderdate
        ]);

        if ($jobModel) {
            $jobModel->is_acknowledged = 1;
            if ($jobModel->save(false)) { // 若不需要验证可加false，否则移除
                // 可选：插入确认日志到日志表
                // $ackLog = new AcknowledgeLog();
                // $ackLog->load(Yii::$app->request->post(), '');
                // $ackLog->save();

                return json_encode(['status' => 'success']);
            }
            return json_encode(['status' => 'error', 'msg' => '状态更新失败']);
        }
        return json_encode(['status' => 'error', 'msg' => '未找到对应工单']);
    }
    return json_encode(['status' => 'error', 'msg' => '非法请求']);
}

替换YourJobModel为你实际使用的工单模型类，字段名也需和数据库对应。

3. 页面渲染时加载状态 #

在生成表格行的PHP代码中，根据数据库返回的is_acknowledged值，直接给<tr>添加bg-success类，同时处理按钮状态：

// 假设从数据库获取到当前工单的确认状态：$isAcknowledged = $jobModel->is_acknowledged;
$rowClass = $isAcknowledged ? 'bg-success' : '';
$btnState = $isAcknowledged ? 'disabled' : '';
$btnText = $isAcknowledged ? '已确认' : 'Acknowledge';

echo '
<tr class="'.$rowClass.'">
    <td>'.$orderdate_call.'</td>
    <td>'.$getjobid.'</td>
    <td>'.$thejobname.'</td>
    <td>'.$thesubapp.'</td>
    <td>'.$thestatus.'</td>
    <td>'.$currenttime.'</td>
    <td><span class="badge '.$bg_css_online2.'">'.$desc_online_text2.'</span></td>
    <td><span class="badge '.$bg_css_online.'">'.$desc_online_text.'</span></td>
    <td>
        <button class="btn btn-primary insertButton '.$btnState.'"
                data-jobid="'.$getjobid.'"
                data-orderdate="'.$orderdate_call.'"
                data-jobname="'.$thejobname.'"
                data-subapplication="'.$thesubapp.'"
                data-jobstatus="'.$thestatus.'"
                data-currenttime="'.$currenttime.'"
                data-cyclic="'.$desc_online_text2.'"
                data-message="'.$desc_online_text.'"
                '.$btnState.'>
            '.$btnText.'
        </button>
    </td>
</tr>';

这样页面刷新后，已确认的行会自动显示绿色背景，按钮也会禁用并显示“已确认”，避免重复操作。

4. 优化前端AJAX逻辑 #

修正原代码中的URL和CSRF参数拼接问题，同时添加按钮状态控制，防止重复提交：

$('#description-table').on('click', '.insertButton:not(.disabled)', function() {
    const $btn = $(this);
    const $row = $btn.closest('tr');

    // 提取按钮上的工单数据
    const jobData = {
        jobId: $btn.data('jobid'),
        orderdate: $btn.data('orderdate'),
        jobname: $btn.data('jobname'),
        subapplication: $btn.data('subapplication'),
        jobstatus: $btn.data('jobstatus'),
        currenttime: $btn.data('currenttime'),
        cyclic: $btn.data('cyclic'),
        message: $btn.data('message'),
        // 正确输出Yii的CSRF参数
        '<?= Yii::$app->request->csrfParam ?>': '<?= Yii::$app->request->csrfToken ?>'
    };

    // 禁用按钮，显示加载状态
    $btn.addClass('disabled').text('确认中...');

    $.ajax({
        url: '<?= Url::to(['report/insert-data']) ?>',
        type: 'POST',
        data: jobData,
        success: function(res) {
            if (res.status === 'success') {
                alert('已确认');
                $row.addClass('bg-success');
                $btn.text('已确认');
            } else {
                alert(res.msg || '确认失败');
                $btn.removeClass('disabled').text('Acknowledge');
            }
        },
        error: function() {
            alert('网络错误，请重试');
            $btn.removeClass('disabled').text('Acknowledge');
        }
    });
});

内容的提问来源于stack exchange，提问作者Red Hood