Método jQWidgets jqxGrid getfilterinformation()

Posted on by Rudeus Greyrat

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 jqxGrid se usa para ilustrar un widget jQuery que muestra datos en forma tabular. Además, brinda soporte completo para conectarse con datos, así como para paginar, agrupar, clasificar, filtrar y editar.

El método getfilterinformation() se usa para devolver los detalles sobre los filtros del jqxGrid mostrado. En otras palabras, devuelve una array de los filtros indicados. Sin embargo, los detalles devueltos por este método involucran tanto a los objetos de filtro como a las columnas de filtro. No tiene parámetros y devuelve None . 

Aquí, cada uno de los filtros en el Array posee los siguientes campos:

  • filtro: Es un objeto del filtro que puede contener uno o más de un filtro.

Propiedades y métodos del objeto de filtro:

  • getfilters: es un método y cuando se invoca se devuelve una array de todos y cada uno de los filtros en el objeto de filtro.
  • valor: Es una propiedad del objeto filtro. Especifica el valor del filtro.
  • id: esta propiedad especifica el id del filtro.
  • condition: Esta propiedad especifica la condición del filtro. Donde, el valor para el filtro de string es ‘VACÍO’, ‘NO_VACÍO’, ‘CONTIENES’, ‘CONTIENES_CASE_SENSITIVE’, ‘NO_CONTIENEN’, ‘NO_CONTIENEN_CASE_SENSITIVE’, ‘STARTS_WITH’, ‘STARTS_WITH_CASE_SENSITIVE’, ‘ENDS_WITH’, ‘CASEENDS_WITH_SENSITIVE’, ‘ IGUAL’, ‘EQUAL_CASE_SENSITIVE’, ‘NULL’, ‘NOT_NULL. El valor para el filtro de fecha y número es ‘IGUAL’, ‘NOT_EQUAL’, ‘LESS_THAN’, ‘LESS_THAN_OR_EQUAL’, ‘GREATER_THAN’, ‘GREATER_THAN_OR_EQUAL’, ‘NULL’, ‘NOT_NULL’. Y el valor para el filtro booleano es: ‘EQUAL’, ‘NOT_EQUAL’.
  • type: Es el tipo de filtro. Los valores posibles son ‘stringfilter’, ‘numericfilter’, ‘booleanfilter’ o ‘datefilter’.
  • operador: Es el operador que especifica el vínculo entre los filtros del grupo indicado. Los valores posibles son ‘y’ o ‘o’.
  • campo de datos: Es el campo de datos de la columna especificada.
  • displayfield: Es el campo de visualización de la columna especificada.

Sintaxis:

var info = $('Selector').jqxGrid('getfilterinformation');

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-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.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/jqxgrid.js”></script>
<tipo de secuencia de comandos = «texto/javascript» src = «jqwidgets/jqxgrid.selection.js»></secuencia de comandos>

Ejemplo 1: El siguiente ejemplo ilustra el método jqxGrid getfilterinformation() en jQWidgets.

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-1.11.1.min.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/jqxgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.selection.js">
    </script>
      <script type="text/javascript" 
            src="jqwidgets/jqxgrid.columnsresize.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>       
        <h3>
              jQWidgets jqxGrid getfilterinformation() 
            method
        </h3><br />        
        <div id="jqxg"></div>      
        <div>
            <input type="button"
                   id="jqxBtn" 
                   style="margin-top: 25px"
                   value="Click here" />
        </div>        
        <div id="log"></div>       
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];
  
            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];
  
            for (var j = 0; j < 50; j++) {
                var r = {};
                r["subjectnames"] =
                    subjectNames[Math.floor(
                        Math.random() * subjectNames.length)
                    ];
  
                r["pagenumber"] =
                    pageNumber[Math.floor(
                        Math.random() * pageNumber.length)
                    ];
                d[j] = r;
  
            }
            var src = {
                localdata: d,
                datatype: "array",
            };
            var data_Adapter = new $.jqx.dataAdapter(src);
            $("#jqxg").jqxGrid({
                source: data_Adapter,
                theme: 'energyblue',
                filterable: true,
                height: "260px",
                width: "240px",
                columns: [
                    {
                        text: "Subject Name",
                        datafield: "subjectnames",
                        width: "120px",
                    },
                    {
                        text: "Page No.",
                        datafield: "pagenumber",
                        width: "120px",
                    },
                ],
            });
  
            $("#jqxBtn").jqxButton({
                width: "180px",
                height: "30px",
            });
            var fg = new $.jqx.filter();
            $("#jqxBtn").on("click", function () {
                $("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);
                $("#jqxg").jqxGrid('applyfilters');
                var gfi = $("#jqxg").jqxGrid('getfilterinformation');
                var detail = "";
                for (var j = 0; j < gfi.length; j++) {
                    var Fg = gfi[j];
                    detail += Fg.filtercolumn;
                }
                $("#log").html("Filtered column's name: " + detail);
            });
        });
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente es otro ejemplo que ilustra el método jqxGrid getfilterinformation() en jQWidgets. 

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-1.11.1.min.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/jqxgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.selection.js">
    </script>
      <script type="text/javascript" 
            src="jqwidgets/jqxgrid.columnsresize.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>       
        <h3>
              jQWidgets jqxGrid getfilterinformation() 
            method
        </h3><br />        
        <div id="jqxg"></div>      
        <div>
            <input type="button"
                   id="jqxBtn" 
                   style="margin-top: 25px"
                   value="Click here" />
        </div>        
        <div id="log"></div>       
    </center>
  
    <script type="text/javascript">
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];
  
            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];
  
            for (var j = 0; j < 50; j++) {
                var r = {};
                r["subjectnames"] =
                    subjectNames[Math.floor(
                        Math.random() * subjectNames.length)
                    ];
  
                r["pagenumber"] =
                    pageNumber[Math.floor(
                        Math.random() * pageNumber.length)
                    ];
                d[j] = r;
  
            }
            var src = {
                localdata: d,
                datatype: "array",
            };
            var data_Adapter = new $.jqx.dataAdapter(src);
            $("#jqxg").jqxGrid({
                source: data_Adapter,
                theme: 'energyblue',
                filterable: true,
                height: "230px",
                width: "240px",
                columns: [
                    {
                        text: "Subject Name",
                        datafield: "subjectnames",
                        width: "120px",
                    },
                    {
                        text: "Page No.",
                        datafield: "pagenumber",
                        width: "120px",
                    },
                ],
            });
  
            $("#jqxBtn").jqxButton({
                width: "180px",
                height: "30px",
            });
            var add_filter = function () {
                var fg = new $.jqx.filter();
                var val = 'ja';
                var conditn = 'contains';
                var opratr = 2;
                var fltr =
                    fg.createfilter('stringfilter', val, conditn);
                fg.addfilter(opratr, fltr);
                $("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);
                $("#jqxg").jqxGrid('applyfilters');
            }
  
            $("#jqxBtn").on("click", function () {
                add_filter();
                var gfi = $("#jqxg").jqxGrid('getfilterinformation');
                var details = "";
                for (var j = 0; j < gfi.length; j++) {
                    var Fg = gfi[j];
                    details += Fg.filtercolumn;
                    var f = Fg.filter.getfilters();
                    for (var k = 0; k < f.length; k++) {
                        details += ", \nValue to be filtered: " + f[k].value;
                        details += ", \nCondition applied: " + f[k].condition;
                        details += ", \nOperator used: " + f[k].operator;
                    }
                }
                $("#log").html("Column to be filtered: " + details);
            });
        });
    </script>
</body>
</html>

Producción:

 

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

Publicación traducida automáticamente

Artículo escrito por nidhi1352singh 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 *