jQWidgets jqxPivotGrid pivotitemcollapseing Evento

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.

El pivotitemcollapsing se activa cuando se colapsa un elemento dinámico del widget jqxPivotGrid especificado. El indicador de cancelación del evento se puede utilizar para detener el procesamiento posterior.

Sintaxis:

$('Selector').on('pivotitemcollapsing', function () {
    $("#log").html('The pivot item is collapsing');
});

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 el evento jQWidgets jqxPivotGrid pivotitemcollapsing .

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 pivotitemcollapsing Event
        </h3>
        <div id="jqx_Pivot_Grid" style="height: 160px; 
                                        width: 270px;">
        </div>
        <div id="log"></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
                });
                $('#jqx_Pivot_Grid').on('pivotitemcollapsing', 
                                        function () {
                    $("#log").html('The pivot item is collapsing');
                });
            });
        </script>
    </center>
</body>
  
</html>

Producción:

jqxPivotGrid pivotitemcollapsing

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *