滚动

GanttSheet图表区支持滚动。试着改变以下选项,看看它们如何影响滚动。

按像素滚动时间刻度 您可以通过像素滚动甘特图时间刻度,并且它将向下取整并滚动到最近的刻度(最近刻度:ganttsheet.project.timescale.pixelPerDay)。 注意:正像素数量将向后滚动,而负像素数量将向前滚动。 按一个刻度滚动时间刻度 您可以按一个刻度滚动时间刻度: 按指定单位滚动时间刻度 您还可以按特定单位的计数滚动时间刻度。 滚动单位是GC.Spread.Sheets.GanttSheet.TimescaleUnit,其中包含: years halfYears quarters months thirdsOfMonth weeks days hours minutes 注意:时间刻度将滚动到最近的刻度。正像素数量将向前滚动,负像素数量将向后滚动。 按特定日期滚动时间刻度 您可以滚动时间刻度到特定日期。 注意:时间刻度将滚动到最近的刻度。 您可以控制视口的百分比,其中目标日期要滚动到的位置。默认值为0,将滚动到视口左侧的目标日期。
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var myTable; var ganttSheet; var isForward = false; 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 scrollPixelInput = document.getElementById("scroll-pixel"); var scrollByPixelButton = document.getElementById("scroll-by-pixel"); var isForwardCheckbox = document.getElementById("is-forward"); var scrollOneTickButton = document.getElementById("scroll-one-tick"); var scrollUnitSelect = document.getElementById("scroll-unit"); var scrollCountInput = document.getElementById("scroll-count"); var scrollByUnitButton = document.getElementById("scroll-by-unit"); var scrollDateInput = document.getElementById("scroll-date"); var scrollPercentInput = document.getElementById("scroll-percent"); var scrollToButton = document.getElementById("scroll-to"); var currentDate = new Date(); scrollDateInput.value = `${currentDate.getFullYear()}/${currentDate.getMonth() + 1}/${currentDate.getDate()}`; scrollByPixelButton.addEventListener("click", function() { var scrollPixel = Number(scrollPixelInput.value); ganttSheet.project.timescale.scroll(scrollPixel); }); isForwardCheckbox.addEventListener("click", function() { if (isForwardCheckbox.classList.contains("active")) { isForwardCheckbox.classList.remove("active"); isForward = false; isForwardCheckbox.innerHTML = "Backward"; } else { isForwardCheckbox.classList.add("active"); isForward = true; isForwardCheckbox.innerHTML = "Forward"; } }); scrollOneTickButton.addEventListener("click", function() { ganttSheet.project.timescale.scrollOneTick(isForward); }); scrollByUnitButton.addEventListener("click", function() { var scrollCount = Number(scrollCountInput.value); var scrollUnit = Number(scrollUnitSelect.value); ganttSheet.project.timescale.scrollBy(scrollCount, scrollUnit); }); scrollToButton.addEventListener("click", function() { var scrollDate = new Date(scrollDateInput.value); var scrollPercent = Number(scrollPercentInput.value); ganttSheet.project.timescale.scrollTo(scrollDate, scrollPercent); }); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[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="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/splitView/splitView.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"> <div id="ss" class="split-content"></div> <div class="split-panel"> <div class="option-row option-title"> Scroll the ganttsheet chart area. </div> <div class="option-block"> <div class="option-row input-box"> <label for="scroll-pixel">Scroll Pixel</label> <input type="text" id="scroll-pixel" value="60" /> <div class="option-info valid">* valid value: integer, could be negative</div> </div> <div class="option-row"> <input type="button" id="scroll-by-pixel" class="option-button" value="Scroll By Pixel" /> </div> </div> <div class="option-block"> <div class="option-row"> <label class="option-checkbox" id="is-forward">Backward</label> <div class="option-info">* checkbox toggle between "Forward" and "Backward"</div> </div> <div class="option-row"> <input type="button" id="scroll-one-tick" class="option-button" value="Scroll One Tick" /> </div> </div> <div class="option-block"> <div class="option-row selection-box"> <label for="scroll-unit">Scroll Unit</label> <select id="scroll-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" selected>days</option> <option value="8">hours</option> <option value="9">minutes</option> </select> </div> <div class="option-row input-box"> <label for="scroll-count">Scroll Count</label> <input type="text" id="scroll-count" value="1" /> <div class="option-info valid">* valid value: integer, could be negative</div> </div> <div class="option-row"> <input type="button" id="scroll-by-unit" class="option-button" value="Scroll By Unit" /> </div> </div> <div class="option-block"> <div class="option-row input-box"> <label for="scroll-date">Scroll Date</label> <input type="text" id="scroll-date" /> <div class="option-info valid">* valid value: format 2022/1/3 or 2022/1/3 12:00:00</div> </div> <div class="option-row input-box"> <label for="scroll-percent">Percent Of Viewport</label> <input type="text" id="scroll-percent" value="0.5" /> <div class="option-info valid">* valid value: number between 0~1</div> </div> <div class="option-row"> <input type="button" id="scroll-to" class="option-button" value="Scroll To Date" /> </div> </div> </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); }