jQWidgets jqxTreeGrid updateBoundData() Método

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 updateBoundData() se usa para realizar una operación de vinculación de datos y también para actualizar el jqxTreeGrid especificado con los nuevos datos ingresados.

Sintaxis:

$("#treeGrid").jqxTreeGrid('updateBoundData');

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

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 updateBoundData() .

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 updateBoundData() Method
        </h3>
        <div id="jqxTreeGrid" style="margin: 25px;"></div>
        <input type="button" style="margin: 20px;" 
            id="button_for_updateBoundData" 
            value="Update the bound data" />
  
        <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_updateBoundData").jqxButton({
                    width: 200,
                    height: 35,
                });
                $("#button_for_updateBoundData").click(function () {
                    $("#jqxTreeGrid").jqxTreeGrid("updateBoundData");
                });
            });
        </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 *