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. losjqxTreeGrid 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.
La propiedad columnGroups se usa para establecer el grupo de columnas para el jqxTreeGrid especificado. Un grupo de columnas es un grupo de encabezados de varias columnas.
Hay una lista de propiedades que se pueden establecer dentro de la propiedad columnGroups:
- parentGroup: esta es una propiedad de string que determina el nombre del grupo principal.
- nombre: Esta es una propiedad de string que determina el nombre del grupo.
- align: esta es una propiedad de string que determina la alineación del encabezado de la columna. Sus valores posibles son ‘izquierda’, ‘centro’ o ‘derecha’.
Sintaxis:
columnGroups: [{
name: "Group",
align: "center",
text: "Organisation"
}]
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 la propiedad jQWidgets jqxTreeGrid columnGroups .
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 columnGroups Property
</h3>
<div id="jqxTreeGrid" style="margin: 25px;">
</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,
ready: function () {
$("#jqxTreeGrid").jqxTreeGrid(
'expandRow', '1');
$("#jqxTreeGrid").jqxTreeGrid(
'expandRow', '3');
},
columns: [{
text: 'Employee_Name',
align: 'center',
columnGroup: "Group",
dataField: 'Employee_Name',
width: 140
}, {
text: 'Company',
align: 'center',
columnGroup: "Group",
dataField: 'Company',
width: 150
}, {
text: 'Designation',
align: 'center',
columnGroup: "Group",
dataField: 'Designation',
width: 150
}],
columnGroups: [{
name: "Group",
align: "center",
text: "Organisation"
}]
});
});
</script>
</center>
</body>
</html>
Producción:
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