在前面的六篇文章之中，我們詳細的講解了甘特圖使用的數據結構以及提供的接口，我們可以知道，對于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

總結

以上是生活随笔為你收集整理的理解向日葵甘特之六——定义数据列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。