Método jQWidgets jqxTreeGrid getCheckedRows()

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 getCheckedRows() se usa para devolver una array plana de todas las filas marcadas del jqxTreeGrid especificado.

Hay algunos miembros de fila reservados:

  • marcado: Este es el valor booleano. Aquí, se devuelve el estado comprobado de la fila.
  • expandido: Este es el valor booleano. Aquí, se devuelve el estado expandido de la fila.
  • icono: Este es el valor de la string. Aquí, se devuelve la URL del icono de la fila.
  • hoja: Este es el valor booleano. Aquí, se devuelve la existencia de la hoja de la fila en la jerarquía.
  • nivel: Este es el valor entero. Aquí, se devuelve el nivel de jerarquía de la fila.
  • padre: Este es el objeto. Devuelve nulo para las filas raíz; de lo contrario, devuelve el objeto de la fila principal.
  • registros: Esta es una array. Aquí, se devuelve la colección de subfilas de la fila.
  • seleccionado: Este es el valor booleano. Aquí, se devuelve el estado seleccionado de la fila.
  • uid: puede ser el número o el valor de la string. Aquí, se devuelve la ID o clave única de la fila.

Sintaxis:

$('Selector').jqxTreeGrid('getCheckedRows');

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

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

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 getCheckedRows() . En el siguiente ejemplo, se devuelven la primera y la tercera fila marcadas.

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 getCheckedRows() Method</h3>
      <div id="jqxTreeGrid" style="margin: 25px"></div>
      <input
        type="button"
        style="margin: 20px"
        id="button_for_getCheckedRows"
        value="Get the checked 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,
            checkboxes: 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_getCheckedRows").jqxButton({
            width: 300,
            height: 35,
          });
          $("#jqxTreeGrid").jqxTreeGrid("checkRow", 1);
          $("#jqxTreeGrid").jqxTreeGrid("checkRow", 3);
          $("#button_for_getCheckedRows").click(function () {
            var checked_Rows = $("#jqxTreeGrid")
              .jqxTreeGrid("getCheckedRows");
            var checked_Rows_Data = "";
            var a = 0;
            while (a < checked_Rows.length) {
              checked_Rows_Data +=
                checked_Rows[a].Employee_Name +
                " " +
                checked_Rows[a].Company +
                " " +
                checked_Rows[a].Designation +
                " & ";
              a++;
            }
  
            $("#log").html(JSON.stringify(checked_Rows_Data));
          });
        });
      </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 *