Procédure : créer une grille JS de base
Dernière modification : mardi 21 juin 2011
S’applique à : SharePoint Foundation 2010
Cette rubrique montre comment créer un contrôle de grille de base à l’aide du Contrôle Grille JS et de Microsoft Visual Studio 2010.
Notes
Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur de Visual Studio dans les instructions suivantes. L’édition Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments.
Cet exemple utilise un composant Visual Web Part ; ce composant Visual Web Part permet d’activer le mode Création du contrôle .ascx, ainsi que la création de propriétés simples de composant WebPart sans devoir créer une Partie Editor.
Pour permettre le rendu du Contrôle Grille JS, vous devez fournir certaines données exemples. Celles-ci se trouvent dans le fichier GridData.cs. Le code permettant d’analyser les données se trouve dans le fichier GridUtilities.cs. Les deux fichiers sont stockés dans le dossier GridUtils. Bien que le fichier de données et le fichier des utilitaires soient plus complets que nécessaire pour la création de la grille de base, ils contiennent des fonctionnalités que vous utiliserez dans des rubriques ultérieures.
Conditions requises
Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Outils de développement SharePoint dans Microsoft Visual Studio 2010
Notes
Bien que vous puissiez effectuer cette procédure sans recourir à Visual Studio, sa réalisation sera plus aisée si vous utilisez Visual Studio 2010 et les Outils de développement SharePoint dans Visual Studio 2010.
Pour créer un projet SharePoint vide
Démarrez Visual Studio 2010 en utilisant l’option Exécuter en tant qu’administrateur.
Dans le menu Fichier, cliquez sur Nouveau, puis sélectionnez Projet.
Dans la boîte de dialogue Nouveau projet, développez le nœud Visual C#, développez le nœud SharePoint, puis sélectionnez le nœud 2010.
Dans le volet Modèles, sélectionnez Projet SharePoint vide, attribuez à la solution le nom JSGrid, puis cliquez sur OK. L’Assistant Personnalisation de SharePoint apparaît. Cet Assistant vous permet de sélectionner le site à utiliser pour déboguer le projet et le niveau de confiance de la solution.
Dans l’Assistant Personnalisation de SharePoint, sélectionnez Déployer en tant que solution de batterie, puis cliquez sur Terminer pour accepter le site SharePoint local par défaut.
Notes
Tout composant WebPart doit être une solution de batterie de serveurs (entièrement fiable).
Pour ajouter un composant WebPart au projet
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur la solution, pointez sur Ajouter, puis sélectionnez Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, développez le nœud SharePoint, puis sélectionnez 2010.
Dans le nœud 2010, sélectionnez Composant Visual Web Part, attribuez à l’élément le nom JSGridWebPart, puis cliquez sur Ajouter. Le composant WebPart apparaît dans l’Explorateur de solutions. Cette action génère les références de bibliothèque et, dans notre exemple, JSGridWebPart.cs.
Pour ajouter le contrôle JSGrid
Pour initialiser le contrôle, collez le code suivant dans JSGridWebPartUserControl.ascx.
<SharePoint:JSGrid ID="_grid" runat="server" /> <script type="text/javascript"> Type.registerNamespace("GridManager"); GridManager = function () { this.Init = function (jsGridControl, initialData, props) { var dataSource = new SP.JsGrid.StaticDataSource(initialData); var jsGridParams = dataSource.InitJsGridParams(); jsGridControl.Init(jsGridParams); jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' })); jsGridControl.Init(jsGridParams); } }; </script>La première ligne décrit le Contrôle Grille JS. Le script des lignes suivantes inscrit le gestionnaire de la grille, inscrit la source de données, inscrit un style d’alignement à droite et gère les tâches d’initialisation.
Notes
Lors de l’ajout d’un composant WebPart à une page SharePoint 2010, les composants WebPart sont affichés en groupes. Le groupe dans lequel un composant WebPart apparaît est contrôlé par le nom Group Property dans le fichier Elements.xml. Le groupe est défini sur « Custom » par défaut. Vous pouvez créer un groupe personnalisé en modifiant la valeur du paramètre Group Property. Par exemple, pour créer un groupe Finance, définissez la valeur sur « Finance » (<Property Name="Group" Value="Finance" />).
Pour ajouter le code des utilitaires de grille
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom de la solution, pointez sur Ajouter, puis cliquez sur Nouveau dossier. Attribuez au dossier le nom GridUtils.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier GridUtils, pointez sur Ajouter, puis cliquez sur Nouveaux éléments. Sélectionnez Visual C#, Code, puis Fichier de code. Attribuez un nom au fichier GridUtilities.cs.
Répétez l’étape précédente pour créer le fichier GridData.cs.
Copiez les contenus de GridUtilities.cs et de GridData.cs, comme indiqué dans les exemples suivants, dans leurs fichiers respectifs dans le dossier GridUtils.
GridUtilities.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; using Microsoft.SharePoint.JSGrid; using Microsoft.SharePoint; namespace JSGridSample.GridUtilityLib { public static class GridUtilities { public static IList<GridColumn> GetGridColumns(DataTable table) { List<GridColumn> r = new List<GridColumn>(); foreach (DataColumn iterator in table.Columns) { /* Columns are visible in the grid; we don't want these as grid columns. */ // HierarchyParentKey is used in the how to: Create a Hierarchy Grid topic. if (iterator.ColumnName != "Key" && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName //&& iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // uncomment for the Create a Gantt Chart Using JS Grid how-to. && iterator.ColumnName != "HierarchyParentKey" // The costq and Quart fields are used in the Create a Pivot Chart Using JS Grid how-to. && iterator.ColumnName.Substring(0, 5) != "costq" && iterator.ColumnName.Substring(0, 5) != "Quart") { GridColumn col = new GridColumn(); // Point the column at a fieldKey name. col.FieldKey = iterator.ColumnName; // Give the column header a name. col.Name = iterator.ColumnName; // Define the column width. col.Width = 210; // Define column settings. if (iterator.ColumnName == "Department") { col.IsHidable = false; } if (iterator.ColumnName == "Yearly Estimate") { col.IsSortable = true; } // Add the column. r.Add(col); } } return r; } public static IList<GridField> GetGridFields(DataTable table) { List<GridField> r = new List<GridField>(); foreach (DataColumn iterator in table.Columns) { GridField field = new GridField(); field = formatGridField(field, iterator); r.Add(field); } return r; } /** This code matches the propType of the incoming column with the outgoing grid field. HierarchyParentKey is used in the Hierarchy how to. **/ public static GridField formatGridField(GridField gf, DataColumn dc) { // Set field key name. gf.FieldKey = dc.ColumnName; // When in doubt, serialize the data value. gf.SerializeDataValue = true; if (dc.ColumnName != "Key" && dc.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName // Uncomment for the Create a Gantt Chart Using JS Grid how-to. // && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName && dc.ColumnName != "HierarchyParentKey") { // Determine whether the field is timephased. if (dc.ColumnName.Substring(0, 5) == "costq") { } if (dc.ColumnName.Substring(0, 5) == "Quarter") { /* Ensure that the timephased column headers are always read-only despite the grid settings. */ gf.EditMode = EditMode.ReadOnly; } // Add properties based on the type. if (dc.DataType == typeof(String)) { gf.PropertyTypeId = "String"; /* The Localizer determines how we render the underlying data on screen. */ gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert) { return toConvert == null ? "" : toConvert.ToString(); }; /* The Serialization type is a required property. */ gf.SerializeLocalizedValue = true; gf.SerializeDataValue = false; } else if (dc.DataType == typeof(Int16) || dc.DataType == typeof(Int32) || dc.DataType == typeof(Int64) || dc.DataType == typeof(Decimal) || dc.DataType == typeof(Double)) { gf.PropertyTypeId = "JSNumber"; /* The Localizer determines how we render the underlying data on screen. */ gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert) { return toConvert == null ? "" : toConvert.ToString(); }; // Right align numeric columns gf.DefaultCellStyleId = "TextRightAlign"; /* The Serialization type is a required property. */ gf.SerializeLocalizedValue = true; gf.SerializeDataValue = false; } else if (dc.DataType == typeof(Hyperlink)) { gf.PropertyTypeId = "Hyperlink"; gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert) { return toConvert == null ? "" : toConvert.ToString(); }; gf.SerializeLocalizedValue = false; gf.SerializeDataValue = true; } else if (dc.DataType == typeof(bool)) { gf.PropertyTypeId = "CheckBoxBoolean"; gf.SerializeDataValue = true; gf.SerializeLocalizedValue = false; } else if (dc.DataType == typeof(DateTime)) { gf.PropertyTypeId = "JSDateTime"; gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert) { return toConvert == null ? "" : toConvert.ToString(); }; gf.SerializeDataValue = true; gf.SerializeLocalizedValue = true; } else throw new Exception("No PropTypeId defined for this datatype" + dc.DataType); } return gf; } } }GridData.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; using System.Web.UI.WebControls; using Microsoft.SharePoint.JSGrid; namespace JSGridSample.GridUtilityLib { public class GridData { /** * This method returns a Basic data table with a 'Key' column * and sample column of various types. * @param numRows is the number of rows of data to create. * */ Random _rand = new Random(); public virtual DataTable Data(int numRows) { // Create and initialize the data table. DataTable data = new DataTable(); data = new DataTable(); data.Locale = System.Globalization.CultureInfo.InvariantCulture; // Add the columns that we care about. data.Columns.Add(new DataColumn("Key", typeof(Guid))); data.Columns.Add(new DataColumn(GridSerializer.DefaultGridRowStyleIdColumnName, typeof(String))); data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); data.Columns.Add(new DataColumn("Title", typeof(string))); data.Columns.Add(new DataColumn("Department Manager", typeof(string))); data.Columns.Add(new DataColumn("Department", typeof(string))); data.Columns.Add(new DataColumn("Start Date", typeof(DateTime))); data.Columns.Add(new DataColumn("Finish Date", typeof(DateTime))); data.Columns.Add(new DataColumn("CompleteThrough", typeof(DateTime))); data.Columns.Add(new DataColumn("Yearly Estimate", typeof(int))); data.Columns.Add(new DataColumn("FY 2009 Estimate", typeof(int))); data.Columns.Add(new DataColumn("FY 2010 Estimate", typeof(int))); data.Columns.Add(new DataColumn("checkbox", typeof(Boolean))); data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink))); //data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid how-to. Guid? parent = null; // Create dummy data for the number of rows we have. DataRow dr; int j = 0; for (int i = 0; i < numRows; i++) { var curKey = Guid.NewGuid(); dr = data.NewRow(); dr["Key"] = curKey; // Used for the hierarchy grid How-to. if (i % 10 == 0) { parent = curKey; j++; } if (parent.HasValue) { dr["HierarchyParentKey"] = parent.Value; } if (parent == null) { parent = curKey; } dr["Title"] = "Task " + j + "." + i % 10; dr["Department Manager"] = "Manager"; dr["Department"] = "Department- " + i.ToString(); dr["FY 2009 Estimate"] = _rand.Next(1000000) + 30000; dr["FY 2010 Estimate"] = _rand.Next(1000000) + 30000; dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"] + (int)dr["FY 2010 Estimate"]) / 2; dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); dr["checkbox"] = i % 2 != 0; dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "https://www.contoso.com" }; data.Rows.Add(dr); } return data; } } }
Pour modifier JSGridWebPartUserControl.ascx.cs
Ouvrez JSGridWebPartUserControl.ascx.cs.
Ajoutez les déclarations suivantes.
using System.Data; using Microsoft.SharePoint.JSGrid; using JSGridSample.GridUtilityLib;Remplacez le contenu de la classe JSGridWebPartUserControl par le texte suivant.
public partial class JSGridWebPartUserControl : UserControl { protected global::Microsoft.SharePoint.WebControls.JSGrid _grid; protected void Page_Load(object sender, EventArgs e) { // Build some simple data for the grid to display. DataTable data = new GridData().Data(20); // Create a grid serializer to connect to data. GridSerializer gds = new GridSerializer(SerializeMode.Full, data, "Key", new FieldOrderCollection(new String[] { "Department" }), GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data)); // Point the grid serializer at the grid serializer data. _grid.GridDataSerializer = gds; // Tell the grid to listen to the GridManager controller. _grid.JSControllerClassName = "GridManager"; } }Notes
Le Contrôle Grille JS peut également être créé dans le gestionnaire d’événements OnPreRender au lieu du gestionnaire d’événements On_Load. Cela est nécessaire, par exemple, si vous souhaitez ajouter des propriétés au composant WebPart.
Le sérialiseur du Contrôle Grille JS sérialise les données et la configuration du Contrôle Grille JS en une chaîne JSON (JavaScript Object Notation). Le contrôle de la grille génère la chaîne JSON et la place sur la page.
Notes
Pour les champs de la grille, le paramètre SerializeDataValue ou SerializeLocalizedValue doit être défini sur true. Les deux paramètres peuvent être définis sur true, l’important étant qu’au moins l’un d’eux le soit.
Pour tester le composant WebPart
Dans Visual Studio, appuyez sur la touche F5 pour exécuter le projet.
Le déploiement se produit et le site SharePoint s’ouvre. Le composant WebPart est automatiquement ajouté à la galerie de composants WebPart SharePoint 2010.
Ouvrez et modifiez une Page de composants WebPart. Vous pouvez ajouter le composant WebPart à n’importe quelle Page de composants WebPart.
Cliquez sur Insérer et cliquez sur Composant WebPart ; sélectionnez le composant JSWebPart dans la catégorie personnalisée. Le composant WebPart apparaît dans la page.
Notes
Lorsque vous fermez Windows Internet Explorer ou que vous appuyez sur Maj+F5 dans Visual Studio, Visual Studio retire le composant WebPart (si l’option Retrait automatique après le débogage est sélectionnée sous l’onglet SharePoint de la page de propriétés ListProjects), puis réinitialise Internet Information Services (IIS). Si vous cliquez dans le menu Générer sur Déployer la solution, Visual Studio déploie la solution sur l’ordinateur de développement afin que vous puissiez utiliser le composant WebPart indépendamment de Visual Studio
Pour plus d’informations sur l’utilisation des composants WebPart, voir Procédure : utiliser des composants WebPart dans une page.
Étapes suivantes
Procédure : créer un graphique croisé dynamique à l’aide de la grille JS.