Método jQWidgets jqxTreeGrid hideColumn()

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 hideColumn() se usa para ocultar una columna del jqxTreeGrid especificado.

Sintaxis:

$("#treeGrid").jqxTreeGrid('hideColumn', dataField);

Parámetros: este método acepta un parámetro que se ilustra a continuación:

  • dataField: este es el campo de datos especificado o el nombre de la columna que se ocultará.

Valores devueltos: este método no devuelve ningún valor.

Archivos vinculados: descargue https://www.jqwidgets.com/download/ desde el enlace proporcionado. 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 hideColumn() . En el siguiente ejemplo, el nombre de la columna de ‘Compañía’ estará oculto.

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 hideColumn() Method
      </h3>
        
      <div id="jqxTreeGrid" style="margin: 25px;">
      </div>
        
      <input type="button" style="margin: 20px;" 
        id="button_for_hideColumn" 
        value="Hide the second column"/>
        
      <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,
                sortable: true,
                ready: function () {
                    $("#jqxTreeGrid").jqxTreeGrid(
                        'expandRow', '1');
                },
                ready: function () {
                    $("#jqxTreeGrid").jqxTreeGrid(
                        'expandRow', '3');
                },
                columns: [{
                    text: 'Employee_Name',
                    align: 'center',
                    dataField: 'Employee_Name',
                    width: 140
                }, {
                    text: 'Company',
                    align: 'center',
                    dataField: 'Company',
                    width: 130
                }, {
                    text: 'Designation',
                    align: 'center',
                    dataField: 'Designation',
                    width: 150
                }]
          
            });
            
            $("#button_for_hideColumn").jqxButton({
                width: 230,
                height: 35
            });
            
            $('#button_for_hideColumn').click(
                function () {
                    $("#jqxTreeGrid").jqxTreeGrid(
                        'hideColumn', 'Company');
                });
        });
      </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 *