jQWidgets jqxTree propiedad de origen

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 jqxTree representa un widget de jQuery que se usa para mostrar una colección jerárquica de elementos. Para mostrar la colección de elementos, podemos completar desde ‘UL’ o usando su propiedad ‘fuente’.

La propiedad de origen se utiliza para establecer o devolver el origen del elemento. Acepta valor de tipo de objeto y su valor predeterminado es nulo.

El elemento del árbol tiene los siguientes campos.

  • etiqueta: Representa la etiqueta del artículo.
  • valor: Representa el valor del artículo.
  • html: Representa el elemento HTML
  • id: Representa el id del artículo.
  • disabled: Representa si el ítem está habilitado/deshabilitado.
  • marcada: Representa si el elemento está marcado/desmarcado.
  • expandido: representa si el elemento del widget está expandido o colapsado.
  • seleccionado: Representa si el elemento está seleccionado.
  • items: Representa una array de subelementos.
  • icon: Representa el icono del ítem.
  • iconize: Representa el tamaño del icono del ítem.

Sintaxis:

$('selector').jqxTree({ source: Object_data });

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/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></ script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtree.js”></script>

El siguiente ejemplo ilustra la propiedad de origen jQWidgets jqxTree .

Ejemplo:

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/jqx-all.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/jqxpanel.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxtree.js"></script>
  
    <style>
        h1,
        h3 {
            text-align: center;
        }
          
        #jqxTree {
            width: 100%;
            margin: 0 auto;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        jQWidgets jqxTree source Property
    </h3>
  
    <div id='jqxTree'></div>
  
    <script type="text/javascript">
        $(document).ready(function() {
  
            var data = [{
                label: "GeeksforGeeks",
                expanded: true,
                items: [{
                    label: "Computer Science"
                }]
            }, {
                label: "Programming",
                expanded: true,
                items: [{
                    label: "C"
                }, {
                    label: "C++"
                }, {
                    label: "Java"
                }, {
                    label: "Python"
                }, ]
            }, {
                label: "Web Technology",
                items: [{
                    label: "HTML"
                }, {
                    label: "CCSS"
                }, {
                    label: "JavaScript"
                }, {
                    label: "jQuery"
                }, {
                    label: "PHP"
                }]
            }];
  
            $('#jqxTree').jqxTree({
                source: data,
                width: '350px',
                height: '250px'
            });
        });
    </script>
</body>
  
</html>

Producción:

Referencia: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtree/jquery-tree-api.htm

Publicación traducida automáticamente

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