Compartir a través de


Procedimiento para crear una cuadrícula jerárquica

Última modificación: jueves, 16 de junio de 2011

Hace referencia a: SharePoint Foundation 2010

En este procedimiento se muestra cómo crear un Control de JS Grid jerárquico. Se basa en el proyecto finalizado en Procedimiento para crear un control de JS Grid básico.

Nota

El equipo debe mostrar distintos nombres o ubicaciones para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La versión de Visual Studio que se tenga instalada y la configuración que se use determinan estos elementos.

Requisitos previos

Nota

Aunque este procedimiento se puede realizar sin usar Visual Studio 2010, es más fácil usar Visual Studio 2010 y las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010.

Creación de una cuadrícula jerárquica

Cree una cuadrícula jerárquica llamando a EnableHierarchy(DataTable, String, String, Boolean). El método requiere una columna de clave primaria y una columna de texto de esquema. La columna de clave primaria y la columna de texto de esquema ya se han incluido en los archivos de GridData.cs y GridUtilities.cs creados en Procedimiento para crear un control de JS Grid básico; solo es necesario habilitar la jerarquía.

Para crear una cuadrícula jerárquica

  1. En las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010, abra el proyecto JSGrid creado siguiendo los pasos descritos en Procedimiento para crear un control de JS Grid básico.

  2. Abra JSGridWebPartUserControl.ascx.cs.

  3. En el método Page_Load, inmediatamente después de definir el controlador de la cuadrícula, habilite la jerarquía usando EnableHierarchy(DataTable, String, String, Boolean).

    _grid.JSControllerClassName = "GanttManager";
    gds.EnableHierarchy(null, "HierarchyParentKey", "Title", false);
    

    El primer argumento, si no es null, define una tabla de datos sin filtrar. El segundo argumento es la columna de clave primaria de la jerarquía, HierarchyParentKey, definida en GridData.cs. El tercer parámetro indica la columna que muestra el indicador de jerarquía. (En nuestro caso, es la columna Title, que también se define en GridData.cs). El último parámetro, si es true, indica que se debe pasar la tabla de datos al cliente. Por motivos de simplicidad, en este ejemplo no se usa una tabla de datos sin filtrar.

  4. Repase las definiciones de HierarchyParentKey y Title en GridUtilities.cs.

    Abra GridUtilities.cs.

    En GridUtilities.cs, la HierarchyParentKey no debería estar visible. Recuerde que las columnas están visibles mientras que los campos no lo están, que es la razón por la que en GridUtilities.cs nos aseguramos de que HierarchyParentKey no está visible.

    if (iterator.ColumnName != "Key"
                        && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                        && iterator.ColumnName != "HierarchyParentKey"
                        && iterator.ColumnName.Substring(0, 5) != "costq"
                        && iterator.ColumnName.Substring(0, 5) != "Quart")
    
  5. Abra GridData.cs para repasar las definiciones de HierarchyParentKey y Title en GridData.cs.

    Las columnas Title y HierarchyParentKey se agregan al método DataTable.

    data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); // Hierarchial Grid
    data.Columns.Add(new DataColumn("Title", typeof(string)));
    

    En el método DataTable, observe el código que rellena la columna HierarchyParentKey y la columna de Title con datos.

         // used for the hierarchy grid how-to.
                  dr["Key"] = curKey;
                    if (i % 10 == 0)
                    {
                        parent = curKey;
                        j++;
                    }
                    if (parent.HasValue)
                    {
                        dr["HierarchyParentKey"] = parent.Value;
                    }
                    if (parent == null)
                    {
                        parent = curKey;
                    }
                    dr["Tasks"] = "Task " + j + "." + i % 10;
    

    En este ejemplo, el operador de módulo se usa para crear 10 tareas secundarias para cada tarea principal. Los números de las tareas, por ejemplo 1.1, 1.2 y 1.3, se almacenan en la columna Title.

Las listas completas de GridData.cs y GridUtilities.cs se pueden encontrar en Procedimiento para crear un control de JS Grid básico.

Para probar el elemento web

  1. En Visual Studio, presione F5 para ejecutar el proyecto.

    Al ejecutar el proyecto, tiene lugar la implementación y se abre el sitio de SharePoint 2010. El elemento web se agrega automáticamente a la galería de elementos web de SharePoint 2010.

  2. Abra y edite cualquier página de elementos web. Puede agregar el elemento web a cualquier página de elementos web.

  3. Haga clic en Insertar, haga clic en Elemento web y, a continuación, seleccione JSWebPart en la categoría personalizada. Se mostrará el elemento web en la página.

Vea también

Referencia

EnableHierarchy(DataTable, String, String, Boolean)