SurveyJS 中动态更新矩阵总计行样式的实现方法

在 SurveyJS 表单库中，开发者经常需要根据用户输入动态调整表单元素的样式。本文重点介绍如何为矩阵问题中的总计行实现条件样式变化，特别是当总计值超过特定阈值时改变背景颜色的实现方案。

问题背景

矩阵问题中的总计行是一个表达式问题(expression)，其值会根据用户在其他单元格的输入自动计算得出。当我们需要根据这个计算值来动态改变总计行的外观时，直接使用onUpdateQuestionCssClasses事件可能无法达到预期效果，因为该事件在表达式值重新计算后不会自动触发。

解决方案核心思路

要实现动态样式更新，我们需要结合两个关键事件：

1. onUpdateQuestionCssClasses - 用于获取问题的CSS类集合
2. onValueChanged - 用于在值变化时修改样式类

具体实现步骤

1. 定义目标样式

首先在CSS中定义我们想要应用的样式类：

.question-root-red {
  background-color: var(--sjs-special-red-light);
}

2. 存储CSS类引用

在onUpdateQuestionCssClasses事件中，我们获取目标问题的CSS类集合并存储起来：

let classes;
const columnName = "Column 1";

survey.onUpdateQuestionCssClasses.add(function(_, options) {
    if (options.question.getType() === "expression" 
        && options.question.name === columnName) {
        classes = options.cssClasses;
    }
});

3. 动态更新样式

在onValueChanged事件中，我们根据值的变化来修改样式类：

survey.onValueChanged.add((sender, options) => {
    if (options.name === "question1-total") {
        const rootClass = "question-root-red";
        
        if (options.value[columnName] > 2000) {
            if (!classes.root.includes(rootClass)) {
                classes.root += " " + rootClass; 
            }
        } else {
            classes.root = classes.root.replace(rootClass, "").trim();
        }
    }
});

实现原理分析

1. CSS类存储：我们首先在样式初始化时获取并存储了目标问题的CSS类集合引用，这样后续可以直接修改它。

2. 值变化监听：通过监听矩阵总计值的变化，我们能够在值更新时立即做出反应。

3. 条件样式应用：当检测到目标列的值超过2000时，我们添加红色背景样式类；当值回落到2000以下时，则移除该样式类。

注意事项

1. 确保列名与问题名称匹配，否则条件判断会失效。

2. 样式类操作时要注意避免重复添加或移除。

3. 对于更复杂的样式需求，可以扩展CSS类定义和条件判断逻辑。

扩展应用

这种技术不仅适用于矩阵总计行，还可以应用于任何需要根据计算结果动态改变样式的场景。例如：

• 根据评分结果显示不同颜色
• 根据表单完成度调整进度条样式
• 根据输入验证结果显示不同状态的提示

通过灵活运用SurveyJS提供的事件系统，开发者可以实现丰富多样的交互式表单体验。