WebDataRocks主-子报表场景API支持及参数化调用技术问询

Great question—let's break down your two core needs and how to implement them with WebDataRocks:

1. Adding custom links to aggregated data for master-detail navigation #

Absolutely, you can build this using WebDataRocks' customizeCell API combined with event handling. Here's a practical approach:

• Use the customizeCell hook to target specific aggregated cells (like totals or grouped aggregation values). You can identify these cells by checking properties such as cell.isTotal (for total rows) or data.type === "value" (for aggregated cells in groups).
• Modify the cell to act as a clickable element: either add an onclick event handler to the cell's DOM element, or wrap the cell content in an <a> tag.
• On click, extract key context from the cell and data objects (like the aggregated field name, group values, or the cell's numeric value), then pass this data to your sub-report.

Example snippet for customizeCell:

webdatarocks.customizeCell(function(cell, data) {
  // Target total rows or specific aggregated cells
  if (cell.isTotal || data.type === "value") {
    // Add click handler to trigger sub-report navigation
    cell.element.onclick = function() {
      // Extract parameters to pass to the sub-report
      const navigationParams = {
        aggregatedField: data.hierarchy?.uniqueName,
        cellValue: cell.text,
        groupContext: data.rows?.map(row => row.uniqueName).join("|") || ""
      };
      // Open sub-report in a new tab with encoded parameters
      window.open(`sub-report.html?${new URLSearchParams(navigationParams)}`, "_blank");
    };
    // Add visual cue that the cell is clickable
    cell.element.style.cursor = "pointer";
    cell.element.style.color = "#0066cc";
    cell.element.style.textDecoration = "underline";
  }
});

2. Passing and using parameters in WebDataRocks reports #

WebDataRocks fully supports dynamic parameter handling via its API, which is ideal for your sub-report scenario:

For SQL data sources #

If your sub-report pulls data from a SQL database:

1. Extract the incoming parameters from the URL (or your preferred data transfer method) when the sub-report page loads.
2. Build a dynamic SQL query that incorporates these parameters as filters or variables.
3. Use the updateData method (or initialize the report directly with the dynamic query) to load the filtered data.

Example for initializing a parameterized sub-report:

// Get parameters from the URL
const urlParams = new URLSearchParams(window.location.search);
const targetField = urlParams.get("aggregatedField");
const targetValue = urlParams.get("cellValue");

// Initialize WebDataRocks with a dynamic SQL query
const pivotSubReport = new WebDataRocks({
  container: "#wdr-sub-report",
  toolbar: true,
  report: {
    dataSource: {
      type: "sql",
      // Build query with parameters (sanitize inputs for production!)
      query: `SELECT * FROM your_dataset WHERE ${targetField} = '${targetValue}'`
    }
  }
});

For other data sources (JSON/CSV/custom) #

If you're using non-SQL data, you can apply filters dynamically using the report's slice configuration. For example, use updateData to modify the report's filters based on incoming parameters, or use the beforetoolbarcreated event to inject parameter-based filters on initialization.

Master-detail workflow summary #

1. Master report: Use customizeCell to make aggregated cells clickable, extracting key context on click and passing it to the sub-report.
2. Sub-report: Read the incoming parameters, dynamically configure its data source (via SQL query or filters), and load the targeted subset of data.

This approach gives you far more flexibility than the built-in drill-down feature, as you can link to completely independent report templates and control exactly what data is passed between reports.

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