Método jQWidgets jqxTreeGrid getView()

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 jqxTreeGrid se usa para representar datos en una estructura similar a un árbol. Este widget es útil para mostrar varias columnas de datos jerárquicos, paginación de datos, clasificación y filtrado, edición de datos, cambio de tamaño de columnas, columnas fijas, formato condicional, agregados y selección de filas. Estos widgets también leen y muestran los datos de cualquier tipo de fuente de datos, como XML, JSON, Array, CSV o TSV.

El método getView() se usa para devolver una array de todas las filas del jqxTreeGrid especificado. Este método también considera el filtrado y la clasificación aplicados.

Hay algunos miembros de fila reservados:

  • verificado: Es un valor booleano que devuelve el estado verificado de la fila.
  • expandido: Es el valor booleano que devuelve el estado expandido de la fila.
  • icon: Es un valor de string que devuelve la URL del icono de la fila.
  • hoja: Es un valor booleano que devuelve la existencia de hoja de fila en la jerarquía.
  • nivel: Es el valor entero que devuelve el nivel de jerarquía de la fila.
  • padre: es el objeto que devuelve nulo para las filas raíz; de lo contrario, devuelve el objeto de la fila principal.
  • registros: Es una array que devuelve la colección de subfilas de la fila.
  • seleccionado: Es el valor booleano que devuelve el estado seleccionado de la fila.
  • uid: Es el número o valor de string que devuelve el ID único o clave de la fila.

Sintaxis:

$("Selector").jqxTreeGrid('getView');

Parámetros: este método no acepta ningún parámetro.

Valores devueltos: este método devuelve una array de todas las filas.

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/jqxscrollbar.js”></script>
<script type=”text /javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src =”jqwidgets/jqxdatatable.js”></script>
<tipo de secuencia de comandos = «texto/javascript» src = «jqwidgets/jqxtreegrid.js»></secuencia de comandos>

Ejemplo: El siguiente ejemplo ilustra el método jQWidgets jqxTreeGrid getView() . En el siguiente ejemplo, se devuelven los datos de la primera columna de todas las filas.

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/jqxlistbox.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxtreegrid.js">
    </script>
</head>
    
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTreeGrid getView() Method
        </h3>
        <div id="jqxTreeGrid" style="margin: 25px;">
        </div>
        <input type="button" style="margin: 20px;" 
               id="button_for_getView" 
               value="Get the data of first column
                      of all the rows"/>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var A = [{
                    "ID": 1,
                    "Employee_Name": "Amit",
                    "Company": "GeeksforGeeks",
                    "Designation": "Content Writer",
                    "expanded": true,
                    A1: [{
                        "ID": 2,
                        "Employee_Name": "Sumit",
                        "Company": "Amazon",
                        "Designation": "Software Engineer",
                    }, {
                        "ID": 3,
                        "Employee_Name": "Vivek",
                        "Company": "Apple",
                        "Designation": "Product Manager",
                        "expanded": true,
                        A1: [{
                            "ID": 4,
                            "Employee_Name": "Soni",
                            "Company": "Flipkart",
                            "Designation": "HR",
                        }]
                    }]
                }];
  
                var Data_Source = {
                    dataFields: [{
                        name: 'ID'
                    }, {
                        name: 'Employee_Name'
                    }, {
                        name: 'Company'
                    }, {
                        name: 'Designation'
                    }, {
                        name: 'A1',
                        type: 'array'
                    }, {
                        name: 'expanded'
                    }],
                    hierarchy: {
                        root: 'A1'
                    },
                    id: 'ID',
                    localData: A
                };
  
                var Data = new
                    $.jqx.dataAdapter(Data_Source);
  
                $("#jqxTreeGrid").jqxTreeGrid({
                    source: Data,
                    editable: true,
                    ready: function () {
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '1');
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '3');
                    },
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 140
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 150
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 150
                    }]
  
                });
                $("#button_for_getView").jqxButton({
                    width: 300,
                    height: 35
                });
                $('#button_for_getView').click(
                    function () {
                        var View = $("#jqxTreeGrid").
                        jqxTreeGrid('getView');
                        var View_String = "";
                        var Display_View = function (records) {
                            var a = 0;
                            while (a < records.length) {
                                View_String += records[a].
                                Employee_Name + " ";
                                if (records[a].records) {
                                    Display_View(
                                      records[a].records);
                                }
                                a++;
                            }
                        };
                        Display_View(View);
                        $("#log").html(JSON.stringify(
                            View_String))
                    });
            });
        </script>
    </center>
</body>
  
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-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 *