Freigeben über

JS Grid-Steuerelementwidgets

  • Artikel

Letzte Änderung: Freitag, 30. April 2010

Gilt für: SharePoint Foundation 2010

JS Grid-Steuerelement enthält eine Komponentenbibliothek mit Widgets. Diese Widgets stellen Funktionen wie eine Datumsauswahl oder eine Linkauswahl bereit.

JS Grid-Steuerelementwidgets

  • Datumsauswahl

  • Linkauswahl

Implementieren von Widgets

So fügen Sie einem Raster ein Datumsauswahlwidget hinzu

  1. Der Eigenschaftentyp der eingehenden Spalte muss mit dem des ausgehenden Rasterfelds übereinstimmen. Die Datumsauswahl wird dem Raster hinzugefügt, wenn Sie die PropertyTypeID-Eigenschaft auf JSDateTime festlegen.

    else if (dc.DataType == typeof(DateTime))
    {
        gf.PropertyTypeId = "JSDateTime";
        gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
        {
            return toConvert == null ? "" : toConvert.ToString();
        };
        gf.EditMode = EditMode.ReadWrite;
        gf.SerializeDataValue = true;
        gf.SerializeLocalizedValue = true;
    }

    ElseIf dc.DataType Is GetType(DateTime) Then
    gf.PropertyTypeId = "JSDateTime"
    gf.Localizer = CType(Function(row As DataRow, toConvert As Object) As String
    Return If(toConvert Is Nothing, Nothing, toConvert.ToString) 
    End Function, ValueLocalizer)
    gf.EditMode = EditMode.ReadWrite
    gf.SerializeDataValue = True
    gf.SerializeLocalizedValue = True

    In diesem Beispiel ist EditMode auf ReadWrite festgelegt, und SerializeDataValue und SerializeLocalizedValue sind auf true festgelegt.

  2. Fügen Sie eine Datumsspalte vom Typ DateTime hinzu.

    data.Columns.Add(new DataColumn("Start Date", typeof(DateTime)));

    data.Columns.Add(New DataColumn("Start Date", GetType(Datetime)))

  3. Definieren Sie die Daten für die Datumsspalte. In diesem Beispiel werden zufällige Daten für die Spalte "Start Date" generiert.

    dr["Start Date"] = DateTime.Now.AddSeconds(rand.Next(60 * 60 * 24 * 20));

    dr("Start Date") = DateTime.Now.AddSeconds(rand.Next(60 * 60 * 24 * 20))

    Klicken Sie auf eine der Datumszellen, um diese zu markieren. Der Umriss der Zelle wird hervorgehoben, und daneben wird ein kleines Symbol angezeigt. Wenn die Zelle editierbar ist und Sie auf die Zelle selbst klicken, kann das Datum direkt bearbeitet werden. Wenn Sie auf das Symbol neben der Zelle klicken, wird die Datumsauswahl angezeigt.

So fügen Sie einem Raster eine Linkauswahl hinzu

  1. Der Eigenschaftentyp der eingehenden Spalte muss mit dem des ausgehenden Rasterfelds übereinstimmen. Die Linkauswahl wird dem Raster hinzugefügt, wenn Sie die PropertyTypeID-Eigenschaft auf Hyperlink festlegen.

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

    ElseIf dc.DataType Is GetType(Hyperlink) Then
    gf.PropertyTypeId = "Hyperlink"
    gf.Localizer = CType(Function(row As DataRow, toConvert As Object) As String
    Return If(toConvert Is Nothing, Nothing, toConvert.ToString) 
    End Function, ValueLocalizer)
    gf.SerializeLocalizedValue = False
    gf.SerializeDataValue = True

  2. Fügen Sie dem Raster die Linkspalte hinzu.

    data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink)));

    data.Columns.Add(New DataColumn("Hyperlink", GetType(Hyperlink)))

  3. Definieren Sie die Daten für die Linkspalte. In diesem Beispiel wird als Anzeigetext "Contoso" und als URL https://www.contoso.com festgelegt.

    dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "https://www.contoso.com" };

    dr("Hyperlink") = New Hyperlink() With {.Display = "Contoso", .Address = "https://www.contoso.com"}

Klicken Sie auf eine Linkzelle, um diese zu markieren. Der Umriss der Zelle wird hervorgehoben, und daneben wird ein kleines Symbol angezeigt. Wenn Sie auf die Zelle selbst klicken, wird der Link in einem anderen Browserfenster geöffnet. Wenn Sie auf das Symbol links neben der Zelle klicken, wird ein Dialogfeld geöffnet, in dem Sie den Anzeigenamen und die URL ändern können.

Siehe auch

Referenz

Microsoft.SharePoint.JSGrid