jQWidgets jqxPivotGrid cellsRenderer 属性

jQWidgets是一个 JavaScript 框架，用于为 PC 和移动设备制作基于 Web 的应用程序。它是一个非常强大、经过优化、独立于平台且得到广泛支持的框架。 jqxPivotGrid是一个功能强大且轻量级的数据可视化小部件，完全用 JavaScript 语言编写。这个小部件提供了许多高级功能，并且可以根据不同的需求进行高度定制。

cellsRenderer属性用于设置或获取用于呈现枢轴单元格的指定 jqxPivotGrid 小部件的 cellsRenderer函数。该函数应该返回一个有效的 HTML字符串。

句法：

• 用于设置cellsRenderer属性：

  $('Selector').jqxPivotGrid({cellsRenderer: function (pivotCell) {
      var BG_Color = 'red';
      var cell_Text = pivotCell.formattedValue;
      return "
  "
          + cell_Text
          + "
  ";
  });

• 获取cellsRenderer属性：

  $('#jqx_Pivot_Grid').jqxPivotGrid('cellsRenderer');

链接文件：从给定链接下载 jQWidgets。在 HTML 文件中，找到下载文件夹中的脚本文件。

示例：下面的示例说明了 jQWidgets jqxPivotGrid cellsRenderer属性。

HTML

  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxPivotGrid cellsRenderer Property
        
        
        
        
            $(document).ready(function () {
                var data = new Array();
                var i = 0;
                while (i <= 2) {
                    var Column = ["Company"];
                    var Domain = ["Progamming",
                        "CS subjects",
                        "GATE preparation"];
                    var Rank = ["Ranking"];
                    var row = {};
                    row["Domain"] = Domain[i];
                    row["Column"] = "Company";
                    row["Rank"] = "Domain";
                    data.push(row);
                    i++;
                }
                var dataAdapter = new $.jqx.dataAdapter({
                    localdata: data,
                    datafields:
                        [
                            { name: 'Rank', type: 'string' },
                            { name: 'Domain', type: 'string' },
                            { name: 'Column', type: 'string' },
                        ]
                });
                var pivotDataSource = new $.jqx.pivot(
                    dataAdapter,
                    {
                        values: [
                            { text: 'GeeksforGeeks' }
                        ],
                        columns: [{ dataField: 'Column' }],
                        rows: [{ dataField: 'Rank' },
                        { dataField: 'Domain' }],
                    }
                );
                $('#jqx_Pivot_Grid').jqxPivotGrid({
                    source: pivotDataSource,
                    cellsRenderer: function (pivotCell) {
                        var BG_Color = 'red';
                        var cell_Text = pivotCell.formattedValue;
                        return "<div style='background: "
                            + BG_Color
                            + "; width: 100%-8px; height: 270px; padding: 4px;'>"
                            + cell_Text
                            + "</div>";
                    }
                });
            });
        
    

  

输出：

参考： https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxpivotgrid/jquery-pivotgrid-api.htm?search=