SpreadJS 表格控制元件相關基礎知識
阿新 • • 發佈：2019-01-03
1. Spread.Sheets 內建支援英文 (預設)，中文以及日文(需要相應的資原始檔)本地化。
新增相應的資原始檔連結到頁面頭部來實現本地化；
本地化 meta 標籤，設定本地化 meta 標籤；
<!doctype html> <meta name="spreadjs culture" content="zh-cn" /> <link rel="stylesheet" type="text/css" href="css/spread/gc.spread.sheets.excel2013white.11.1.0.css"> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/spread/gc.spread.sheets.all.11.1.0.min.js" type="text/javascript"></script> <script src="js/spread/resources/zh/gc.spread.sheets.resources.zh.11.1.0.min.js" type="text/javascript"></script> <script src="js/spread/resources/ja/gc.spread.sheets.resources.ja.11.1.0.min.js" type="text/javascript"></script> GC.Spread.Common.CultureManager.culture() en-us / zh-cn / ja-jp
2.初始化Spread.Sheets
<div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div> window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // 通過函式 // var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')) // 獲取 spread物件例項 };
3.繫結資料 ，設定樣式
var sheet = spread.getActiveSheet(); var sheet = spread.getSheet(0); //該方法獲取想要操作的工作表 spread.removeSheet(0); // 刪除單元格 var sheetName = sheet.name(); // 獲取sheet名稱 sheet.name('sheet1'); // 設定sheet名稱 var person = { name: 'Wang feng', address: {postcode: '710075' } }; //資料 var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person); //建立資料來源 sheet.setBindingPath(2, 2, 'name');//該方法指定區域的單元格設定要繫結的欄位 sheet.setDataSource(source);//該方法設定資料來源 sheet.getCell(2,1).text("Name");//在對應單元格設定文字值 sheet.addSpan(1, 1, 1, 2); //addSpan方法擴充套件單元格調整列寬 sheet.setColumnWidth(1, 120);//設定單元格列寬（idx,width）idx第幾列 sheet.getRange(1, 1, 1, 2).backColor("rgb(20, 140, 1218)") //設定單元格背景色 sheet.getRange(1, 1, 1, 2).text("Person Card"); //獲取單元格範圍並設定文字值 sheet.getRange(1, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {all: true }); // 邊框實線 sheet.getRange(2, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {inside: true}); // 邊框虛線 sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center); // 文字居中 sheet.getRowCount(); // 獲取excel行數 sheet.getColumnCount(); // 獲取excel列數 spread.setSheetCount(1); //設定獲取表單數 spread.addSheet(3); //新增sheet spread.suspendPaint(); // 暫停繪製 spread.resumePaint(); // 重新繪製
4.搜尋關鍵字方法
let sheetCount = spread.getSheetCount(); // 獲取表單個數
// 獲取所需操作的表單
let sheet;
if (sheetCount > 1) {
sheet = spread.getSheet(1);
}
// 查詢'綜合得分'在excel表格單元格位置
let sheetSearch = GC.Spread.Sheets.Search;
let condition = new sheetSearch.SearchCondition();
condition.searchTarget = sheetSearch.SearchFoundFlags.cellText;
condition.searchString = '綜合得分';
condition.searchOrder = sheetSearch.SearchOrder.zOrder;
let result = sheet.search(condition);
let str = '[searchFoundFlag：' + result.searchFoundFlag
+ '，foundSheetIndex：' + result.foundSheetIndex
+ '，foundRowIndex：' + result.foundRowIndex
+ '，foundColumnIndex：' + result.foundColumnIndex
+ '，foundString：' + result.foundSheetIndex
+ ']';
console.log('str', str);
// 預設'綜合得分'位置
let keyRow = -1;
let keyColumn = -1;
if (result.foundRowIndex < 0 && result.foundColumnIndex < 0) {
alert('此模版不符合規則');
}
else {
keyRow = result.foundRowIndex;
keyColumn = result.foundColumnIndex;
// 行列idx從0開始，在關鍵字上方插入1行
sheet.addRows(keyRow, 1);
}