如何：使用 JS 网格创建数据透视图

2015-06-15

上次修改时间： 2011年6月23日

适用范围： SharePoint Foundation 2010

此帮助主题说明如何使用 JS 网格控件和 Microsoft Visual Studio 2010 创建透视图。此主题紧接如何：创建基本 JS 网格。

完整的透视图可显示数据的透视视图，每个部分显示了两个财政年度的季度收益。若要创建透视图，您需要提供透视图数据、透视列定义和用于准确构建透视图的网格实用程序逻辑。最后，您需要启用透视网格窗格。

备注

在以下指令中，您的计算机可能会为部分 Visual Studio 用户界面 (UI) 元素显示不同的名称和位置。您拥有的 Visual Studio 版本和所使用的设置将确定这些元素。

先决条件

Microsoft SharePoint Foundation 2010
Visual Studio 2010
Microsoft Visual Studio 2010 中的 SharePoint 开发工具

完整的帮助主题：如何：创建基本 JS 网格

备注

虽然无需使用 Visual Studio 即可完成此帮助主题，但使用 Visual Studio 2010 和 Microsoft Visual Studio 2010 中的 SharePoint 开发工具会更轻松。

向网格数据文件添加透视数据

以管理员身份运行，启动 Visual Studio 2010 并打开在如何：创建基本 JS 网格中创建的 JSGrid 解决方案。
展开 GridUtils 文件夹，然后打开 GridData.cs。

透视网格需要每个部门的季度数据。基本网格的示例数据已包含在 GridData.cs 中，此过程将向该数据文件添加季度数据。
更改 DataTable return 语句，如下所示。
```
    return buildPivotedView(data);
```

将以下代码粘贴到 GridData.cs 中。

        private DataTable buildPivotedView(DataTable data)
        {
            //quarter 1 columns
            data.Columns.Add(new DataColumn("costq 1", typeof(int)));
            data.Columns.Add(new DataColumn("costq 2", typeof(int)));
            data.Columns.Add(new DataColumn("costq 3", typeof(int)));
            data.Columns.Add(new DataColumn("costq 4", typeof(int)));

            //quarter 2 columns
            data.Columns.Add(new DataColumn("costq 5", typeof(int)));
            data.Columns.Add(new DataColumn("costq 6", typeof(int)));
            data.Columns.Add(new DataColumn("costq 7", typeof(int)));
            data.Columns.Add(new DataColumn("costq 8", typeof(int)));

            //build column headers
            data.Columns.Add(new DataColumn("Quarter 1", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 2", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 3", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 4", typeof(string)));

            int i = 0;
            foreach (DataRow dr in data.Rows)
            {
                //pivoted view
                dr["costq 1"] = _rand.Next(1000000) + 30000;
                dr["costq 2"] = _rand.Next(1000000) + 30000;
                dr["costq 3"] = _rand.Next(1000000) + 30000;
                dr["costq 4"] = _rand.Next(1000000) + 30000;
                dr["costq 5"] = _rand.Next(1000000) + 30000;
                dr["costq 6"] = _rand.Next(1000000) + 30000;
                dr["costq 7"] = _rand.Next(1000000) + 30000;
                dr["costq 8"] = _rand.Next(1000000) + 30000;

                dr["FY 2009 Estimate"] = ((int)dr["costq 1"] + (int)dr["costq 2"] +
                    (int)dr["costq 3"] + (int)dr["costq 4"]) / 4;
                dr["FY 2010 Estimate"] = ((int)dr["costq 5"] + (int)dr["costq 6"] +
                    (int)dr["costq 7"] + (int)dr["costq 8"]) / 4;
                dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"]
                    + (int)dr["FY 2010 Estimate"]) / 2;
                i++;

                dr["Quarter 1"] = "Quarter 1";
                dr["Quarter 2"] = "Quarter 2";
                dr["Quarter 3"] = "Quarter 3";
                dr["Quarter 4"] = "Quarter 4";
            }
            return data;
        }

Private Function buildPivotedView(ByVal data As DataTable) As DataTable
    'quarter 1 columns
    data.Columns.Add(New DataColumn("costq 1", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 2", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 3", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 4", GetType(Integer)))

    'quarter 2 columns
    data.Columns.Add(New DataColumn("costq 5", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 6", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 7", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 8", GetType(Integer)))

    'build column headers
    data.Columns.Add(New DataColumn("Quarter 1", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 2", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 3", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 4", GetType(String)))

    Dim i As Integer = 0
    For Each dr As DataRow In data.Rows
        'pivoted view
        dr("costq 1") = _rand.Next(1000000) + 30000
        dr("costq 2") = _rand.Next(1000000) + 30000
        dr("costq 3") = _rand.Next(1000000) + 30000
        dr("costq 4") = _rand.Next(1000000) + 30000
        dr("costq 5") = _rand.Next(1000000) + 30000
        dr("costq 6") = _rand.Next(1000000) + 30000
        dr("costq 7") = _rand.Next(1000000) + 30000
        dr("costq 8") = _rand.Next(1000000) + 30000

        dr("FY 2009 Estimate") = (CInt(Fix(dr("costq 1"))) + CInt(Fix(dr("costq 2"))) + CInt(Fix(dr("costq 3"))) + CInt(Fix(dr("costq 4")))) / 4
        dr("FY 2010 Estimate") = (CInt(Fix(dr("costq 5"))) + CInt(Fix(dr("costq 6"))) + CInt(Fix(dr("costq 7"))) + CInt(Fix(dr("costq 8")))) / 4
        dr("Yearly Estimate") = (CInt(Fix(dr("FY 2009 Estimate"))) + CInt(Fix(dr("FY 2010 Estimate")))) / 2
        i += 1

        dr("Quarter 1") = "Quarter 1"
        dr("Quarter 2") = "Quarter 2"
        dr("Quarter 3") = "Quarter 3"
        dr("Quarter 4") = "Quarter 4"
    Next
    Return data
End Function

JS 网格控件序列化程序将 JS 网格控件配置和数据序列化为一个 JavaScript 对象表示法 (JSON) 字符串。该网格控件会生成 JSON 并将其置于页面上。

SerializeDataValue 指示序列化程序对实际值进行序列化。SerializeLocalizedValue 指示序列化程序对显示的值或本地化值进行序列化。让我们以日期为例，可以将日期表示为"11/2010"。以"月/年"形式显示的日期与实际的日期值之间存在很大的差异。

向网格实用程序文件添加透视代码

必须将用于分析透视网格数据的代码添加到 GridUtilities.cs。GridUtilities.cs 和 GridData.cs 位于 GridUtils 文件夹中。
在 Visual Studio 中，打开 GridUtilities.cs。

将以下代码粘贴到 GridUtilities.cs 中。

        public static IList<PivotedGridColumn> GetPivotedGridColumns(DataTable table)
        {
            List<PivotedGridColumn> r = new List<PivotedGridColumn>();

            //Create the Pivoted "Header" Column
            PivotedGridColumn col = new PivotedGridColumn();
            col.ColumnKey = "header";
            col.FieldKeys = new String[] { "Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4" };
            col.Name = "Quarter";
            col.Width = 100;
            r.Add(col);

            //display 
            col = new PivotedGridColumn();
            col.ColumnKey = "tests1";
            col.FieldKeys = new String[] { "costq 1", "costq 2", "costq 3", "costq 4" };
            col.Name = "Fiscal 2009";
            col.Width = 100;
            r.Add(col);

            col = new PivotedGridColumn();
            col.ColumnKey = "tests2";
            col.FieldKeys = new String[] { "costq 5", "costq 6", "costq 7", "costq 8" };
            col.Name = "Fiscal 2010";
            col.Width = 100;
            r.Add(col);

            return r;
        }

Public Shared Function GetPivotedGridColumns(ByVal table As DataTable) As IList(Of PivotedGridColumn)
    Dim r As New List(Of PivotedGridColumn)()

    'Create the Pivoted "Header" Column
    Dim col As New PivotedGridColumn()
    col.ColumnKey = "header"
    col.FieldKeys = New String() {"Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"}
    col.Name = "Quarter"
    col.Width = 100
    r.Add(col)

    'display 
    col = New PivotedGridColumn()
    col.ColumnKey = "tests1"
    col.FieldKeys = New String() {"costq 1", "costq 2", "costq 3", "costq 4"}
    col.Name = "Fiscal 2009"
    col.Width = 100
    r.Add(col)

    col = New PivotedGridColumn()
    col.ColumnKey = "tests2"
    col.FieldKeys = New String() {"costq 5", "costq 6", "costq 7", "costq 8"}
    col.Name = "Fiscal 2010"
    col.Width = 100
    r.Add(col)

    Return r
End Function

JS 网格控件序列化程序将 JS 网格控件配置和数据序列化为一个 JavaScript 对象表示法 (JSON) 字符串。该网格控件会生成 JSON 并将其置于页面上。

启用透视网格

打开 JSGridWebPartUserControl.cs

在 Page Load 方法中，在创建网格序列化程序后，立即向 JSGridWebPartUserControl 类添加以下代码。

          gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data));

gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))

测试透视图 Web 部件

在 Visual Studio 中，按 F5 运行项目。该 Web 部件将自动添加到 SharePoint Web 部件库。可以将该 Web 部件添加到任何 Web 部件页。

请参阅

引用

Microsoft.SharePoint.JSGrid

通过