jQWidgets jqxPivotGrid CellsRenderer Propiedad

jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El jqxPivotGrid es un widget de visualización de datos potente y ligero que está completamente escrito en lenguaje JavaScript. Este widget ofrece muchas funciones avanzadas y es altamente personalizable para diferentes necesidades.

La propiedad cellsRenderer se usa para configurar u obtener la función cellsRenderer para el widget jqxPivotGrid especificado que se usa para representar las celdas dinámicas. La función debe devolver una string HTML válida.

Sintaxis:

Para configurar la propiedad cellsRenderer :

$('Selector').jqxPivotGrid({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>";
});

Para obtener la propiedad cellsRenderer :

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

Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.

<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsortable.js”></script>
<script type=”texto /javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpivot.js”></script>
<script type=”text/javascript” src =”jqwidgets/jqxpivotgrid.js”></script>
<tipo de secuencia de comandos = «texto/javascript» src = «jqwidgets/jqx-all.js»></secuencia de comandos>

Ejemplo: El siguiente ejemplo ilustra la propiedad jQWidgets jqxPivotGrid cellsRenderer .

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css" 
          type="text/css" />
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxmenu.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxpivot.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxpivotgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqx-all.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxPivotGrid cellsRenderer Property
        </h3>
        <div id="jqx_Pivot_Grid" style="height: 160px; 
                                        width: 270px;">
        </div>
        <script type="text/javascript">
            $(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>";
                    }
                });
            });
        </script>
    </center>
</body>
  
</html>

Producción:

jqxPivotGrid cellsRenderer

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

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta