任务条样式规则

您可以更改特定任务条样式规则的样式,以便所有符合规则的任务都将应用该样式。

内置样式规则 每种任务条类型(GC.Spread.Sheets.GanttSheet.TaskbarStyleRuleName)都有几个内置样式规则: durationOnly durationOnlyMilestone finishOnly finishOnlyMilestone manualMilestone manualProgress manualSummary manualTask milestone progress projectSummary startOnly startOnlyMilestone summary task 您可以获取样式规则并更改其样式属性,如下所示: 可配置样式属性 startShape: GC.Spread.Sheets.GanttSheet.TaskbarEndShape startType: GC.Spread.Sheets.GanttSheet.TaskbarEndType startColor: string endShape: GC.Spread.Sheets.GanttSheet.TaskbarEndShape endType: GC.Spread.Sheets.GanttSheet.TaskbarEndType endColor: string middleShape: GC.Spread.Sheets.GanttSheet.TaskbarMiddleShape middlePattern: GC.Spread.Sheets.GanttSheet.TaskbarFillPattern middleColor: string leftText: string rightText: string topText: string bottomText: string insideText: string 像leftText这样的文本属性支持数据字段名称和列公式: 自定义样式规则 您可以基于基本样式规则类(GC.Spread.Sheets.GanttSheet.TaskbarStyleRule)创建自定义样式规则: 然后将您的自定义样式规则添加到任务条样式规则集合(GC.Spread.Sheets.GanttSheet.TaskbarStyleRules)中: 您可以更新现有的自定义样式规则:
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var myTable; var ganttSheet; 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: "mode", caption: "Mode", width: 65 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120, visible: false } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }).then(function() { let taskRule = ganttSheet.project.taskStyleRules.getRule("task"); let taskStyle = taskRule.style.taskbarStyle; taskStyle.middleColor = "#abd08f"; taskRule.style.taskbarStyle = taskStyle; let summaryRule = ganttSheet.project.taskStyleRules.getRule("summary"); let summaryStyle = summaryRule.style.taskbarStyle; summaryStyle.middleColor = "#00b050"; summaryStyle.startShape = "leftBracket"; summaryStyle.startColor = "#578335"; summaryStyle.endShape = "rightBracket"; summaryStyle.endColor = "#578335"; summaryRule.style.taskbarStyle = summaryStyle; }); initSidePanel(ganttSheet); } function initSidePanel(ganttSheet) { var setStyleItem = document.getElementById("set-style"); var styleRuleNameItem = document.getElementById("rule-name"); var startShapeItem = document.getElementById("start-shape"); var startTypeItem = document.getElementById("start-type"); var startColorItem = document.getElementById("start-color"); var middleShapeItem = document.getElementById("middle-shape"); var middlePatternItem = document.getElementById("middle-pattern"); var middleColorItem = document.getElementById("middle-color"); var endShapeItem = document.getElementById("end-shape"); var endTypeItem = document.getElementById("end-type"); var endColorItem = document.getElementById("end-color"); var leftTextItem = document.getElementById("left-text"); var rightTextItem = document.getElementById("right-text"); var topTextItem = document.getElementById("top-text"); var bottomTextItem = document.getElementById("bottom-text"); var insideTextItem = document.getElementById("inside-text"); var styleRuleName = styleRuleNameItem.value; var targetStyle = ganttSheet.project.taskStyleRules.getRule(styleRuleName).style.taskbarStyle; syncConfigFromStyle(targetStyle); styleRuleNameItem.addEventListener("change", function() { var styleRuleName = styleRuleNameItem.value; var targetStyle = ganttSheet.project.taskStyleRules.getRule(styleRuleName).style.taskbarStyle; syncConfigFromStyle(targetStyle); }); setStyleItem.addEventListener("click", function() { ganttSheet.suspendPaint(); var styleRuleName = styleRuleNameItem.value; var targetStyleRule = ganttSheet.project.taskStyleRules.getRule(styleRuleName); let ruleType = ["task", "milestone", "summary", "projectSummary", "manualTask", "manualMilestone", "durationOnly", "manualSummary", "startOnly", "finishOnly", "durationOnlyMilestone", "startOnlyMilestone", "finishOnlyMilestone", "progress", "manualProgress"]; let style = targetStyleRule.style; style.taskbarStyle = getStyleFromConfig(style.taskbarStyle); ganttSheet.project.taskStyleRules.setItemAt(ruleType.indexOf(styleRuleName), targetStyleRule); ganttSheet.resumePaint(); }); function syncConfigFromStyle(targetStyle) { startShapeItem.value = targetStyle.startShape; startTypeItem.value = targetStyle.startType; startColorItem.value = targetStyle.startColor ? targetStyle.startColor : ""; middleShapeItem.value = targetStyle.middleShape; middlePatternItem.value = targetStyle.middlePattern; middleColorItem.value = targetStyle.middleColor ? targetStyle.middleColor : ""; endShapeItem.value = targetStyle.endShape; endTypeItem.value = targetStyle.endType; endColorItem.value = targetStyle.endColor ? targetStyle.endColor : ""; leftTextItem.value = targetStyle.leftText || ""; rightTextItem.value = targetStyle.rightText || ""; topTextItem.value = targetStyle.topText || ""; bottomTextItem.value = targetStyle.bottomText || ""; insideTextItem.value = targetStyle.insideText || ""; } function getStyleFromConfig(targetStyle) { targetStyle.startShape = startShapeItem.value; targetStyle.startType = startTypeItem.value; targetStyle.startColor = startColorItem.value; targetStyle.middleShape = middleShapeItem.value; targetStyle.middlePattern = middlePatternItem.value; targetStyle.middleColor = middleColorItem.value; targetStyle.endShape = endShapeItem.value; targetStyle.endType = endTypeItem.value; targetStyle.endColor = endColorItem.value; targetStyle.leftText = leftTextItem.value; targetStyle.rightText = rightTextItem.value; targetStyle.topText = topTextItem.value; targetStyle.bottomText = bottomTextItem.value; targetStyle.insideText = insideTextItem.value; return targetStyle; } } 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" 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 taskbar style rules. </div> <div class="option-block"> <div class="option-row selection-box"> <label for="rule-name">Rule Name</label> <select id="rule-name"> <option value="durationOnly">durationOnly</option> <option value="durationOnlyMilestone">durationOnlyMilestone</option> <option value="finishOnly">finishOnly</option> <option value="finishOnlyMilestone">finishOnlyMilestone</option> <option value="manualMilestone">manualMilestone</option> <option value="manualProgress">manualProgress</option> <option value="manualSummary">manualSummary</option> <option value="manualTask">manualTask</option> <option value="milestone">milestone</option> <option value="progress">progress</option> <option value="projectSummary">projectSummary</option> <option value="startOnly">startOnly</option> <option value="startOnlyMilestone">startOnlyMilestone</option> <option value="summary">summary</option> <option value="task" selected>task</option> </select> </div> <div class="option-row"> <input type="button" id="set-style" class="option-button" value="Set Taskbar Styles"> </div> </div> <div class="option-block"> <div class="option-row option-title"> Config the taskbar style. </div> <div class="option-block"> <div class="option-row option-title"> Start </div> <div class="option-row selection-box"> <label for="start-shape">Shape</label> <select id="start-shape"> <option value="" selected></option> <option value="arrowDown">arrowDown</option> <option value="arrowUp">arrowUp</option> <option value="caretDownTop">caretDownTop</option> <option value="caretUpBottom">caretUpBottom</option> <option value="circle">circle</option> <option value="circleArrowDown">circleArrowDown</option> <option value="circleArrowUp">circleArrowUp</option> <option value="circleDiamond">circleDiamond</option> <option value="circleTriangleDown">circleTriangleDown</option> <option value="circleTriangleUp">circleTriangleUp</option> <option value="diamond">diamond</option> <option value="houseDown">houseDown</option> <option value="houseUp">houseUp</option> <option value="leftBracket">leftBracket</option> <option value="leftFade">leftFade</option> <option value="lineShape">lineShape</option> <option value="rightBracket">rightBracket</option> <option value="rightFade">rightFade</option> <option value="square">square</option> <option value="star">star</option> <option value="triangleDown">triangleDown</option> <option value="triangleLeft">triangleLeft</option> <option value="triangleRight">triangleRight</option> <option value="triangleUp">triangleUp</option> </select> </div> <div class="option-row selection-box"> <label for="start-type">Type</label> <select id="start-type"> <option value="" selected></option> <option value="solid">solid</option> <option value="dashed">dashed</option> <option value="framed">framed</option> </select> </div> <div class="option-row input-box"> <label for="start-color">Color</label> <input type="text" id="start-color" /> <div class="option-info valid">* valid value: color string</div> </div> </div> <div class="option-block"> <div class="option-row option-title"> Middle </div> <div class="option-row selection-box"> <label for="middle-shape">Shape</label> <select id="middle-shape"> <option value="" selected></option> <option value="lineBottom">lineBottom</option> <option value="lineMiddle">lineMiddle</option> <option value="lineTop">lineTop</option> <option value="rectangleBar">rectangleBar</option> <option value="rectangleBottom">rectangleBottom</option> <option value="rectangleMiddle">rectangleMiddle</option> <option value="rectangleTop">rectangleTop</option> </select> </div> <div class="option-row selection-box"> <label for="middle-pattern">Fill Pattern</label> <select id="middle-pattern"> <option value="" selected></option> <option value="darkFill">darkFill</option> <option value="dashedBorder">dashedBorder</option> <option value="diagonalCross">diagonalCross</option> <option value="diagonalLeft">diagonalLeft</option> <option value="diagonalRight">diagonalRight</option> <option value="hollow">hollow</option> <option value="lightFill">lightFill</option> <option value="lineCross">lineCross</option> <option value="lineHorizontal">lineHorizontal</option> <option value="lineVertical">lineVertical</option> <option value="mediumFill">mediumFill</option> <option value="solidFill">solidFill</option> </select> </div> <div class="option-row input-box"> <label for="middle-color">Color</label> <input type="text" id="middle-color" /> <div class="option-info valid">* valid value: color string</div> </div> </div> <div class="option-block"> <div class="option-row option-title"> End </div> <div class="option-row selection-box"> <label for="end-shape">Shape</label> <select id="end-shape"> <option value="" selected></option> <option value="arrowDown">arrowDown</option> <option value="arrowUp">arrowUp</option> <option value="caretDownTop">caretDownTop</option> <option value="caretUpBottom">caretUpBottom</option> <option value="circle">circle</option> <option value="circleArrowDown">circleArrowDown</option> <option value="circleArrowUp">circleArrowUp</option> <option value="circleDiamond">circleDiamond</option> <option value="circleTriangleDown">circleTriangleDown</option> <option value="circleTriangleUp">circleTriangleUp</option> <option value="diamond">diamond</option> <option value="houseDown">houseDown</option> <option value="houseUp">houseUp</option> <option value="leftBracket">leftBracket</option> <option value="leftFade">leftFade</option> <option value="lineShape">lineShape</option> <option value="rightBracket">rightBracket</option> <option value="rightFade">rightFade</option> <option value="square">square</option> <option value="star">star</option> <option value="triangleDown">triangleDown</option> <option value="triangleLeft">triangleLeft</option> <option value="triangleRight">triangleRight</option> <option value="triangleUp">triangleUp</option> </select> </div> <div class="option-row selection-box"> <label for="end-type">Type</label> <select id="end-type"> <option value="" selected></option> <option value="solid">solid</option> <option value="dashed">dashed</option> <option value="framed">framed</option> </select> </div> <div class="option-row input-box"> <label for="end-color">Color</label> <input type="text" id="end-color" /> <div class="option-info valid">* valid value: color string</div> </div> </div> </div> <div class="option-block"> <div class="option-row option-title"> Config the taskbar text. </div> <div class="option-row input-box"> <label for="left-text">Left Text</label> <input type="text" id="left-text" /> <div class="option-info valid">* valid value: field string or column formula</div> </div> <div class="option-row input-box"> <label for="right-text">Right Text</label> <input type="text" id="right-text" /> <div class="option-info valid">* valid value: field string or column formula</div> </div> <div class="option-row input-box"> <label for="top-text">Top Text</label> <input type="text" id="top-text" /> <div class="option-info valid">* valid value: field string or column formula</div> </div> <div class="option-row input-box"> <label for="bottom-text">Bottom Text</label> <input type="text" id="bottom-text" /> <div class="option-info valid">* valid value: field string or column formula</div> </div> <div class="option-row input-box"> <label for="inside-text">Inside Text</label> <input type="text" id="inside-text" /> <div class="option-info valid">* valid value: field string or column formula</div> </div> </div> </div> </div> </html>
.options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; box-shadow: inset 0px 0 4px 0 rgba(0,0,0,0.4); } .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); }