成人免费黄色a,色网在线,网站91免费入口

電子表格控件SpreadJS使用教程：如何通過Style類設置表格樣式

轉帖|使用教程|編輯：鮑佳佳|2020-08-18 09:52:22.777|閱讀 407 次

概述：您可以創建樣式并將樣式分配給單元格、行、列或表。還可以為 Spread.Sheets 控件設置主題。您可以設置當前主題，Excel的一個主題，bootstrap主題，或根據主題規則創建自定義的jQuery主題。本文就如何使用Style類自定義表格樣式進行詳細說明。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。更多詳情信息文章教程點擊這里>>

點擊下載SpreadJS最新試用版

設置樣式

你可以使用 Style 類創建對象來定制表格的樣式，你也可以通過 Style 來定義自己的名稱樣式。

你可以在 Style 中設置邊框，顏色和字體等屬性；Style 可以應用到單元格，行，列或者表格中。
Style 中的屬性是有優先級的。優先級從高到低排序為：

給單元格設置的 Style；
給行設置的 Style；
給列設置的 Style；
表格的默認樣式。

表格有一個默認的樣式，其優先級最低。
使用setStyle方法來設置樣式. 在第一個參數和第二個參數中傳入 -1 可以給整行或者整列設置 Style。
你可以使用 addNamedStyle 方法來創建自己的名稱樣式。你可以修改或刪除名稱樣式。使用 setStyleName 方法來給單元格設置名稱樣式，在第一個參數和第二個參數中傳入 -1 可以給整行或者整列設置名稱樣式。
名稱樣式可以提高樣式的重用性。在 JSON 數據存儲和Excel 導入導出中，使用名稱樣式可以減少數據傳輸，提高效率。

如下圖所示，B2 單元格的樣式被更改了。

示例代碼

以下代碼使用 setStyle 方法來給單元格設置樣式。

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
style.borderLeft = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
//row
//activeSheet.setStyle(1,-1,style,GC.Spread.Sheets.SheetArea.viewport);
//column
//activeSheet.setStyle(-1,2,style,GC.Spread.Sheets.SheetArea.viewport);

示例代碼

以下代碼使用了 setDefaultStyle 方法。

//setDefaultStyle
activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport);
//Set the default styles.
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.backColor = "LemonChiffon";
defaultStyle.foreColor = "Red";
defaultStyle.formatter = "0.00";
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
defaultStyle.borderLeft = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderTop = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderRight = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderBottom = new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
var rowCount = activeSheet.getRowCount();
var colCount = activeSheet.getColumnCount();
for(var i = 0; i < rowCount; i++){
    for(var j = 0; j < colCount; j++){
        activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport);
    }
}

示例代碼

以下代碼給單元格，行和列分別設置了樣式。

JavaScript：

activeSheet.setRowCount(15);
activeSheet.setColumnCount(14);
var ns = GC.Spread.Sheets;
var style = activeSheet.getDefaultStyle();
style.backColor = "lightgray";
style.foreColor = "purple";
style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);
var cell = activeSheet.getRange(3, 3, 6, 6);
cell.value(10);
cell.formatter("0.0%");
cell.backColor("lightgreen");
cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));
var row = activeSheet.getRange(2, -1, 8, -1);
row.backColor("lightblue");
row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));
row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));
var col = activeSheet.getRange(-1, 2, -1, 8);
col.backColor("pink");
col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));
col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));

示例代碼

以下代碼給多個單元格設置了樣式，并且點擊按鈕可以移除樣式。

JavaScript

<input type="button" id="button1" value="button1"/>
var namedStyle = new GC.Spread.Sheets.Style();
namedStyle.name = "style1";
namedStyle.backColor = "green";
activeSheet.addNamedStyle(namedStyle);
activeSheet.setStyleName(1, 1, "style1"); // cell(1,1)'s backColor is green.
activeSheet.setStyleName(2, 1, "style1");
  
var style = activeSheet.getNamedStyle("style1");
style.foreColor = "red";    // the namedStyle's foreColor is red.
activeSheet.repaint(); // the foreColor of the cell(1,1) and cell(2,1) is red.
activeSheet.getCell(1,1).value("test");
$("#button1").click(function () {
activeSheet.removeNamedStyle("style1");
    });

現在電子表格控件SpreadJS限時優惠！低至3490；企業版最高立減6000元。點擊了解更多優惠！