日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間:2024/1/17 编程问答 52 豆豆
生活随笔 收集整理的這篇文章主要介紹了 理解向日葵甘特之六——定义数据列 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在前面的六篇文章之中,我們詳細的講解了甘特圖使用的數據結構以及提供的接口,我們可以知道,對于SFData接口的調用方來講,最主要的就是實體+屬性的模式,可是,對于甘特圖組件來講,怎樣將這些實體的屬性顯示在界面上并提供必要的操作,是必須解決的問題。
針對這個問題,向日葵甘特組件的SFGantt模塊使用了"數據列"的概念,"數據列"很多時候和"屬性"和"節點"混淆了,我們在這里來使用簡單的圖說明一下這三者的關系:???? 從上面的圖可以看出,XML節點是數據的存儲來源,而實體屬性是數據在SFData運行過程之中的數據形式,而數據列則是屬性在界面上的表現形式,通常為了程序邏輯易于處理,也為了用戶方便記憶,這三者的名稱都是相同的(這也就是為什么容易混淆的原因),例如任務的開始時間,在我們定義的XML格式之中,對應的XML節點名稱為Start,而在數據初始化之后,對這項進行讀寫的屬性名稱也為Start,而為這個屬性定義的數據列名稱同樣也是Start。 簡單的說,數據列就是顯示在甘特圖列表左側的一列一列的數據,左側列表之中每一列都是一個數據列,但是數據列并不只是在左側的列表之中使用,實際上,甘特圖之中的大部分數據顯示都采用數據列的機制,一旦采用此機制,意味著可以完全配置該區域數據的顯示內容,例如,在甘特圖一下位置同樣也使用了數據列: 1.當用戶拖動右側滾動條的時候,顯示在右上角(實時顯示當前滾動到何處)的一個或者多個字段名稱 2.甘特圖最左側顯示的灰色用來作為標識的列(Logo下方的列) 3.鼠標放在任務、鏈接等內容的上的時候彈出的浮動提示上顯示的內容 4.甘特圖圖表右側顯示的任務名稱 實際上,除了涉及到復雜的繪制邏輯之外(例如甘特圖的圖形和箭頭的形狀等),甘特圖上的數據顯示都應該盡量使用數據列的定義來完成,這樣可以保證完全的可靈活的配置顯示的內容。下面我們來說明一下數據列的功能和實現。
每一個數據列必須完成以下功能的定義: 1.如何顯示數據列的表頭; 2.如何顯示數據內容; 3.如果該列需要編輯,如何顯示編輯界面; 同時,數據列還提供了一些方法來提供給用戶自定義顯示的前景色、背景色、對齊方式等樣式。 當前甘特圖之中,提供了SFGanttField類來自定義和管理系統之中的所有數據列的定義,所有的列都應該是SFGanttField的實例,當前,SFGanttField,構造的時候,可以指定以下參數:
參數名稱參數默認值參數說明
headText''默認該列的列表頭文本
bodyData必須指定數據顯示需要的屬性名稱,如果有多個用逗號分隔,當其中一個屬性發生變化的時候,將自動引發該數據列的重繪
inputData可以編輯的時候必須指定編輯模式寫入的屬性名稱,只能是一個
width100默認該列的顯示寬度
ReadOnlyfalse當設置為
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屬性變化的時候,該圖標需要重繪,如果有多個,用逗號分隔
以上介紹了現在甘特圖之中的所有支持的數據列類型,為了使用上的方便,實際上我們也已經定義好了一些數據列可以供直接使用,在下面的列表之中,我們列出了系統集成的數據列類型和相關信息,作為參考:
實體類型數據列名稱實現類bodyDatainputData是否只讀說明
任務EmptySFGanttField

true一個完全空的列,用來實現什么都不顯示
任務UIDSFGanttFieldUID
true顯示UID
任務IDSFGanttFieldID
true顯示ID
任務nameSFGanttFieldNameName
顯示一個簡單的名稱,并允許更改
任務NameSFGanttFieldName,Summary,CollapseName
顯示并更改名稱,并按照大綱級別留空,并給大綱提供可折疊的圖標
任務OutlineNumberSFGanttFieldOutlineNumber
true顯示大綱級別
任務StatusIconSFGanttFieldIcon動態實現
true顯示任務的狀態圖標
任務DurationSFGanttFieldDurationStart,Finish
true顯示工期
任務StartSFGanttFieldDateTimeStartStart
顯示并更改任務開始時間
任務FinishSFGanttFieldDateTimeFinishFinish
顯示并更改任務結束時間
任務NotesSFGanttFieldLongTextNotesNotes
顯示并更改任務的備注信息
任務ClassNameSFGanttFieldSelecterClassNameClassName
顯示并更改任務的顯示樣式
任務ConstraintTypeSFGanttFieldSelecterConstraintTypeConstraintType
顯示并更改任務的約束類型
任務ConstraintDateSFGanttFieldDateTimeConstraintDateConstraintDate
顯示并更改任務的約束時間
任務CriticalSFGanttFieldBoolCriticalCritical
顯示并切換該任務是否是關鍵任務
任務SelectedSFGanttFieldSelected內部實現
true顯示并切換任務的選中狀態
任務ResourceSFGanttField內部實現
true顯示給任務分配的資源
任務PercentCompleteSFGanttFieldPercentPercentCompletePercentComplete
顯示并調整任務的完成百分比
任務ActualStartSFGanttFieldDateTimeActualStartActualStart
顯示并更改任務實際開始時間
任務ActualFinishSFGanttFieldDateTimeActualFinishActualFinish
顯示并更改任務實際完成時間
任務ActualDurationSFGanttFieldDurationActualStart,ActualFinish
true顯示任務的實際工期
任務BaselineStartSFGanttFieldDateTimeBaselineStartBaselineStart
顯示并更改任務的基準開始時間
任務BaselineFinishSFGanttFieldDateTimeBaselineFinishBaselineFinish
顯示并更改任務的基準結束時間
鏈接TypeSFGanttFieldSelecterTypeType
顯示并更改鏈接的類型
鏈接FromTaskSFGanttFieldElement內部實現
true顯示鏈接的起始任務
鏈接ToTaskSFGanttFieldElement內部實現
true顯示鏈接的結束任務

?? ?這里就介紹完成了所有目前向日葵甘特圖支持的數據列的信息,每一個數據列都可以對屬性進行重新設置或重寫,從而實現自己需要的復雜的功能邏輯,假如需要自定義數據列類型,需要自定義一個繼承 SFGanttField的類,而這個過程相對比較復雜,因此,不在這里做詳細的介紹。

轉載于:https://www.cnblogs.com/tidestone/archive/2009/05/25/1489201.html

總結

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

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