如何：创建基本 JS 网格

项目
06/15/2015

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

适用范围： SharePoint Foundation 2010

本主题演示如何使用 JS 网格控件和 Microsoft Visual Studio 2010 创建基本网格控件。

备注

对于下列说明中的一些 Visual Studio 用户界面元素，您的计算机可能显示不同的名称或位置。这些元素由您拥有的 Visual Studio 版本和使用的设置决定。

该示例使用一个可视化 Web 部件；该可视化 Web 部件启用 .ascx 控件的设计视图，还允许在不必创建编辑器部件的情况下，创建简单的 Web 部件属性。

若要呈现 JS 网格控件，您必须提供一些示例数据。这些示例数据位于 GridData.cs 中。用于分析数据的代码位于 GridUtilities.cs 文件中。这两个文件都存储在 GridUtils 文件夹中。数据文件和实用程序文件比您创建基本网格需要的信息更详细，它们包含您在后面的主题中使用的功能。

先决条件

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

备注

尽管不使用 Visual Studio 即可完成此过程，但使用 Visual Studio 2010 和 Visual Studio 2010 中的 SharePoint 开发工具会更轻松。

创建空白 SharePoint 项目

使用"以管理员身份运行"选项启动 Visual Studio 2010。
在"文件"菜单上，单击"新建"，然后选择"项目"。
在"新建项目"对话框中，依次展开"Visual C#"节点、"SharePoint"节点，然后选择"2010"节点。
在"模板"窗格中，选择"空白 SharePoint 项目"，将解决方案命名为 JSGrid，然后单击"确定"。随即显示"SharePoint 自定义向导"。利用该向导，可以选择用于调试该解决方案的项目和信任级别的网站。
在"SharePoint 自定义向导"中，选择"部署为场解决方案"，然后单击"完成"，以接受默认的本地 SharePoint 网站。

备注

任何 Web 部件都必须是场（完全信任的）解决方案。

在项目中添加 Web 部件

在"解决方案资源管理器"中，右键单击解决方案，指向"添加"，然后选择"新建项目"。
在"添加新项目"对话框中，展开"SharePoint"节点，然后选择"2010"。
在"2010"节点中，选择"可视化 Web 部件"，将项目命名为"JSGridWebPart"，然后单击"添加"。此 Web 部件将显示在"解决方案资源管理器"中。此操作将生成库引用，在我们的示例中，将生成 JSGridWebPart.cs。

添加 JSGrid 控件

若要初始化控件，请将以下代码粘贴到 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>

第一行说明 JS 网格控件。后续行中的脚本用于注册网格管理器，注册数据源，注册右对齐样式以及处理初始化任务。

备注

在 SharePoint 2010 页上添加 Web 部件后，Web 部件分组显示。显示 Web 部件的组由 Elements.xml 文件中的 Group Property 名称控制。默认情况下，该组设置为"自定义"。通过更改 Group Property，可以创建自定义组。例如，若要创建一个 Finance 组，请将该值设置为"Finance"(<Property Name="Group" Value="Finance" />)。

添加网格实用程序代码

在"解决方案资源管理器"中，右键单击解决方案的名称，指向"添加"，然后单击"新建文件夹"。将文件夹命名为 GridUtils。
在"解决方案资源管理器"中，右键单击"GridUtils"文件夹，指向"添加"，然后单击"新项目"。依次选择"Visual C#"、"代码"和"代码文件"。将文件命名为 GridUtilities.cs。
重复前面的步骤，创建 GridData.cs 文件。

将下面示例中显示的 GridUtilities.cs 和 GridData.cs 的内容复制到 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;
        }
    }
}

修改 JSGridWebPartUserControl.ascx.cs

打开 JSGridWebPartUserControl.ascx.cs。

添加以下声明。

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

将 JSGridWebPartUserControl 类的内容替换为以下内容。

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

备注

也可以在 OnPreRender 事件处理程序而不是 On_Load 事件处理程序中创建 JS 网格控件。例如，如果您希望向 Web 部件中添加属性，则需要执行此操作。

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

备注

对于网格字段，必须将 SerializeDataValue 或 SerializeLocalizedValue 设置为 true。可以将二者同时设置为 true，至少有一个必须采用此设置。

测试 Web 部件

在 Visual Studio 中，按 F5 运行该项目。
系统将进行部署，并打开 SharePoint 网站。Web 部件会自动添加到 SharePoint 2010 Web 部件库。
打开并编辑所有 Web 部件页。您可以将此 Web 部件添加到任何 Web 部件页中。
依次单击"插入"、"Web 部件"；从自定义类别中选择 JSWebPart。该 Web 部件将显示在页面中。

备注

关闭 Windows Internet Explorer 时或在 Visual Studio 中按 Shift+F5 时，Visual Studio 将收回该 Web 部件（如果在"ListProjects"属性页的"SharePoint"选项卡中选择"调试后自动收回"），并重置 Internet Information Services (IIS)。如果在"生成"菜单上单击"部署解决方案"，则 Visual Studio 将在开发计算机上部署解决方案，以便您可以独立于 Visual Studio 使用该 Web 部件。

有关使用 Web 部件的详细信息，请参阅如何：使用网页上的 Web 部件。

后续步骤

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

请参阅

引用

Microsoft.SharePoint.JSGrid

概念

JS 网格控件

通过