理解向日葵甘特之六—

在前面的六篇文章之中，我们详细的讲解了甘特图使用的数据结构以及提供的接口，我们可以知道，对于SFData接口的调用方来讲，最主要的就是实体+属性的模式，可是，对于甘特图组件来讲，怎样将这些实体的属性显示在界面上并提供必要的操作，是必须解决的问题。

针对这个问题，向日葵甘特组件的SFGantt模块使用了"数据列"的概念，"数据列"很多时候和"属性"和"节点"混淆了，我们在这里来使用简单的图说明一下这三者的关系：

从上面的图可以看出，XML节点是数据的存储来源，而实体属性是数据在SFData运行过程之中的数据形式，而数据列则是属性在界面上的表现形式，通常为了程序逻辑易于处理，也为了用户方便记忆，这三者的名称都是相同的(这也就是为什么容易混淆的原因)，例如任务的开始时间，在我们定义的XML格式之中，对应的XML节点名称为Start,而在数据初始化之后，对这项进行读写的属性名称也为Start,而为这个属性定义的数据列名称同样也是Start。

简单的说，数据列就是显示在甘特图列表左侧的一列一列的数据，左侧列表之中每一列都是一个数据列，但是数据列并不只是在左侧的列表之中使用，实际上，甘特图之中的大部分数据显示都采用数据列的机制，一旦采用此机制，意味着可以完全配置该区域数据的显示内容，例如，在甘特图一下位置同样也使用了数据列：

1.当用户拖动右侧滚动条的时候，显示在右上角(实时显示当前滚动到何处)的一个或者多个字段名称

2.甘特图最左侧显示的灰色用来作为标识的列(Logo下方的列)

3.鼠标放在任务、链接等内容的上的时候弹出的浮动提示上显示的内容

4.甘特图图表右侧显示的任务名称

实际上，除了涉及到复杂的绘制逻辑之外(例如甘特图的图形和箭头的形状等)，甘特图上的数据显示都应该尽量使用数据列的定义来完成，这样可以保证完全的可灵活的配置显示的内容。下面我们来说明一下数据列的功能和实现。

每一个数据列必须完成以下功能的定义：

1.如何显示数据列的表头；

2.如何显示数据内容；

3.如果该列需要编辑，如何显示编辑界面；

同时，数据列还提供了一些方法来提供给用户自定义显示的前景色、背景色、对齐方式等样式。

当前甘特图之中，提供了SFGanttField类来自定义和管理系统之中的所有数据列的定义，所有的列都应该是SFGanttField的实例，当前，SFGanttField，构造的时候，可以指定以下参数：

参数名称	参数默认值	参数说明
headText	''	默认该列的列表头文本
bodyData	必须指定	数据显示需要的属性名称，如果有多个用逗号分隔，当其中一个属性发生变化的时候，将自动引发该数据列的重绘
inputData	可以编辑的时候必须指定	编辑模式写入的属性名称，只能是一个
width	100	默认该列的显示宽度
ReadOnly	false	当设置为
headStyle	{textAlign:'center'}	默认列表头的显示y
bodyStyle	{textAlign:'left'}	默认内容显示和编辑时的的样式
inputStyle	{}	默认内容编辑时的附加样式

例如，我们需要定义一个用来显示UID的列的时候，可以这样使用：

SFGanttField.setTaskField("UID", new SFGanttField({width:36,bodyData:'UID',headText:"UID",ReadOnly:true,bodyStyle:{textAlign:'center'}}));

这样，这个数据列被命名为"UID",这个列宽度为36，显示UID属性的内容，在列表头之中显示"UID",同时这个字段只读(UID是不允许变化的)，默认数据居中显示,在定义之后，可以通过SFGanttField.getTaskField("UID")来返回这个数据列；

一个数据列定义完成之后,还可以使用如下的方法来对数据列进行设置（注意，这些设置不能影响已经绘制完成的内容）：

方法名称	方法介绍
setWidth(width)	设置列的显示宽度
setHeadText(text)	设置列表头文本
setHeadAlign(align)	设置列表头对齐方式
setHeadColor(color)	设置列表头颜色
setHeadBgColor(color)	设置列表头背景色
setBodyAlign(align)	设置列内容对齐方式
setBodyColor(color)	设置列内容颜色
setBodyBgColor(color)	设置列内容背景颜色
setReadOnly(ReadOnly)	设置列是否只读

以上通过new SFGanttField来生成的列通常是采用默认的模式来进行列表头、数据内容、输入模式的绘制，实际上很多情况下，存在需要自定义绘制模式的数据列，因此，系统提供了几个其他的类，这些类继承了SFGanttField，而包含自己的数据显示逻辑，下面逐一的介绍这些类：

1.SFGanttFieldBool,这个类用来进行Bool类型属性的显示和编辑，如果该数据列不是ReadOnly,则无论是输入模式还是显示模式，都是显示为一个复选框，点击复选框就更改了该属性，如果是ReadOnly模式，直接显示文字"是"或"否"，该类使用方法如下：

SFGanttField.setTaskField("Critical", new SFGanttFieldBool({width:30,bodyData:'Critical',headText:'关键'}));

2.SFGanttFieldPercent,这个类用来进行百分比数值的显示和编辑,该数据列会在显界面上显示一个进度条，进度条上显示着进度的数值，如果该数据列并不是ReadOnly，则可以拖动进度条右侧的竖线更改进度的值，该类的使用方法如下：

SFGanttField.setTaskField("PercentComplete", new SFGanttFieldPercent({width:100,bodyData:'PercentComplete',headText:'完成百分比'}));

3.SFGanttFieldSelected,这个是一个特殊的列定义，这个列用来代表某一列在甘特图上的选中状态，任何方式造成某一列被选中的时候，这一列的复选框将会被勾上，而点击该复选框，也会修改该列的选中状态，当然，如果这一列被设置为只读，和SFGanttFieldBool一样，也只会显示一个文字"是"或"否"，该类的用法如下：

SFGanttField.setTaskField("Selected", new SFGanttFieldSelected({width:30,headText:'选中'}));//因为甘特图对选中的支持属性是一定的，因此，不需要指定字段

4.SFGanttFieldLongText,这个类是用来支持多行文本的编辑的类，该字段在进入编辑状态的时候，将会显示一个多行的输入框，该类的使用方法如下：

SFGanttField.setTaskField("Notes", new SFGanttFieldLongText({width:100,bodyData:'Notes',headText:'备注'}));

5.SFGanttFieldDateTime,这个类用来支持对日期时间字段的显示和编辑，需要说明的是，向日葵甘特图开发过程之中主要转准于向日葵的核心逻辑，因此并没有集成任何辅助输入日期时间的控件，当然，向日葵甘特图可以轻松的和这些控件结合来编辑日期，这一点在后面会专门提到，而这里的日期编辑，依然是需要用户手工输入日期格式的，该类使用方法如下：

SFGanttField.setTaskField("Start", new SFGanttFieldDateTime({width:100,bodyData:'Start',headText:'开始时间',disableSummaryEdit:true}));

可以看出，这个类多了一个disableSummaryEdit参数，这个参数可以指定是否允许对大纲任务的日期进行编辑；

6.SFGanttFieldDuration,这个类用来实现工期的计算，也就是计算两个日期时间字段期间的工期，需要说明的是，这里的工期计算是非常简单的去除周末的计算方法，并没有考虑节假日，也没有通过甘特图之中的工作日历进行计算，该类的使用方法如下：

SFGanttField.setTaskField("Duration", new SFGanttFieldDuration({width:60,bodyData:'Start,Finish',headText:'工期'}));

7.SFGanttFieldSelecter,这个类用来实现一个字典类的显示和选择，例如任务的限制类型字段，该字段在XML节点之中之中通常是一个数字，而在显示界面上应该显示成清晰易懂的格式，而这个类就是用来做这个处理的，例如们要实现一个限制类型的数据列，应该采用这个方式：

var list={0:'越早越好','越晚越好',1:'必须开始于',2:'必须完成于',3:'不得早于...开始',4:'不得晚于...开始',5:'不得早于...完成',6:'不得晚于...完成'};

SFGanttField.setTaskField("ConstraintType", new SFGanttFieldSelecter({width:120,bodyData:'ConstraintType',headText:names.ConstraintType,options:list}));

首先按照key-value的模式建立一个object对象，每个key是该任务的属性值，可以为数字也可以为字符串，而每个value是显示的内容，然后将这个对象作为该字段的options参数即可，这个列在进入编辑状态的时候，会显示一个下拉选单供用户编辑。

8.SFGanttFieldTreeName，这个就是对树形结构的数据实现显示可折叠的+/-树的字段类型，该类型比较固定，能够配置的参数比较少，该字段在进入编辑状态的时候，所编辑的字段是该实体的名称，该类的使用方法如下：

SFGanttField.setTaskField("Name", new SFGanttFieldTreeName({width:120,'名称'}));

9.SFGanttFieldIcon，这个类是实现任务的状态图标列的功能，当前支持了如下图标的显示：

a.当任务已经完成的时候（PercentComplete为100），显示一个已完成的对钩图标，鼠标放在图标上，显示何时完成了该任务

b.当任务存在1以上的约束类型（ConstraintType,ConstraintDate）的时候，会显示约束图标，鼠标放在图标上，会显示约束详细信息

c.当任务存在备注信息的时候，显示一个备注图标，鼠标放在图标上，显示备注详细信息

d.当任务指定了超级链接的时候（HyperlinkAddress，Hyperlink）显示超级链接图标，鼠标放在图标上，显示链接信息，点击图标将会在新窗口之中打开此链接

虽然从理论上讲可以为这个类添加更多的图标支持，但是因为比较复杂，不在这里做详细的介绍，仅仅提供一个这个类的使用范例(演示任务已完成的实现方法)：

var field=new SFGanttFieldIcon({width:32,headText:'状态'});//这一列默认就是只读的，并且根据支持的图标个数来确定bodyData的值

field.addIcon(function(element,gantt)//从这里添加一个图标支持函数

{

if(element.PercentComplete!=100){return;}//如果任务没有完成，则返回空，不显示任何图标

var img=this.createImage();//创建一个图标

img.src="http://……"//在这里指定图标文件的地址

SFTooltip.setTooltip(img,function()//这里指定鼠标放在图标上之后如何生成浮动提示信息

{

var tooltip=gantt.getTooltip();//获得甘特图的默认工具条提示类

var str="该任务在某年月日完成"//这里是提示信息的内容

tooltip.setContent(document.createTextNode(str));//设置显示该提示内容

return tooltip;

});

return img;

},"PercentComplete");//最后一个参数定义了当任务的PercentComplete属性变化的时候，该图标需要重绘，如果有多个，用逗号分隔

以上介绍了现在甘特图之中的所有支持的数据列类型，为了使用上的方便，实际上我们也已经定义好了一些数据列可以供直接使用，在下面的列表之中，我们列出了系统集成的数据列类型和相关信息，作为参考：

实体类型	数据列名称	实现类	bodyData	inputData	是否只读	说明
任务	Empty	SFGanttField			true	一个完全空的列，用来实现什么都不显示
任务	UID	SFGanttField	UID		true	显示UID
任务	ID	SFGanttField	ID		true	显示ID
任务	name	SFGanttField	Name	Name		显示一个简单的名称，并允许更改
任务	Name	SFGanttField	Name,Summary,Collapse	Name		显示并更改名称，并按照大纲级别留空，并给大纲提供可折叠的图标
任务	OutlineNumber	SFGanttField	OutlineNumber		true	显示大纲级别
任务	StatusIcon	SFGanttFieldIcon	动态实现		true	显示任务的状态图标
任务	Duration	SFGanttFieldDuration	Start,Finish		true	显示工期
任务	Start	SFGanttFieldDateTime	Start	Start		显示并更改任务开始时间
任务	Finish	SFGanttFieldDateTime	Finish	Finish		显示并更改任务结束时间
任务	Notes	SFGanttFieldLongText	Notes	Notes		显示并更改任务的备注信息
任务	ClassName	SFGanttFieldSelecter	ClassName	ClassName		显示并更改任务的显示样式
任务	ConstraintType	SFGanttFieldSelecter	ConstraintType	ConstraintType		显示并更改任务的约束类型
任务	ConstraintDate	SFGanttFieldDateTime	ConstraintDate	ConstraintDate		显示并更改任务的约束时间
任务	Critical	SFGanttFieldBool	Critical	Critical		显示并切换该任务是否是关键任务
任务	Selected	SFGanttFieldSelected	内部实现		true	显示并切换任务的选中状态
任务	Resource	SFGanttField	内部实现		true	显示给任务分配的资源
任务	PercentComplete	SFGanttFieldPercent	PercentComplete	PercentComplete		显示并调整任务的完成百分比
任务	ActualStart	SFGanttFieldDateTime	ActualStart	ActualStart		显示并更改任务实际开始时间
任务	ActualFinish	SFGanttFieldDateTime	ActualFinish	ActualFinish		显示并更改任务实际完成时间
任务	ActualDuration	SFGanttFieldDuration	ActualStart,ActualFinish		true	显示任务的实际工期
任务	BaselineStart	SFGanttFieldDateTime	BaselineStart	BaselineStart		显示并更改任务的基准开始时间
任务	BaselineFinish	SFGanttFieldDateTime	BaselineFinish	BaselineFinish		显示并更改任务的基准结束时间
链接	Type	SFGanttFieldSelecter	Type	Type		显示并更改链接的类型
链接	FromTask	SFGanttFieldElement	内部实现		true	显示链接的起始任务
链接	ToTask	SFGanttFieldElement	内部实现		true	显示链接的结束任务

这里就介绍完成了所有目前向日葵甘特图支持的数据列的信息，每一个数据列都可以对属性进行重新设置或重写，从而实现自己需要的复杂的功能逻辑，假如需要自定义数据列类型，需要自定义一个继承 SFGanttField的类，而这个过程相对比较复杂，因此，不在这里做详细的介绍。

转载于:https://www.cnblogs.com/tidestone/archive/2009/05/25/1489201.html

理解向日葵甘特之六——定义数据列相关推荐

深入理解空间搜索算法 ——数百万数据中的瞬时搜索
转自干货|深入理解空间搜索算法 --数百万数据中的瞬时搜索全球人工智能:专注为AI开发者提供全球最新AI技术动态和社群交流.用户来源包括:北大.清华.中科院.复旦.麻省理工.卡内基梅隆.斯坦福.哈 ...
oracle stalestats_深入理解oracle优化器统计数据(Optimizer Statistics)
理解oracle优化器统计数据首先来介绍oracle数据库使用基于规则优化器(RBO)来决定如何执行一个sql语句.基于规则优化器顾名思义,它是遵循一组规则来判断一个sql语句的执行计划.这组规则是 ...
“聚沙成塔”——用大数据思维理解生命的复杂体系,数据之眼看显微镜下的复杂生命【数据故事计划二等奖】...
摘要:细听学长学姐讲故事,或许在他们的路上也有你的身影! [第一届数据故事计划] "数据故事计划"旨在收集各类有关大数据的故事然后进行比赛及相关的宣传和推广.包括同学们接触大数据. ...
python 列表多行_Python Pandas list列表数据列拆分成多行的方法实现
1.实现的效果示例代码: df=pd.DataFrame({'A':[1,2],'B':[[1,2],[1,2]]}) df Out[458]: A B 0 1 [1, 2] 1 2 [1, 2] ...
bootstarp js设置列隐藏_Bootstrap框架----DataTables列表移动端适配定义隐藏列
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化. Bootstrap框架--DataTables列表示例最终效果如图: Bootstrap是自动适配移动端 ...
SQLServr添加数据列
数据列定义表中数据行的数据插入和数据类型都是基于数据列的,学会添加数据列在开发过程中是必不可少的. 使用SSMS数据库管理工具添加数据列在数据表中添加一列或者多列步骤相同 1.连接数据库,选择数据 ...
动态合并Repeater控件数据列
前天Insus.NET实现<动态合并GridView数据行DataRow的列>.今天再玩玩Repeater控件,功能也是动态合并某列栏位. Repeater控件跟GridView控件一样集 ...
[转载] python处理数据列_Python中基于跨列的数据处理
参考链接: Python 克里斯蒂安Cristian算法 python处理数据列 Let's suppose your manager gives you a random dataset and t ...
excel根据条件列转行_如何将excel里的一列数据转为一行 excel数据列转行的办法步骤...
如何将excel里的一列数据转为一行 excel数据列转行的办法步骤我们的生活中越来越离不开PC,但在使用PC的过程中总会遇到各种各样的问题.知识屋致力于给PC小白朋友们介绍一些简单常用问题的解决办 ...

理解向日葵甘特之六——定义数据列

理解向日葵甘特之六——定义数据列相关推荐

最新文章

热门文章