Практическое руководство. Создание базовой таблицы JS Grid

Статья
04/21/2015

Дата последнего изменения: 21 июня 2011 г.

Применимо к: SharePoint Foundation 2010

В этом разделе показано, как с помощью управления JS Grid и Microsoft Visual Studio 2010 создать базовый элемент управления "сетка".

Примечание
На компьютере могут отображаться различные имена или расположения для некоторых элементов пользовательского интерфейса Visual Studio в приведенных ниже инструкциях. Эти элементы определяются установленным на компьютере выпуском Visual Studio и конкретными параметрами.

На компьютере могут отображаться различные имена или расположения для некоторых элементов пользовательского интерфейса Visual Studio в приведенных ниже инструкциях. Эти элементы определяются установленным на компьютере выпуском Visual Studio и конкретными параметрами.

В этом примере используется визуальная веб-часть; это позволяет работать с ASCX-элементом управления в режиме конструктора, а также создавать простые свойства веб-части, не создавая веб-часть "Редактор".

Для визуализации управления JS Grid нужно предоставить образец данных. Эти данные содержатся в файле GridData.cs. Код для разбора данных находится в файле GridUtilities.cs. Оба файла хранятся в папке GridUtils. Хотя файл данных и файл служебных программ предоставляют больше возможностей, чем требуется для создания базовой таблицы, они содержат компоненты, которые будут использованы в последующих статьях.

Необходимые компоненты

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
разработки SharePoint в Microsoft Visual Studio 2010

Примечание
Хотя эту процедуру можно выполнить и без помощи Visual Studio, рекомендуется использовать одновременно Visual Studio 2010 и разработки SharePoint в Visual Studio 2010.

Создание пустого проекта SharePoint

Запустите Visual Studio 2010 с параметром Запуск от имени администратора.
В меню Файл выберите пункт Создать проект.
В диалоговом окне Создание проекта разверните узел Visual C#, разверните узел SharePoint, а затем выберите узел 2010.
В области Шаблоны выберите пункт Пустой проект SharePoint, назовите решение JSGrid и нажмите кнопку ОК. Откроется мастер настройки SharePoint. Этот мастер позволяет выбрать сайт для отладки проекта и уровень доверия для решения.
В мастере настройки SharePoint выберите Развернуть в качестве решения фермы, а затем нажмите кнопку Готово, чтобы принять локальный сайт SharePoint по умолчанию.

Примечание

Любая веб-часть должна быть решением фермы (с полным доверием).

Примечание
Любая веб-часть должна быть решением фермы (с полным доверием).

Добавление веб-части в проект

В обозревателе решений щелкните правой кнопкой мыши решение, выберите пункт Добавить, а затем выберите Новый элемент.
В диалоговом окне Добавление нового элемента разверните узел SharePoint, а затем выберите 2010.
В узле 2010 выберите пункт Визуальная веб-часть, назовите элемент JSGridWebPart и нажмите кнопку Добавить. Веб-часть появится в обозревателе решений. При этом будут созданы ссылки на библиотеки и, в данном примере, файл 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 Grid. В последующих строках содержится скрипт, в котором регистрируются диспетчер таблицы, источник данных, стиль выравнивания и выполняются задачи инициализации.

Примечание
При добавлении веб-части на страницу SharePoint 2010 веб-части отображаются в группах. Для управления группой, в которой отображается веб-часть, используется имя Group Property, указанное в файле Elements.xml. По умолчанию задана группа Custom. Настраиваемую группу можно создать, изменив Group Property. Например, чтобы создать группу Finance, задайте значение Finance (<Property Name="Group" Value="Finance" />).

При добавлении веб-части на страницу SharePoint 2010 веб-части отображаются в группах. Для управления группой, в которой отображается веб-часть, используется имя Group Property, указанное в файле Elements.xml. По умолчанию задана группа Custom. Настраиваемую группу можно создать, изменив 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";
        }
    }

Примечание
управления JS Grid также можно создать в обработчике события OnPreRender, а не в обработчике события On_Load. Это может потребоваться, например, для добавления свойств в веб-часть.

Сериализатор управления JS Grid сериализирует конфигурацию и данные управления JS Grid в строку JSON (JavaScript Object Notation). Элемент управления "Сетка" создает строку JSON и помещает ее на страницу.

Примечание
Для полей сетки атрибут SerializeDataValue или SerializeLocalizedValue должен иметь значение true. Значение true может быть установлено для обоих атрибутов, но хотя бы для одного из них это значение должно быть задано обязательно.

Тестирование веб-части

В Visual Studio нажмите клавишу F5, чтобы запустить проект.
Выполняется развертывание и открывается сайт SharePoint. Веб-часть автоматически добавляется в коллекцию веб-частей SharePoint 2010.
Откройте и измените любую страницу веб-частей. Веб-часть можно добавить на любую страницу веб-частей.

Нажмите кнопку Вставка, а затем выберите Веб-часть, выберите в настраиваемой категории JSWebPart . Выбранная веб-часть появится на странице.

Примечание
При закрытии Windows Internet Explorer или нажатии в Visual Studio сочетания клавиш SHIFT + F5 Visual Studio отзывает веб-часть (если на вкладке SharePoint на странице свойств ListProjects установлен флажок Автоматически отозвать после отладки) и перезапускает службы IIS. При выборе в меню Построение команды Развернуть решениеVisual Studio развертывает решение на компьютере разработчика, что позволяет использовать веб-часть независимо от Visual Studio

При закрытии Windows Internet Explorer или нажатии в Visual Studio сочетания клавиш SHIFT + F5 Visual Studio отзывает веб-часть (если на вкладке SharePoint на странице свойств ListProjects установлен флажок Автоматически отозвать после отладки) и перезапускает службы IIS. При выборе в меню Построение команды Развернуть решениеVisual Studio развертывает решение на компьютере разработчика, что позволяет использовать веб-часть независимо от Visual Studio

Дополнительные сведения о работе с веб-частями см. в статье Практическое руководство. Работа с веб-частями на странице.

Следующие действия

Инструкции по созданию сводной диаграммы с использованием JS Grid.

Поделиться через

Практическое руководство. Создание базовой таблицы JS Grid

Необходимые компоненты

Создание пустого проекта SharePoint

Добавление веб-части в проект

Добавление элемента управления JSGrid

Добавление кода служебных программ сетки

Изменение JSGridWebPartUserControl.ascx.cs

Тестирование веб-части

Следующие действия

См. также

Ссылка

Концепции

Дополнительные ресурсы