JSGrid 网格实现甘特图

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
            { }
        }