1.创建一个空白sharepoint项目
2.在项目中创建一个文件夹GridUtils
3.往GridUtils文件夹中添加代码文件GanttUtilities.cs 该文件用来定义甘特条图的样式
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing; // added for Gantt styles
using Microsoft.SharePoint.JSGrid;
namespace JSGridSample.GridUtilityLib
{
public class GanttUtilities
{
public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete,Shenpi,Shenping,Current,Delay }
public static GanttStyleInfo GetStyleInfo()
{
var styleInfoObj = new GanttStyleInfo();
/*Summary Bar Style 整个项目的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid,
BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
"项目开始时间", "项目完成时间", 1));
/*Standard Bar Style 正常的每个任务的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid,
BarEndShape.None, Color.Black, BarShapePattern.Filled,
BarEndShape.None, Color.Black, BarShapePattern.Filled,
"任务开始时间", "任务要求结束时间", 1));
/*Milestone Bar Style 里程碑甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Milestone, BarShape.None, Color.Brown, BarPattern.Solid,
BarEndShape.None, Color.Brown, BarShapePattern.Filled,
BarEndShape.Diamond, Color.Brown, BarShapePattern.Filled,
"任务开始时间", "任务要求结束时间", 1));
/*PctComplete Bar Style 完成百分比甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid,
BarEndShape.None, Color.Black, BarShapePattern.Filled,
BarEndShape.None, Color.Black, BarShapePattern.Filled,
"任务开始时间", "任务提交时间", 1));
/*Shenpi Bar Style 审批阶段已经完成应该显示的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Shenpi, BarShape.MidHalf, Color.Red, BarPattern.Solid,
BarEndShape.None, Color.Red, BarShapePattern.Filled,
BarEndShape.None, Color.Red, BarShapePattern.Filled,
"任务提交时间", "任务审核通过时间", 1));
/*Shenpi Bar Style 审批阶段还未完成应该显示的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Shenping, BarShape.MidHalf, Color.Yellow, BarPattern.Solid,
BarEndShape.None, Color.Yellow, BarShapePattern.Filled,
BarEndShape.None, Color.Yellow, BarShapePattern.Filled,
"任务提交时间", "任务审核通过时间", 1));
/* Current bar Style 任务还未提交时显示的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Current, BarShape.MidHalf, Color.Green, BarPattern.Solid,
BarEndShape.None, Color.Green, BarShapePattern.Filled,
BarEndShape.None, Color.Green, BarShapePattern.Filled,
"任务开始时间", "任务提交时间", 1));
/*Summary Bar Style 整个项目的甘特图形状*/
styleInfoObj.AddBarStyle(new GanttBarStyle(
CustomBarStyle.Delay, BarShape.TopHalf, Color.HotPink, BarPattern.Solid,
BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
BarEndShape.HomePlateDown, Color.HotPink, BarShapePattern.Filled,
"项目完成时间", "项目延长时间", 1));
return styleInfoObj;
}
}
}
4.添加代码文件 GridData.cs 该文件根据项目名称构造一个DataTable
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.JSGrid;
using Microsoft.SharePoint;
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.
* */
const string SITE_URL = "http://user04:8088";
EntitiesDataContext edc=new EntitiesDataContext (SITE_URL);
/// <summary>
/// 构造DataTable
/// </summary>
/// <param name="strSelectedProgram">项目名称</param>
/// <returns></returns>
public virtual DataTable Data(string strSelectedProgram)
{
// Create and initialize the data table.
DataTable data = new DataTable();
data = new DataTable();
data.Locale = System.Globalization.CultureInfo.InvariantCulture;
// 添加我们需要的列
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(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(DateTime)));
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(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid how-to.
Guid? parent = null; //说明parent的值可以为空.用来记录新建行的key值
DataRow dr;
int intFirst = 0;//标记是否是构造DataTable的第一行,等于0时加载摘要甘特图
//第一行始终为为整个项目的甘特图表示
if (intFirst == 0)
{
DataRow drow;
var querySum = from work in edc.技术部工作分配管理
where work.项目名称 == strSelectedProgram && work.标题 !=null && work.项目编号 !=null
select new
{
work.标题,
work.任务名称,
work.任务开始时间,
work.任务要求结束时间,
work.任务提交时间,
work.任务审核通过时间,
work.项目编号,
work.项目名称,
work.里程碑,
work.项目开始时间,
work.项目完成时间
};
foreach (var u in querySum)
{
var curKey = Guid.NewGuid(); //创建一个新的Guid对象
drow = data.NewRow(); //创建新的一行
drow["key"] = curKey;
string strRenwu = u.标题;
string strProgram = u.项目编号;
parent = curKey;
drow["HierarchyParentKey"] = parent.Value;
drow["任务编号"] = strRenwu;
drow["任务名称"] = u.任务名称;
drow["项目编号"] = strProgram;
drow["项目名称"] = u.项目名称;
drow["任务开始时间"] = Convert.ToDateTime(u.任务开始时间);
drow["任务要求结束时间"] = Convert.ToDateTime(u.任务要求结束时间);
if (strRenwu != "" && strProgram != "")
{
drow["项目开始时间"] = Convert.ToDateTime(u.项目开始时间);
List<DateTime> arrList = new List<DateTime>();
if (!string.IsNullOrEmpty(u.项目完成时间.ToString()))
{
drow["项目完成时间"] = Convert.ToDateTime(u.项目完成时间);
var queryEndDate = from work in edc.技术部工作分配管理
where work.项目名称 == strSelectedProgram
select new
{
work.任务审核通过时间,
work.任务要求结束时间,
work.任务提交时间
};
if (queryEndDate.Any())
{
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务审核通过时间)));
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务提交时间)));
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务要求结束时间)));
if (arrList.Any())
{
drow["项目延长时间"] = Convert.ToDateTime(arrList.Max());
}
}
}
else
{
var queryEndDate = from work in edc.技术部工作分配管理
where work.项目名称 == strSelectedProgram
select new
{
work.任务审核通过时间,
work.任务要求结束时间,
work.任务提交时间
};
if (queryEndDate.Any())
{
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务审核通过时间)));
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务提交时间)));
arrList.Add(Convert.ToDateTime(queryEndDate.Max(p => p.任务要求结束时间)));
if (arrList.Any())
{
drow["项目完成时间"] = Convert.ToDateTime(arrList.Max());
}
}
}
}
if (!string.IsNullOrEmpty(u.任务提交时间.ToString()))
{
drow["任务提交时间"] = Convert.ToDateTime(u.任务提交时间);
}
else
{
drow["任务提交时间"] = DateTime.Now;
}
if (!string.IsNullOrEmpty(u.任务审核通过时间))
{
drow["任务审核通过时间"] = Convert.ToDateTime(u.任务审核通过时间);
}
else
{
if (!string.IsNullOrEmpty(u.任务提交时间.ToString()))
{
drow["任务审核通过时间"] = DateTime.Now;
}
}
//整个项目的摘要甘特图
drow[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(0), (GanttUtilities.CustomBarStyle)(7) };
data.Rows.Add(drow);
}
}
//添加每个任务
var query = from work in edc.技术部工作分配管理
where work.项目名称==strSelectedProgram && work.标题==null
select new
{ work.标题,
work.任务名称,
work.任务开始时间,
work.任务要求结束时间,
work.任务提交时间,
work.任务审核通过时间,
work.项目编号,
work.项目名称,
work.里程碑,
work.项目开始时间,
work.项目完成时间
};
foreach (var u in query)
{
bool isNow = false; //标记任务是否提交 false:说明任务已经提交，true:说明任务还没有提交
bool isOk = false;//标记审批是否完成 false:说明任务已经审批，true：说明任务还没有审批
var curKey = Guid.NewGuid();
dr = data.NewRow();
dr["key"] = curKey;
string strRenwu = u.标题;
string strProgram = u.项目编号;
if (parent == null)
{
parent = curKey;
}
dr["任务编号"] = strRenwu;
dr["任务名称"] = u.任务名称;
dr["项目编号"] = strProgram;
dr["项目名称"] = u.项目名称;
dr["任务开始时间"] = Convert.ToDateTime(u.任务开始时间);
dr["任务要求结束时间"] = Convert.ToDateTime(u.任务要求结束时间);
if (!string.IsNullOrEmpty(u.任务提交时间.ToString()))
{
dr["任务提交时间"] = Convert.ToDateTime(u.任务提交时间);
}
else
{
dr["任务提交时间"] = DateTime.Now;
isNow = true;
//任务还没有提交
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1), (GanttUtilities.CustomBarStyle)(6) };
}
if (!string.IsNullOrEmpty(u.任务审核通过时间))
{
dr["任务审核通过时间"] = Convert.ToDateTime(u.任务审核通过时间);
}
else
{
if (!string.IsNullOrEmpty(u.任务提交时间.ToString()))
{
dr["任务审核通过时间"] = DateTime.Now;
isOk = true;
//任务已经提交但是还没有审核
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[3] { (GanttUtilities.CustomBarStyle)(1), (GanttUtilities.CustomBarStyle)(3), (GanttUtilities.CustomBarStyle)(5) };
}
}
//任务已经提交并且已经审核完成
if (string.IsNullOrEmpty(strRenwu) && isNow==false && isOk==false)
{
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[3] { (GanttUtilities.CustomBarStyle)(1), (GanttUtilities.CustomBarStyle)(3), (GanttUtilities.CustomBarStyle)(4) };
}
// 说明任务为里程碑
if (u.里程碑.ToString() == "Y")
{
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) };
}
data.Rows.Add(dr);
}
intFirst++;
return data;
}
}
}
5.想文件夹中添加一个代码文件GridUtilities.cs s将第4步中构造的DataTable进行格式化
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
{
/// <summary>
/// 隐藏不需要出现在JSGrid中的列
/// </summary>
/// <param name="table">DataTable数据源</param>
/// <returns>需要显示在JSGrid中的列的集合</returns>
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 //DefaultGridRowStyleIdColumnName存储网格中一行的默认样式ID信息
&& iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName //DefaultGanttBarStyleIdsColumnName 存储默认甘特条形图样式 ID 信息
&& iterator.ColumnName != "HierarchyParentKey")
{
GridColumn col = new GridColumn();
// 设置列表的key值
col.FieldKey = iterator.ColumnName;
// 设置列名
col.Name = iterator.ColumnName;
// 设置列宽
col.Width = 120;
r.Add(col);
}
}
return r;
}
/// <summary>
/// 对DataTable数据源中的每个单元格格式化
/// </summary>
/// <param name="table"></param>
/// <returns></returns>
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;
}
/// <summary>
/// 此方法匹配传入的列的类型与传出的网格字段的类型
/// </summary>
/// <param name="gf">传出的网格字段</param>
/// <param name="dc">传入的列</param>
/// <returns>格式化后传出的网格字段</returns>
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
&& dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName
&& dc.ColumnName != "HierarchyParentKey")
{
if (dc.DataType == typeof(String))
{
gf.PropertyTypeId = "String";//将字符串选择器添加到网格中
//Localizer（定位器）决定我们如何将基础数据呈现在屏幕上
//将数据值本地化
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.DefaultCellStyleId = "TextRightAlign";
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;
}
}
}
6.创建一个可视化的WebPart，将下拉列表，JSGrid等添加到该WebPart中
首先添加JSGrid控件
<%--说明JS网格控件--%>
<SharePoint:JSGrid ID="_grid" runat="server" Height="382px" />
<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();
jsGridParams.tableViewParams.bEditingEnabled = true; // 允许数据可编辑
jsGridControl.Init(jsGridParams);
//注册文本右对齐样式
jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
//初始化
jsGridControl.Init(jsGridParams);
}
}
</script>
7.为按钮添加动作事件
protected void btnSelect_Click(object sender, EventArgs e)
{
try
{
string strSelectedPro = ddlProgram.SelectedValue;
DataTable data = new GridData().Data(strSelectedPro);
//将配置信息和数据序列化为JSON格式
GridSerializer gds = new GridSerializer(SerializeMode.Full,
data, "Key", new FieldOrderCollection(new String[] { "dept" }),
GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));
//为网格指定要序列化的数据
_grid.GridDataSerializer = gds;
//告诉网格监听GridManager
_grid.JSControllerClassName = "GridManager";
//启动甘特图（定义甘特条形图开始的最早日期和条形图结束的最晚日期，从什么位置查找甘特条形图样式以及依赖项列名称（在本示例中为 null）。）
gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);
gds.EnableHierarchy(null, "HierarchyParentKey", "标题", false);
}
catch (Exception nn)s
{ }
}