개요

날짜 표시줄은 GanttSheet에서 Gantt 차트의 열 헤더로, 더 작거나 큰 시간 단위를 보여 줍니다.

계층 모드 날짜 표시줄 레이아웃에는 세 가지 계층(상위, 중간 및 하위 계층)이 있습니다. GC.Spread.Sheets.GanttSheet.TimescaleTierMode를 사용하여 레이아웃을 변경할 수 있습니다. middle middleBottom topMiddleBottom 스케일 구분 기호 표시 스케일 선으로 상위 계층과 중간 계층을 구분합니다. 스케일 선을 표시하거나 숨길 수 있습니다. 계층 구성 각 상위, 중간 및 하위 계층은 다음 속성을 사용하여 구성할 수 있습니다. unit: GC.Spread.Sheets.GanttSheet.TimescaleUnit count: number labelAlign: "Left" | "Center" | "Right" showTickLines: boolean formatter: string 포맷터는 GanttSheet 특수 키워드와 함께 "yyyy-mm-dd" 같은 날짜 값의 Spread Number Format 문자열이거나 서식 지정 중 실행되는 콜백 함수일 수 있습니다.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var myTable; var ganttSheet; var showScaleSeparator = true; var showTopScaleTick = true; var showMiddleScaleTick = true; var showBottomScaleTick = true; var supposedFormats = [ undefined, [ { value:`yyyy`, info: `2009, 2010,... `}, { value:`'yy`, info: `'09, '10, ...`}, { value:`yy`, info: `09, 10,...`}, { value:`"Year" {!YEAR_FROM_START}`, info: `Year 1, Year 2 ... (From Start)`}, { value:`"Y"{!YEAR_FROM_START}`, info: `Y1, Y2, Y3, ... (From Start)`}, { value:`{!YEAR_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value:`"Year" {!YEAR_FROM_END}`, info: `Year 2, Year 1... (From End)`}, { value:`"Y" {!YEAR_FROM_END}`, info: `Y3, Y2, Y1, ... (From End)`}, { value:`{!YEAR_FROM_END}`, info: `4, 3, 2, 1, ... (From End)`}, ], [ { value: `{!HALF_YEAR("1st","2nd")} "Half"`, info: `1st Half, 2nd Half, ... `}, { value: `yyyy, "Half" {!HALF_YEAR("1","2")}`, info: `2009, Half 1, 2009, Half 2, ...`}, { value: `"Half" {!HALF_YEAR("1","2")}`, info: `Half 1, Half 2, ...`}, { value: `'yy "H" {!HALF_YEAR("1","2")}`, info: `'09 H1, '09 H2, ...`}, { value: `"H" {!HALF_YEAR("1","2")}`, info: `H1, H2, ...`}, { value: `{!HALF_YEAR("1","2")}`, info: `1, 2,…`}, { value: `{!HALF_YEAR("1","2")}"H"yy`, info: `1H09, 2H09, ...`}, { value: `"Half" {!HALF_YEAR_FROM_START}`, info: `Half 1, Half 2, Half 3, ... (From Start)`}, { value: `"H" {!HALF_YEAR_FROM_START}`, info: `H1, H2, H3, ... (From Start)`}, { value: `{!HALF_YEAR_FROM_START}`, info: `1, 2, 3, ... (From Start)`}, { value: `"Half" {!HALF_YEAR_FROM_END}`, info: `Half 3, Half 2, Half 1, ... (From End)`}, { value: `"H"{!HALF_YEAR_FROM_END}`, info: `H3, H2, H1, ... (From End)`}, { value: `{!HALF_YEAR_FROM_END}`, info: `3, 2, 1, ... (From End)`}, ], [ { value: `{!QUARTER("1st","2nd","3rd","4th")} "Quarter"`, info: `1st Quarter`}, { value: `yyyy "Qtr" {!QUARTER("1","2","3","4")}`, info: `2009 Qtr 1`}, { value: `"Qtr" {!QUARTER("1","2","3","4")}`, info: `Qtr 1, Qtr 2, ...`}, { value: `'yy "Q"{!QUARTER("1","2","3","4")}`, info: `'09 Q1, '09 Q2, ...`}, { value: `"Q"{!QUARTER("1","2","3","4")}`, info: `Q1, Q2, ...`}, { value: `{!QUARTER("1","2","3","4")}`, info: `1, 2, ...`}, { value: `{!QUARTER("1","2","3","4")}"Q"yy`, info: `1Q09, 2Q09, ...`}, { value: `"Quarter" {!QUARTER_FROM_START}`, info: `Quarter 1, Quarter 2, ... (From Start)`}, { value: `"Q"{!QUARTER_FROM_START}`, info: `Q1, Q2, Q3, Q4, ... (From Start)`}, { value: `{!QUARTER_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value: `"Quarter" {!QUARTER_FROM_END}`, info: `Quarter 2, Quarter 1, ... (From End)`}, { value: `"Q"{!QUARTER_FROM_END}`, info: `Q4, Q3, Q2, Q1, ... (From End)`}, { value: `{!QUARTER_FROM_END}`, info: `4, 3, 2, 1, ... (From End)`}, ], [ { value: `yyyy mmmm`, info: `2009 January `}, { value: `yy mmm`, info: `'09 Jan`}, { value: `mmmm`, info: `January`}, { value: `mmm`, info: `Jan, Feb,..`}, { value: `mmmmm`, info: `J, F, ...`}, { value: `m`, info: `1, 2,...`}, { value: `'yy m`, info: `'09 1`}, { value: `yy/m`, info: `09/1`}, { value: `"Month" {!MONTH_FROM_START}`, info: `Month 1, Month 2, ... (From Start)`}, { value: `"M" {!MONTH_FROM_START}`, info: `M1, M2, M3, ... (From Start)`}, { value: `{!MONTH_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value: `"Month" {!MONTH_FROM_END}`, info: `Month 2, Month 1, ... (From End)`}, { value: `"M"{!MONTH_FROM_END}`, info: `M3, M2, M1, ... (From End)`}, { value: `{!MONTH_FROM_END}`, info: `4, 3, 2, 1, ... (From End)`}, ], [ { value: `d`, info: `1, 11, 21, ... `}, { value: `{!THIRDS_OF_MONTH("B","M","E")}`, info: `B, M, E,..`}, { value: `{!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `Beginning, Middle, End, ...`}, { value: `m/d`, info: `1/1, 1/11, 1/21, ...`}, { value: `m/{!THIRDS_OF_MONTH("B","M","E")}`, info: `1/B, 1/M, 1/E, ...`}, { value: `mmmm {!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `January Beginning, January Middle, ...`}, { value: `mmm d`, info: `Jan 1, Jan 11, Jan 21, ...`}, { value: `mmm {!THIRDS_OF_MONTH("B","M","E")}`, info: `Jan B. Jan M, Jan E, ...`}, { value: `mmmm d`, info: `January 1, January 11, January 21, ...`}, { value: `yy/m/d`, info: `09/1/1, 09/1/11, 09/1/21, ...`}, { value: `yy/m/{!THIRDS_OF_MONTH("B","M","E")}`, info: `09/1/B, 09/1/M, 09/1/E, ...`}, { value: `'yy mmm d`, info: `'09 Jan 1, '09 Jan 11, '09 Jan 21, ...`}, { value: `'yy mmm {!THIRDS_OF_MONTH("B","M","E")}`, info: `'09 Jan B, '09 Jan M, '09 Jan E, ...`}, { value: `yyyy mmmm d`, info: `2009 January 1, 2009 January 11, ...`}, { value: `yyyy mmmm {!THIRDS_OF_MONTH("Beginning","Middle","End")}`, info: `2009 January Beginning, ...`}, ], [ { value: `yyyy mmmm d`, info: `2009 January 25 `}, { value: `'yy mmm d`, info: `'09 Jan 25`}, { value: `mmmm d`, info: `January 25`}, { value: `mmm d`, info: `Jan 25, Feb 1,...`}, { value: `mmmmm d`, info: `J 25, F1, ...`}, { value: `yy/m/d`, info: `09/1/25, 09/2/1, ...`}, { value: `m/d`, info: `1/25, 2/1, ...`}, { value: `d`, info: `25, 1, ...`}, { value: `ddd dd`, info: `Sun 25`}, { value: `ddd yy/m/d`, info: `Sun 09/1/25`}, { value: `ddd 'yy mmmm d`, info: `Sun '09 January 25`}, { value: `ddd 'yy mmm d`, info: `Sun '09 Jan 25`}, { value: `ddd mmmm d`, info: `Sun January 25`}, { value: `ddd mmm d`, info: `Sun Jan 25`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} mmm d`, info: `Su Jan 25`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} mmm d`, info: `S Jan 25`}, { value: `ddd dd`, info: `Sun 25`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info: `Su 25`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}mmmmm d`, info: `SJ 25`}, { value: `ddd m/d`, info: `Sun 1/25`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} m/d`, info: `Su 1/25`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} m/d`, info: `S 1/25`}, { value: `{!WEEK_OF_YEAR}`, info: `1, 2, ... 52, 1, 2, ...`}, { value: `ddd {!WEEK_OF_YEAR}`, info: `Sun 1, ..., Sun 52, Sun 1, ...`}, { value: `"Week" {!WEEK_FROM_START}`, info: `Week 1, Week 2, ... (From Start)`}, { value: `"W"{!WEEK_FROM_START}`, info: `W1, W2, W3, W4, ... (From Start)`}, { value: `{!WEEK_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value: `"Week" {!WEEK_FROM_END}`, info: `Week 2, Week 1, ... (From End)`}, { value: `"W"{!WEEK_FROM_END}`, info: `W4, W3, W2, W1, ... (From End)`}, { value: `{!WEEK_FROM_END}`, info: `4, 3, 2, 1, ...(From End)`}, ], [ { value: `ddd 'yy mmm d`, info :`Wed '09 Jan 28 `}, { value: `ddd mmmm d`, info :`Wed January 28`}, { value: `ddd mmm d`, info :`Wed Jan 28`}, { value: `ddd mmmmm d`, info :`Wed J 28`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info :`We 28`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}mmmmm d `, info :`WJ 28`}, { value: `ddd m/d`, info :`Wed 1/28`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} m/d`, info :`We 1/28`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} m/d`, info :`W 1/28`}, { value: `ddd d`, info :`Wed 28`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")} d`, info :`We 28`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")} d `, info :`W 28`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}d `, info :`W28`}, { value: `'yy mmm d`, info :`'09 Jan 28`}, { value: `mmm d`, info :`Jan 28, Jan 29, ...`}, { value: `mmmmm d`, info :`J 28, J 29, ...`}, { value: `dddd`, info :`Sunday, Monday, ...`}, { value: `ddd`, info :`Sun, Mon,Tue, ...`}, { value: `{!DAY_OF_WEEK("Su", "Mo","Tu","We","Th","Fr","St")}`, info :`Su, Mo, Tu,...`}, { value: `{!DAY_OF_WEEK("S", "M","T","W","T","F","S")}`, info :`S, M,T,...`}, { value: `yy/m/d`, info :`09/1/28, 09/1/29, ...`}, { value: `ddd yy/m/d`, info :`Wed 09/1/28, Thu 09/1/29, ...`}, { value: `m/d`, info :`1/28, 1/29, ...`}, { value: `d`, info :`1, 2, ... `}, { value: `yyyy {!DAY_OF_YEAR}`, info :`2009 128 (Day of Year)`}, { value: `'yy {!DAY_OF_YEAR}`, info :`'09 128 (Day of Year)`}, { value: `{!DAY_OF_YEAR}`, info :`128 (Day of Year)`}, { value: `"Day"{!DAY_FROM_START}`, info :`Day 1, Day 2 ... (From Start)`}, { value: `"D" {!DAY_FROM_START}`, info :`D1, D2, D3, ... (From Start)`}, { value: `{!DAY_FROM_START}`, info :`1, 2, 3, 4, ... (From Start)`}, { value: `"Day" {!DAY_FROM_END}`, info :`Day 2 Day 1, ... (From End) `}, { value: `"D" {!DAY_FROM_END}`, info :`D3, D2, D1, ... (From End)`}, { value: `{!DAY_FROM_END}`, info :`4, 3, 2, 1, ... (From End)`}, ], [ { value: `ddd mmm d, h`, info: `Wed Jan 28, 11 `}, { value: `mmm d, h`, info: `Jan 28, 11`}, { value: `m/d h`, info: `1/28 11`}, { value: `h:mm`, info: `11, info: 00, 12, info: 00, ...`}, { value: `h`, info: `11, 12, ...`}, { value: `hh`, info: `11, 12, ...`}, { value: `"Hour" {!HOUR_FROM_START}`, info: `Hour 1, Hour 2, ... (From Start)`}, { value: `"H"{!HOUR_FROM_START}`, info: `H1, H2, H3, ... (From Start)`}, { value: `{!HOUR_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value: `"Hour" {!HOUR_FROM_END}`, info: `Hour 2, Hour 1, ... (From End)`}, { value: `"H"{!HOUR_FROM_END}`, info: `H3, H2, H1, ... (From End)`}, { value: `{!HOUR_FROM_END}`, info: `4, 3, 2, 1, ... (From End)`}, ], [ { value: `hh:mm`, info: `13:45, 13:46, ... `}, { value: `{!Minute}`, info: `45, 46, 47, ..`}, { value: `"Minute" {!Minute_FROM_START}`, info: `Minute 1, Minute 2, ... (From Start)`}, { value: `"M"{!Minute_FROM_START}`, info: `M1, M2, M3, ... (From Start)`}, { value: `{!Minute_FROM_START}`, info: `1, 2, 3, 4, ... (From Start)`}, { value: `"Minute" {!Minute_FROM_END}`, info: `Minute 2, Minute 1, ... (From End)`}, { value: `"M"{!Minute_FROM_END}`, info: `M3, M2, M1, ... (From End)`}, { value: `{!Minute_FROM_END}`, info: `4, 3, 2, 1, ... (From End)`}, ] ]; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); initSplitView(spread); }; function initSpread(spread) { spread.suspendPaint(); initDataSource(spread); initGanttSheet(spread); spread.resumePaint(); } function initDataSource(spread) { var tableName = "Gantt_Id"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); } function initGanttSheet(spread) { ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); var view = myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120 } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }); initSidePanel(ganttSheet); } function initSidePanel(ganttSheet) { var topScalePanel = document.getElementById("top-scale-panel"); var middleScalePanel = document.getElementById("middle-scale-panel"); var bottomScalePanel = document.getElementById("bottom-scale-panel"); var timescaleModeItem = document.getElementById("timescale-mode"); var scaleSeparatorItem = document.getElementById("scale-separator"); var topScaleUnitItem = document.getElementById("top-scale-unit"); var topScaleCountItem = document.getElementById("top-scale-count"); var topScaleAlignItem = document.getElementById("top-scale-align"); var topScaleFormatItem = document.getElementById("top-scale-format"); var topScaleTickItem = document.getElementById("top-scale-tick"); var middleScaleUnitItem = document.getElementById("middle-scale-unit"); var middleScaleCountItem = document.getElementById("middle-scale-count"); var middleScaleAlignItem = document.getElementById("middle-scale-align"); var middleScaleFormatItem = document.getElementById("middle-scale-format"); var middleScaleTickItem = document.getElementById("middle-scale-tick"); var bottomScaleUnitItem = document.getElementById("bottom-scale-unit"); var bottomScaleCountItem = document.getElementById("bottom-scale-count"); var bottomScaleAlignItem = document.getElementById("bottom-scale-align"); var bottomScaleFormatItem = document.getElementById("bottom-scale-format"); var bottomScaleTickItem = document.getElementById("bottom-scale-tick"); var setScaleItem = document.getElementById("set-scale"); syncOptionToPanel(true); timescaleModeItem.addEventListener("change", function() { var mode = Number(timescaleModeItem.value); if (mode === 1) { topScalePanel.classList.add("hide"); middleScalePanel.classList.remove("hide"); bottomScalePanel.classList.add("hide"); } else if (mode === 2) { topScalePanel.classList.add("hide"); middleScalePanel.classList.remove("hide"); bottomScalePanel.classList.remove("hide"); } else if (mode === 3) { topScalePanel.classList.remove("hide"); middleScalePanel.classList.remove("hide"); bottomScalePanel.classList.remove("hide"); } syncOptionToPanel(); }); scaleSeparatorItem.addEventListener("click", function() { toggleScaleSeparator(); }); topScaleTickItem.addEventListener("click", function() { toggleTopScaleTick(); }); middleScaleTickItem.addEventListener("click", function() { toggleMiddleScaleTick(); }); bottomScaleTickItem.addEventListener("click", function() { toggleBottomScaleTick(); }); topScaleUnitItem.addEventListener("change", function() { syncTopScaleFormatOptions(); }); middleScaleUnitItem.addEventListener("change", function() { syncMiddleScaleFormatOptions(); }); bottomScaleUnitItem.addEventListener("change", function() { syncBottomScaleFormatOptions(); }); setScaleItem.addEventListener("click", function() { var mode = Number(timescaleModeItem.value); var timescale = ganttSheet.project.timescale; var unit, formatter; ganttSheet.suspendPaint(); timescale.tierMode = Number(mode); timescale.showScaleSeparator = showScaleSeparator; if (mode === 1 || mode === 2 || mode === 3) { unit = Number(middleScaleUnitItem.value); formatter = middleScaleFormatItem.value ? middleScaleFormatItem.value : undefined; timescale.middleTier.unit = unit; timescale.middleTier.count = Number(middleScaleCountItem.value); timescale.middleTier.labelAlign = middleScaleAlignItem.value; if (formatter) { timescale.middleTier.formatter = supposedFormats[unit] ? supposedFormats[unit][formatter].value : undefined; } else { timescale.middleTier.formatter = undefined; } timescale.middleTier.showTickLines = showMiddleScaleTick; } if (mode === 2 || mode === 3) { unit = Number(bottomScaleUnitItem.value); formatter = bottomScaleFormatItem.value ? bottomScaleFormatItem.value : undefined; timescale.bottomTier.unit = unit; timescale.bottomTier.count = Number(bottomScaleCountItem.value); timescale.bottomTier.labelAlign = bottomScaleAlignItem.value; if (formatter) { timescale.bottomTier.formatter = supposedFormats[unit] ? supposedFormats[unit][formatter].value : undefined; } else { timescale.bottomTier.formatter = undefined; } timescale.bottomTier.showTickLines = showBottomScaleTick; } if (mode === 3) { unit = Number(topScaleUnitItem.value); formatter = topScaleFormatItem.value ? topScaleFormatItem.value : undefined; timescale.topTier.unit = unit; timescale.topTier.count = Number(topScaleCountItem.value); timescale.topTier.labelAlign = topScaleAlignItem.value; if (formatter) { timescale.topTier.formatter = supposedFormats[unit] ? supposedFormats[unit][formatter].value : undefined; } else { timescale.topTier.formatter = undefined; } timescale.topTier.showTickLines = showTopScaleTick; } ganttSheet.resumePaint(); }); function toggleScaleSeparator() { if (scaleSeparatorItem.classList.contains("active")) { showScaleSeparator = false; scaleSeparatorItem.classList.remove("active"); } else { showScaleSeparator = true; scaleSeparatorItem.classList.add("active"); } } function toggleTopScaleTick() { if (topScaleTickItem.classList.contains("active")) { showTopScaleTick = false; topScaleTickItem.classList.remove("active"); } else { showTopScaleTick = true; topScaleTickItem.classList.add("active"); } } function toggleMiddleScaleTick() { if (middleScaleTickItem.classList.contains("active")) { showMiddleScaleTick = false; middleScaleTickItem.classList.remove("active"); } else { showMiddleScaleTick = true; middleScaleTickItem.classList.add("active"); } } function toggleBottomScaleTick() { if (bottomScaleTickItem.classList.contains("active")) { showBottomScaleTick = false; bottomScaleTickItem.classList.remove("active"); } else { showBottomScaleTick = true; bottomScaleTickItem.classList.add("active"); } } function syncTopScaleFormatOptions() { var unit = topScaleUnitItem.value; var formatListItem = createFormatOptionList(unit); topScaleFormatItem.innerHTML = formatListItem; topScaleFormatItem.value = ""; } function syncMiddleScaleFormatOptions() { var unit = middleScaleUnitItem.value; var formatListItem = createFormatOptionList(unit); middleScaleFormatItem.innerHTML = formatListItem; middleScaleFormatItem.value = ""; } function syncBottomScaleFormatOptions() { var unit = bottomScaleUnitItem.value; var formatListItem = createFormatOptionList(unit); bottomScaleFormatItem.innerHTML = formatListItem; bottomScaleFormatItem.value = ""; } function syncOptionToPanel(includeMode) { var timescale = ganttSheet.project.timescale; var tierMode = Number(timescaleModeItem.value); if (includeMode) { timescaleModeItem.value = tierMode; if (showScaleSeparator !== timescale.showScaleSeparator) { toggleScaleSeparator(); } } if (tierMode === 1 || tierMode === 2 || tierMode === 3) { middleScaleUnitItem.value = timescale.middleTier.unit; syncMiddleScaleFormatOptions(); middleScaleCountItem.value = timescale.middleTier.count; middleScaleAlignItem.value = timescale.middleTier.labelAlign; middleScaleFormatItem.value = timescale.middleTier.formatter ? timescale.middleTier.formatter : ""; if (showMiddleScaleTick !== timescale.middleTier.showTickLines) { toggleMiddleScaleTick(); } } if (tierMode === 2 || tierMode === 3) { bottomScaleUnitItem.value = timescale.bottomTier.unit; syncBottomScaleFormatOptions(); bottomScaleCountItem.value = timescale.bottomTier.count; bottomScaleAlignItem.value = timescale.bottomTier.labelAlign; bottomScaleFormatItem.value = timescale.bottomTier.formatter ? timescale.bottomTier.formatter : ""; if (showBottomScaleTick !== timescale.bottomTier.showTickLines) { toggleBottomScaleTick(); } } if (tierMode === 3) { topScaleUnitItem.value = timescale.topTier.unit; syncTopScaleFormatOptions(); topScaleCountItem.value = timescale.topTier.count; topScaleAlignItem.value = timescale.topTier.labelAlign; topScaleFormatItem.value = timescale.topTier.formatter ? timescale.topTier.formatter : ""; if (showTopScaleTick !== timescale.topTier.showTickLines) { toggleTopScaleTick(); } } } } function createFormatOptionList(target) { var formats = supposedFormats[target]; var options = `<option value="">None</option>`; for (let i = 0; i < formats.length; i ++) { var format = formats[i]; options += `<option value="${i}">${format.info}</option>`; } return options; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api'; } function initSplitView(spread) { var host = document.getElementById("split-view"); var content = host.getElementsByClassName("split-content")[0]; var panel = host.getElementsByClassName("split-panel")[0]; new SplitView({ host: host, content: content, panel: panel, refreshContent: function() { spread.refresh(); } }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/splitView/splitView.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="split-view" class="sample-tutorial"> <div id="ss" class="sample-spreadsheets split-content"></div> <div class="options-container split-panel"> <div class="option-row option-title"> Config the timescale style. </div> <div class="option-block"> <div class="option-row selection-box"> <label for="timescale-mode">Mode</label> <select id="timescale-mode"> <option value="1">One Tier(middle)</option> <option value="2" selected>Two Tier(middleBottom)</option> <option value="3">Three Tier(topMiddleBottom)</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="scale-separator">Separate Scale</label> <div class="option-info">* checkbox toggle whether show the scale separator.</div> </div> </div> <div class="option-block hide" id="top-scale-panel"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Top Scale Config. </div> <div class="option-row selection-box"> <label for="top-scale-unit">Unit</label> <select id="top-scale-unit"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="top-scale-count">Count</label> <input type="text" id="top-scale-count" value="1" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="top-scale-align">Align</label> <select id="top-scale-align"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="top-scale-format">Formatter</label> <select id="top-scale-format"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="top-scale-tick">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <div class="option-block" id="middle-scale-panel"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Middle Scale Config. </div> <div class="option-row selection-box"> <label for="middle-scale-unit">Unit</label> <select id="middle-scale-unit"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="middle-scale-count">Count</label> <input type="text" id="middle-scale-count" value="1" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="middle-scale-align">Align</label> <select id="middle-scale-align"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="middle-scale-format">Formatter</label> <select id="middle-scale-format"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="middle-scale-tick">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <div class="option-block" id="bottom-scale-panel"> <div class="option-info toggle">* toggle panel for the "Mode" option.</div> <div class="option-row option-title"> Bottom Scale Config. </div> <div class="option-row selection-box"> <label for="bottom-scale-unit">Unit</label> <select id="bottom-scale-unit"> <option value="1">years</option> <option value="2">halfYears</option> <option value="3">quarters</option> <option value="4">months</option> <option value="5">thirdsOfMonth</option> <option value="6">weeks</option> <option value="7">days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="bottom-scale-count">Count</label> <input type="text" id="bottom-scale-count" value="1" /> <div class="option-info valid">* valid value: integer</div> </div> <div class="option-row selection-box"> <label for="bottom-scale-align">Align</label> <select id="bottom-scale-align"> <option value="Left">Left</option> <option value="Center">Center</option> <option value="Right">Right</option> </select> </div> <div class="option-row selection-box"> <label for="bottom-scale-format">Formatter</label> <select id="bottom-scale-format"> <option value="">None</option> </select> </div> <div class="option-row"> <label class="option-checkbox active" id="bottom-scale-tick">Tick Lines</label> <div class="option-info">* checkbox toggle whether show the top scale tick lines.</div> </div> </div> <input type="button" id="set-scale" class="option-button" value="Set Timescale"> </div> </div> </html>
.option-block { background: #fff; padding: 8px; margin: 12px 0; border-radius: 4px; border: 1px dashed #82bc00; box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1); } .option-block.toggle { border: 1px dotted #f7a711; } .option-row { font-size: 14px; box-sizing: border-box; padding: 4px 0; } .option-title { font-weight: bold; color: #656565; } .option-info { font-size: 12px; color: #919191; margin-top: 6px; font-weight: normal; } .option-info.valid { color: #82bc00; } .option-info.toggle { color: #f7a711; } .option-button { width: 100%; padding: 0; line-height: 20px; background: #82bc00; color: #fff; transition: 0.3s; cursor: pointer; outline: none; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border: none; } .option-button:hover { background: #82bc00; color: #fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4); } .option-checkbox { background: #fff; border: 1px dashed #f7a711; color: #f7a711; padding: 2px 4px; transition: 0.3s; box-sizing: border-box; cursor: pointer; } .option-checkbox.active { color: #fff; background: #f7a711; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border-radius: 4px; } .selection-box { position: relative; } .selection-box > select { text-align: left; width: 100%; height: 20px; padding: 0; line-height: 20px; background: transparent; border: none; border-bottom: 2px solid #656565; color: #656565; transition: 0.3s; cursor: pointer; outline: none; box-sizing: border-box; } .selection-box > select > option { background: white; } .selection-box > select:focus { border-bottom: 2px solid #82bc00; color: #82bc00; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); } .selection-box > label { position: absolute; cursor: pointer; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; right: 0; top: 6px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); } .input-box { position: relative; } .input-box > input[type=text] { width: 100%; background: transparent; border: none; color: #656565; border-bottom: 2px solid #656565; outline: none; box-sizing: border-box; transition: 0.3s; } .input-box > input[type=text]:focus { color: #82bc00; border-bottom: 2px solid #82bc00; } .input-box > label { cursor: pointer; position: absolute; right: 0; top: 5px; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); }