Freigeben über

Vorgehensweise: Erstellen eines einfachen JS-Rasters

  • Artikel

Letzte Änderung: Dienstag, 21. Juni 2011

Gilt für: SharePoint Foundation 2010

In diesem Thema wird veranschaulicht, wie ein einfaches Rastersteuerelement mithilfe von JS Grid-Steuerelement und Microsoft Visual Studio 2010 erstellt wird.

HinweisHinweis

Auf Ihrem Computer werden ggf. andere Namen oder Speicherorte für einige der Visual Studio-Benutzeroberflächenelemente in den folgenden Anweisungen angezeigt. Diese Elemente werden von der vorhandenen Visual Studio-Edition und den aktivierten Einstellungen bestimmt.

In diesem Beispiel wird ein visuelles Webpart verwendet; das visuelle Webpart unterstützt die Entwurfsansicht für das ASCX-Steuerelement und ermöglicht zudem das Erstellen einfacher Webparteigenschaften, ohne ein Editor-Webpart erstellen zu müssen.

Zum Rendern des JS Grid-Steuerelement müssen Sie einige Beispieldaten bereitstellen, die in der Datei GridData.cs enthalten sind. Der Code zum Analysieren der Daten ist in der Datei GridUtilities.cs enthalten. Beide Dateien sind im Ordner GridUtils gespeichert. Obwohl die Datendatei und Hilfsprogrammdateien für das Erstellen des einfachen Rasters eigentlich zu umfangreich sind, enthalten sie Features, die Sie in folgenden Themen verwenden werden.

Voraussetzungen

  • Microsoft SharePoint Foundation 2010

  • Microsoft Visual Studio 2010

  • SharePoint-Entwicklungstools in Microsoft Visual Studio 2010

HinweisHinweis

Sie können dieses Verfahren zwar auch ohne Visual Studio durcharbeiten, es ist jedoch einfacher, wenn Sie Visual Studio 2010 und die SharePoint-Entwicklungstools in Visual Studio 2010 verwenden.

So erstellen Sie ein leeres SharePoint-Projekt

  1. Starten Sie Visual Studio 2010 mit der Option Als Administrator ausführen.

  2. Klicken Sie im Menü Datei auf Neu, und wählen Sie dann Projekt aus.

  3. Erweitern Sie im Dialogfeld Neues Projekt nacheinander die KnotenVisual C# und SharePoint, und wählen Sie den Knoten 2010 aus.

  4. Wählen Sie im Bereich Vorlagen die Option Leeres SharePoint-Projekt aus, nennen Sie die Projektmappe JSGrid, und klicken Sie auf OK. Der Assistent zum Anpassen von SharePoint wird angezeigt, in dem Sie die Website zum Debuggen des Projekts und die Vertrauensebene der Projektmappe auswählen können.

  5. Klicken Sie im Assistenten zum Anpassen von SharePoint auf Als Farmlösung bereitstellen und dann auf Fertig stellen.

    HinweisHinweis

    Jedes Webpart muss eine (voll vertrauenswürdige) Farmlösung sein.

So fügen Sie dem Projekt ein Webpart hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neues Element.

  2. Erweitern Sie im Dialogfeld Neues Element hinzufügen den Knoten SharePoint, und wählen Sie dann 2010 aus.

  3. Wählen Sie im Knoten 2010 die Option Visuelles Webpart aus, geben Sie dem Element den Namen JSGridWebPart, und klicken Sie auf Hinzufügen. Das Webpart wird im Projektmappen-Explorer angezeigt. Über diese Aktion werden die Bibliothekverweise und (in diesem Beispiel) die Datei JSGridWebPart.cs erstellt.

So fügen Sie das JSGrid-Steuerelement hinzu

  • Fügen Sie den folgenden Code in die Datei JSGridWebPartUserControl.ascx ein, um das Steuerelement zu initialisieren.

    <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>

    In der ersten Zeile wird das JS Grid-Steuerelement beschrieben. Das Skript in den folgenden Zeilen registriert den Raster-Manager, die Datenquelle und ein rechtsbündiges Format und verarbeitet die Initialisierungsaufgaben.

HinweisHinweis

Beim Hinzufügen eines Webparts zu einer SharePoint 2010-Seite werden Webparts in Gruppen angezeigt. Die Gruppe, in der ein Webpart angezeigt wird, ist vom Group Property-Namen in der Datei Elements.xml abhängig. Die Gruppe ist standardmäßig auf "Custom" festgelegt. Sie können eine benutzerdefinierte Gruppe erstellen, indem Sie die Group Property ändern. Um z. B. die Gruppe "Finance" zu erstellen, legen Sie den Wert auf "Finance" (<Property Name="Group" Value="Finance" />) fest.

So fügen Sie den "GridUtils"-Code hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neuer Ordner. Nennen Sie den Ordner GridUtils.

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner GridUtils, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neue Elemente. Wählen Sie nacheinander Visual C#, Code und Codedatei aus. Nennen Sie die Datei GridUtilities.cs.

  3. Wiederholen Sie den vorherigen Schritt zum Erstellen der Datei GridData.cs.

  4. Kopieren Sie den Inhalt von GridUtilities.cs und GridData.cs aus den folgenden Beispielen in die entsprechenden Dateien im Ordner 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;
        }
    }
}

So ändern Sie die Datei "JSGridWebPartUserControl.ascx.cs"

  1. Öffnen Sie JSGridWebPartUserControl.ascx.cs.

  2. Fügen Sie die folgenden Deklarationen hinzu.

    using System.Data;
using Microsoft.SharePoint.JSGrid;
using JSGridSample.GridUtilityLib;

  3. Ersetzen Sie den Inhalt der JSGridWebPartUserControl-Klasse durch den folgenden Code.

    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";
        }
    }
    HinweisHinweis

    JS Grid-Steuerelement könnte auch im OnPreRender-Ereignishandler anstelle des On_Load-Ereignishandlers erstellt werden. Dies wäre beispielsweise dann notwendig, wenn Sie dem Webpart Eigenschaften hinzufügen wollten.

Das JS Grid-Steuerelement-Serialisierungsprogramm serialisiert die JS Grid-Steuerelement-Konfiguration und -Daten in eine JSON-Zeichenfolge (JavaScript Object Notation). Das Rastersteuerelement generiert die JSON und legt sie auf der Seite ab.

HinweisHinweis

Für Rasterfelder müssen SerializeDataValue bzw. SerializeLocalizedValue auf true festgelegt werden. Beide Elemente können, doch ein Element muss auf true festgelegt werden.

So testen Sie das Webpart

  1. Drücken Sie in Visual Studio F5, um das Projekt auszuführen.

  2. Die Bereitstellung erfolgt, die SharePoint-Website wird geöffnet. Das Webpart wird automatisch dem SharePoint 2010-Webpartkatalog hinzugefügt.

  3. Öffnen und bearbeiten Sie eine beliebige Webparts-Seite. Sie können das Webpart einer beliebigen Webparts-Seite hinzufügen.

  4. Klicken Sie auf Einfügen, dann auf Webpart, und wählen Sie das Webpart JSWebPart in der benutzerdefinierten Kategorie aus. Das Webpart wird auf der Seite angezeigt.

    HinweisHinweis

    Wenn Sie Windows Internet Explorer schließen oder UMSCHALT+F5 in Visual Studio drücken, wird das Webpart von Visual Studio zurückgezogen (sofern Nach Debuggen automatisch zurückziehen auf der Registerkarte SharePoint der Eigenschaftenseite ListProjects ausgewählt ist), und Internetinformationsdienste (Internet Information Services, IIS) werden zurückgesetzt. Wenn Sie im Menü Build auf die Option Lösung bereitstellen klicken, wird die Lösung von Visual Studio auf dem Entwicklungscomputer bereitgestellt, sodass Sie das Webpart unabhängig von Visual Studio verwendet können.

Weitere Informationen zum Arbeiten mit Webparts finden Sie unter Gewusst wie: Verwenden von Webparts auf einer Seite.

Weitere Schritte

Gewusst wie: Erstellen eines PivotChart mithilfe von JS Grid.

Siehe auch

Referenz

Microsoft.SharePoint.JSGrid

Konzepte

JS Grid-Steuerelement