SpreadJS 表格控件相关基础知识

官方链接：https://www.grapecity.com.cn/developer/spreadjs

总结：https://www.amoqi.cn/blog/detail/44

帮助手册：http://help.grapecity.com.cn/pages/viewpage.action?pageId=5971410

http://helpcentral.componentone.com/nethelp/spreadhclient/symbols/$.wijmo.wijspread.html

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);
}

SpreadJS 表格控件相关基础知识

猜你喜欢