创建基本JSGrid

创建空白 SharePoint 项目

1. 1. 启动 Visual Studio 2010。

2. 2. 在“文件”菜单上，新建sharepoint2010 空项目。

3. 3. 在“SharePoint 自定义向导”中，选择“部署为场解决方案”，然后单击“完成”。

在项目中添加 Web 部件

1. 1.添加“可视化 Web 部件”，将项目命名为“JSGridWebPart”，然后单击“添加”。

2. 将以下代码粘贴到 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);
          }
      };
  script>

• 添加网格实用程序代码

  1. 1.添加一个文件夹，将文件夹命名为 GridUtils。

  2. 2.右键单击“GridUtils”文件夹，指向“添加”，然后单击“新项目”。依次选择“Visual C#”、“代码”和“代码文件”。将文件命名为 GridUtilities.cs。

  3. 3.重复前面的步骤，创建 GridData.cs 文件。

  4. GridUtilities.cs

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using Microsoft.SharePoint;
  using Microsoft.SharePoint.JSGrid;
  using System.Data;
  
  namespace YunCode.JSGrid
  {
      public static class GridUtilities
      {
          public static IList GetGridColumns(DataTable table)
          {
              List r = new List();
              foreach (DataColumn iterator in table.Columns)
              {
                  if (iterator.ColumnName != "Key"
                          && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                          && iterator.ColumnName != "HierarchyParentKey")
                  {
                      GridColumn col = new GridColumn();
                      // 设置列表的 key 值
                      col.FieldKey = iterator.ColumnName;
                      // 设置列标题
                      col.Name = iterator.ColumnName;
                      // 设置列宽
                      col.Width = 210;
  
                      if (iterator.ColumnName.Equals("部门"))
                      {
                          // 此列不允许隐藏
                          col.IsHidable = false;
                      }
                      if (iterator.ColumnName.Equals("年度预算"))
                      {
                          col.IsSortable = true;
                      }
                      r.Add(col);
                  }
              }
              return r;
          }
  
          public static IList GetGridFields(DataTable table)
          {
              List r = new List();
  
              foreach (DataColumn iterator in table.Columns)
              {
                  GridField field = new GridField();
                  field = formatGridField(field, iterator);
  
                  r.Add(field);
              }
              return r;
          }
  
          public static GridField formatGridField(GridField gf, DataColumn dc)
          {
              // 设置列的key值
              gf.FieldKey = dc.ColumnName;
              // 序列化数据
              gf.SerializeDataValue = true;
              if (dc.ColumnName != "Key"
                 && dc.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                 && dc.ColumnName != "HierarchyParentKey")
              {
                  if (dc.DataType == typeof(String))
                  {
                      gf.PropertyTypeId = "String";
                      gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                      {
                          return toConvert == null ? "" : toConvert.ToString();
                      };
                      gf.SerializeLocalizedValue = true;
                      gf.SerializeDataValue = false;
                  }
                  else if (dc.DataType == typeof(Int32))
                  {
                      gf.PropertyTypeId = "JSNumber";
                      gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                      {
                          return toConvert == null ? "" : toConvert.ToString();
                      };
                      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("该数据类型没有被定义：" + dc.DataType);
              }
              return gf;
          }
  
      }
  }

  GridData.cs

• using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using Microsoft.SharePoint;
  using Microsoft.SharePoint.JSGrid;
  using System.Data;
  
  namespace YunCode.JSGrid
  {
      public class GridData
      {
          /**
           * 此类添加测试用数据，所有数据为随机生成
           *
           * */
          Random _rand = new Random();
          public virtual DataTable Data(int numRows)
          {
              DataTable data = new DataTable();
              data = new DataTable();
              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("标题", typeof(string)));
              data.Columns.Add(new DataColumn("部门经理", typeof(string)));
              data.Columns.Add(new DataColumn("部门", typeof(string)));
              data.Columns.Add(new DataColumn("开始日期", typeof(DateTime)));
              data.Columns.Add(new DataColumn("结束日期", typeof(DateTime)));
              data.Columns.Add(new DataColumn("完成", typeof(DateTime)));
              data.Columns.Add(new DataColumn("年度预算", typeof(int)));
              data.Columns.Add(new DataColumn("2009 预算", typeof(int)));
              data.Columns.Add(new DataColumn("2010 预算", typeof(int)));
              data.Columns.Add(new DataColumn("选择", typeof(Boolean)));
              data.Columns.Add(new DataColumn("链接", typeof(Hyperlink)));
  
              Guid? parent = null;
              DataRow dr;
              int j = 0;
              for (int i = 0; i < numRows; i++)
              {
                  var curKey = Guid.NewGuid();
  
                  dr = data.NewRow();
                  dr["Key"] = curKey;
                  if (i % 10 == 0)
                  {
                      parent = curKey;
                      j++;
                  }
                  if (parent.HasValue)
                  {
                      dr["HierarchyParentKey"] = parent.Value;
                  }
                  if (parent == null)
                  {
                      parent = curKey;
                  }
                  dr["标题"] = "Task " + j + "." + i % 10;
                  dr["部门经理"] = "经理";
                  dr["部门"] = "部门- " + i.ToString();
                  dr["2009 预算"] = _rand.Next(1000000) + 30000;
                  dr["2010 预算"] = _rand.Next(1000000) + 30000;
                  dr["年度预算"] = ((int)dr["2009 预算"]
                      + (int)dr["2010 预算"]) / 2;
                  dr["开始日期"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                  dr["结束日期"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                  dr["完成"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                  dr["选择"] = i % 2 != 0;
                  dr["链接"] = new Hyperlink() { Display = "Contoso", Address = "/" };
  
                  data.Rows.Add(dr);
              }
              return data;
          }
      }
  }

修改 JSGridWebPartUserControl.ascx.cs

1. 打开 JSGridWebPartUserControl.ascx.cs。

2. using System;
   using System.Web.UI;
   using System.Web.UI.WebControls;
   using System.Web.UI.WebControls.WebParts;
   using System.Data;
   using Microsoft.SharePoint.JSGrid;
   using YunCode.JSGrid;
   
   
   namespace YunCode.JSGrid.JSGridWebPart
   {
       public partial class JSGridWebPartUserControl : UserControl
       {
           protected global::Microsoft.SharePoint.WebControls.JSGrid _grid;
   
           protected void Page_Load(object sender, EventArgs e)
           {
               DataTable data = new GridData().Data(20);
               GridSerializer gds = new GridSerializer(SerializeMode.Full,
                   data, "Key", new FieldOrderCollection(new String[] { "Department" }),
                   GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));
               _grid.GridDataSerializer = gds;
               _grid.JSControllerClassName = "GridManager";
   
           }
       }
   }

测试 Web 部件

1. 打开并编辑所有 Web 部件页。

2. 依次单击“插入”、“Web 部件”；从自定义类别中选择 JSWebPart。该 Web 部件将显示在页面中。

3.