Tutorial del paquete jQuery Gantt: Cree el paquete RadiantQ jQuery Gantt

jQuery Gantt Package es una verdadera multiplataforma, basada en la implementación local de HTML5 / jQuery, con 2 widgets gantt diferentes, que pueden satisfacer todas sus necesidades de visualización basadas en gantt. También viene con extensiones ASP.NET WebControl y MVC, que se pueden integrar fácilmente en aplicaciones existentes.

Haga clic para descargar la versión de prueba del paquete jQuery Gantt

Tu primer Gantt

Comencemos creando un nuevo directorio de proyecto, como MyFirstGantt.

1) Archivo JS de origen del widget de Gantt

Primero, necesita los archivos fuente JS requeridos por el widget de Gantt. Estos archivos se encuentran en la carpeta <ruta de instalación> / Src. Simplemente copie la carpeta Src completa en el directorio de ejemplo anterior. Hay otros archivos CSS relacionados en esta carpeta. Puede eliminar la carpeta "Src / bin", ya que no es necesaria para este ejemplo de PHP.
Luego copie los archivos de la biblioteca PHP en la carpeta / PlatformSamples / PHPSamples / lib al directorio de muestra.

2) Archivo JS de utilidad de muestra

Hay algunos archivos JS con funciones útiles en la carpeta / Samples / Scripts, que se pueden editar en línea en la cuadrícula. Copie todo el directorio del script en MyFirstGantt. 3) muestra de datos JSON

Cree un SampleData. json que contiene una lista de tareas de muestra que se mostrarán en el diagrama de Gantt.
Data de muestra. contenido de json:

[{ "TName": "Team1", "PStartTime": "2012-04-02T00: 00: 00Z", "PEndTime": "2012-04-18T00: 00: 00Z", "Recursos": [{ "RName ”:“ JohnH ”, “ PStartTime ”:“ 2012-04-04T00: 00: 00Z ”, “ PEndTime ”:“ 2012-04-15T00: 00: 00Z ”, “ Tareas ”: [{ “ TaskName ”:“ Tarea 1 ”, “ StartTime ”:“ 2012-04-03T00: 00: 00Z ”, “ EndTime ”:“ 2012-04-12T00: 00: 00Z ”, “ Progreso ”: 20 }] }, { “ RName ”:“ VictorG ”, “ PStartTime ”:“ 2012-04-06T00: 00: 00Z ”, “ PEndTime ”:“ 2012-04-18T00: 00: 00Z ”, “ Tareas ”: [{ “ TaskName ”:“ Tarea 1 ”, "StartTime": "2012-04-03T00: 00: 00Z",





















"EndTime": "2012-04-18T00: 00: 00Z",
"Progress": 20
}]
},
{ "RName": "JasonS", "PStartTime": "2012-04-06T00: 00: 00Z", "PEndTime": "2012-04-18T00: 00: 00Z", "Tareas": [{ "TaskName": "Task 1", "StartTime": "2012-04-06T00: 00: 00Z", "EndTime" : "2012-04-12T00: 00: 00Z", "Progreso": 20 }, { "TaskName": "Tarea 2", "StartTime": "2012-04-12T00: 00: 00Z", "EndTime": "2012-04-18T00: 00: 00Z", "Progreso": 70 }] }] }, { "TName": "Team2", "PStartTime": "2012-04-10T00: 00: 00Z", "PEndTime ”:“ 2012-04-20T00: 00: 00Z ”,





















"Recursos": [{ "RName": "BalajiN", "PStartTime": "2012-04-08T00: 00: 00Z", "PEndTime": "2012-04-18T00: 00: 00Z", "Tareas": [{ "TaskName": "Task 1", "StartTime": "2012-04-08T00: 00: 00Z", "EndTime": "2012-04-20T00: 00: 00Z", "Progreso": 20 }] }, { "RName": "LiM", "PStartTime": "2012-04-12T00: 00: 00Z", "PEndTime": "2012-04-18T00: 00: 00Z", "Tareas": [{ " TaskName ”:“ Tarea 1 ”, “ StartTime ”:“ 2012-04-08T00: 00: 00Z ”, “ EndTime ”:“ 2012-04-19T00: 00: 00Z ”, “ Progreso ”: 90 }] }, { "RName": "StacyH",























"PStartTime": "2012-04-05T00: 00: 00Z",
"PEndTime": "2012-04-20T00: 00: 00Z",
"Tareas": [{ "TaskName": "Tarea 1", "StartTime" : "2012-04-06T00: 00: 00Z", "EndTime": "2012-04-12T00: 00: 00Z", "Progreso": 20 }] }] }] 4) Archivo PHP que contiene el widget de Gantt Crear un nuevo PHP en el directorio del proyecto (MyFirstGantt) y haga referencia a los siguientes archivos fuente. Recuerde vincular a la versión correcta de RadiantQ jQuery Gantt en la última referencia a continuación.

<link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Src/Styles/radiantq.gantt.default.css" rel="stylesheet" />
<link href="Src/Styles/VW.Grid.css" rel="stylesheet" />
<script src="Src/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Src/Scripts/jquery.layout-latest.min.js"></script>
<script src="Src/Scripts/Utils/date.js" type="text/javascript"></script>
<script src="Src/ResourceStrings/en-US.js" type="text/javascript"></script>
<script src='Src/Scripts/VW.Grid.1.min.js' type='text/javascript'></script>
<script src='Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js' type='text/javascript'></script>>
<script src="/Samples/Src/Scripts/RQGantt_Init.min.js" type="text/javascript"></script>
<!-- It automatically includes required PHP gantt extension files-->
require_once "lib/AutoLoad.php

Crear tabla de Gantt y Gantt
Inicializar el widget GanttControl y la tabla de Gantt como se muestra a continuación

<? php // Configuración de Gantt $ ganttSetttings = new RadiantQ \ Gantt \ GanttSettings (); // Opciones de GanttControl. $ opciones = nuevo RadiantQ \ Gantt \ FlexyGanttOptions (); $ ganttSetttings-> DataSourceUrl = "FlexyGanttSkeleton.json"; // definiciones de columna $ NameColumn = new RadiantQ \ Gantt \ Column (); $ NameColumn-> field = "Nombre"; $ NameColumn-> title = "Nombre"; $ NameColumn-> clientEditorTemplate = "flexyGantNameEditor"; $ NameColumn-> clientTemplate = "flexyGanttNameColumnTemplate"; $ GanttTableOptions-> columnas = matriz ($ NameColumn); $ opciones-> GanttTableOptions = $ GanttTableOptions; $ opciones-> HierarchyResolverFunction = "ResolverFunction"; $ opciones-> TaskTooltipTemplateID = "TaskTooltipTemplate"; $ opciones-> TaskStartTimeProperty = "StartTime"; $ opciones-> TasksListProperty = "Tareas"; $ opciones-> ParentTaskStartTimeProperty = "PStartTime"; $ opciones-> TaskItemTemplate = "

"; $ opciones-> ParentTaskItemTemplate ="

"; $ opciones-> TaskEndTimeProperty =" EndTime "; $ opciones-> ParentTaskEndTimeProperty =" PEndTime "; // Opciones de GanttChart. $ GanttChartOptions = new RadiantQ \ Gantt \ GanttChartOptions (); $ GanttChartOptions (2014) -04-03 "); $ GanttChartOptions-> TimeIndicatorLineOption = 1; $ opciones -> GanttChartOptions = $ GanttChartOptions; $ ganttSetttings-> Opciones = $ opciones; // Inicialización de Ganttcontrol. $ Gantt = new RadiantQ \ UI \ FlexyGantttings ( ); // Establecer atributos para los elementos de Ganttcontrol. $ Gantt-> setStyleAttribute ("ancho", "100%") -> setStyleAttribute ("altura", "100%") -> setAttribute ("id", "gantt_container") ; // Para renderizar el FlexyGantt. Echo $ gantt-> Render ();?>

// Plantilla de nombre y editor con indicación de expansión.

Script
// para obtener el nombre de la
función de lista acotada nameConverter (flexyNodeData, value) { var data; // La cuadrícula llama a este convertidor con flexyNodeData como arg. if (flexyNodeData.Data) datos = flexyNodeData.Data (); // La cuadrícula llama a este convertidor con flexyNodeData como contexto de datos. else data = flexyNodeData; if (value == undefined) { if (data [“TName”]! = undefined) return data [“TName”]; else if (data [“RName”]! = undefined) return data [“RName”]; else if (data ["TaskName"]! = undefined) return data ["TaskName"]; } else { if (data ["TName"]! = undefined)

















datos ["TName"] = valor;
else if (data [“RName”]! = undefined)
data [“RName”] = valor;
else if (data ["TaskName"]! = undefined)
data ["TaskName"] = valor;
}
volver;
};
// para resolver la fuente de datos jerárquica.
function ResolverFunction (data) { // Si los datos están envueltos por KO, entonces los datos en sí mismos podrían ser una función y entonces elegimos el objeto de la función. if ( Error de análisis de KaTeX: esperado '}', obtuvo 'EOF' al final de la entrada:… {if ( .isFunction (datos [“Recursos”])) devuelve datos "Recursos" ; de lo contrario, devuelve datos ["Recursos"]; } else if (data ["RName"]! = undefined) {







if (data ["Tasks"]! = undefined) { return null; } else // Devuelve una matriz vacía para mantener este padre plegable sin hijos. Devuelve nulo para convertirlo en un nodo hoja. return new Array (); } return null; } El contenido de su directorio MyFirstGantt debería verse así: Src Scripts json file PHP file Abra FirstGanttSample.PHP en su navegador, debería ver:

Finalmente, eche un vistazo a este tema, muestra cómo limpiar la carpeta Src en el proyecto para eliminar archivos innecesarios.