如何从C#后端动态配置pivottable.js的透视表参数

问题背景 #

我有一个用作报表平台的ASP.NET应用，目前已成功将pivottable.js的透视表与图表绑定到可变JSON数据源。为提升灵活性，希望从C#后端代码动态设置rows、cols、vals及aggregatorName参数，而非像现有代码那样硬编码，恳请提供实现动态绑定的指导。

现有可运行的ASPX页面代码 #

<script type="text/javascript">
    var derivers = $.pivotUtilities.derivers;

    var renderers = $.extend($.pivotUtilities.renderers,
        $.pivotUtilities.plotly_renderers,
        $.pivotUtilities.export_renderers);

    function createPivotTable(dataSourceJson) {
        // 解析JSON字符串为JavaScript对象
        var dataSource = JSON.parse(dataSourceJson);

        $(function () {
            $("#pivotoutput").pivotUI(
                dataSource,
                {
                    rows: ["Name", "Type"],
                    cols: ["Year_Month", "Category"],
                    vals: ["Line_Val_Excl"],
                    aggregatorName: "Sum"
                }
            )
        });
    }
</script>

尝试过的方案 #

服务端C#代码

string json = DataTableToJson.ConvertDataTableToJson(CollectData());
string criters = "{rows: [" + "Name" + "," + "Type" + "]," +
            " cols: [" + "Year_Month" + "," + "Category" + "]," +
            " vals: [" + "Line_Val_Excl" + "]," +
           " aggregatorName: " + "Sum" + "}";
Page.ClientScript.RegisterStartupScript(this.GetType(), "CreatePivotTable", "createPivotTable('" + json + "," + criters + "');", true);

客户端JavaScript代码

function createPivotTable(dataSourceJson, chartCriteria) {
    // 解析JSON字符串为JavaScript对象
    var dataSource = JSON.parse(dataSourceJson);
    var chartcriteria = JSON.parse(chartCriteria);

    $(function () {
        $("#pivotoutput").pivotUI(
            dataSource,
            chartcriteria
            //{
            //    rows: ["Name", "Type"],
            //    cols: ["Year_Month", "Category"],
            //    vals: ["Line_Val_Excl"],
            //    aggregatorName: "Sum"
            //}
        )
    });
}

解决方案 #

问题出在手动拼接JSON字符串格式错误，以及参数传递方式不当。以下是修正后的实现步骤：

1. 服务端：用对象序列化生成合法JSON

定义匹配pivottable配置的类，通过序列化生成标准JSON，避免手动拼接出错：

// 定义透视表配置类
public class PivotConfig
{
    public List<string> rows { get; set; }
    public List<string> cols { get; set; }
    public List<string> vals { get; set; }
    public string aggregatorName { get; set; }
}

// 生成数据和配置并传递到客户端
using System.Web.Script.Serialization;

// 获取数据源JSON
string dataJson = DataTableToJson.ConvertDataTableToJson(CollectData());

// 创建动态配置实例
var pivotConfig = new PivotConfig
{
    rows = new List<string> { "Name", "Type" },
    cols = new List<string> { "Year_Month", "Category" },
    vals = new List<string> { "Line_Val_Excl" },
    aggregatorName = "Sum"
};

// 序列化配置为标准JSON字符串
var serializer = new JavaScriptSerializer();
string configJson = serializer.Serialize(pivotConfig);

// 转义JSON中的单引号，避免破坏客户端字符串格式
dataJson = dataJson.Replace("'", @"\'");
configJson = configJson.Replace("'", @"\'");

// 注册启动脚本，正确传递两个参数
Page.ClientScript.RegisterStartupScript(this.GetType(), "CreatePivotTable", 
    $"createPivotTable('{dataJson}', '{configJson}');", true);

2. 客户端：修正函数逻辑并增加错误处理

确保JSON解析正确，且在DOM完全就绪后渲染透视表：

var derivers = $.pivotUtilities.derivers;
var renderers = $.extend($.pivotUtilities.renderers,
    $.pivotUtilities.plotly_renderers,
    $.pivotUtilities.export_renderers);

function createPivotTable(dataSourceJson, chartCriteriaJson) {
    try {
        // 解析数据源和配置参数
        var dataSource = JSON.parse(dataSourceJson);
        var chartCriteria = JSON.parse(chartCriteriaJson);

        // DOM就绪后渲染透视表
        $(document).ready(function() {
            $("#pivotoutput").pivotUI(dataSource, chartCriteria);
        });
    } catch (error) {
        console.error("透视表初始化失败:", error);
    }
}

关键说明 #

• 避免手动拼接JSON：手动拼接容易出现语法错误（如字符串未加引号、逗号遗漏），使用对象序列化能保证JSON格式合法。
• 参数转义：传递到客户端的JSON字符串需要转义单引号，防止客户端解析时字符串断裂。
• 错误处理：增加try-catch块便于排查JSON解析或渲染时的问题。

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