¶ 一、行相关设置和操作
¶ 1.1 行高度
高度单位为磅
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* 第二步 设置单元格值
*/
activeSheet.setRowHeight(1,30);
activeSheet.setRowHeight(2,30);
activeSheet.setRowHeight(3,30);
activeSheet.setRowHeight(4,30);
activeSheet.setRowHeight(5,30);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
可以通过下面的2个方法在磅数和像素值间转换：
// 像素值转换为磅值
const PxToBound = (px: number, ppi: number): number => {
return Math.ceil(px / ppi * 72);
};
// 根据磅值和 PPI 计算像素值
const CacalPxByBound = (bound: number, ppi: number): number => {
return Math.ceil((bound / 72) * ppi);
};
其中ppi根据浏览器获取，一般默认值96。
¶ 1.2 插入行
假设插入前有如下图数据：
在第2行插入4行，代码如下：
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的activeSheet
*/
let activeSheet = wsheet.ActiveSheet();
let b1Border = new websheet.Model.Border();
let redthinBorderPr =new websheet.Model.BorderPr();
redthinBorderPr.borderStyle='thin';
redthinBorderPr.color= new websheet.Model.Color('red');
b1Border.SetAllBorder(redthinBorderPr);
activeSheet.SetCellBorder('B2',b1Border);
activeSheet.SetCellBorder('B3',b1Border);
activeSheet.SetCellValue('B2','1');
activeSheet.SetCellValue('B3','9');
/**
* 第二步 插入行
*/
activeSheet.InsertRowStart(2,4);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
结果如下图数据：
新增行会复制开始行的格式。
¶ 1.3 删除行
假设删除前有如下图数据：
删除第3行开始的4行，代码如下：
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的activeSheet
*/
let activeSheet = wsheet.ActiveSheet();
activeSheet.SetCellValue('B2','1');
activeSheet.SetCellValue('B3','2');
activeSheet.SetCellValue('B4','3');
activeSheet.SetCellValue('B5','4');
activeSheet.SetCellValue('B6','5');
activeSheet.SetCellValue('B7','6');
activeSheet.SetCellValue('B8','7');
activeSheet.SetCellValue('B9','8');
activeSheet.SetCellValue('B10','9');
/**
* 第二步
*/
activeSheet.DelRowStart(3,4);删除第3行开始的4行
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
结果如下图数据：
¶ 1.4 隐藏行
下面代码隐藏第一行和第五行，行代码如下：
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的activeSheet
*/
let activeSheet = wsheet.ActiveSheet();
activeSheet.SetCellValue('B2','1');
activeSheet.SetCellValue('B3','2');
activeSheet.SetCellValue('B4','3');
activeSheet.SetCellValue('B5','4');
activeSheet.SetCellValue('B6','5');
activeSheet.SetCellValue('B7','6');
activeSheet.SetCellValue('B8','7');
activeSheet.SetCellValue('B9','8');
activeSheet.SetCellValue('B10','9');
/**
* 第二步
*/
activeSheet.setRowHiden(1,true);
activeSheet.setRowHiden(5,true);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
取消隐藏setRowHiden的第二个参数为false即可。
¶ 二、列相关设置和操作
高度单位为PX像素
¶ 2.1 列宽度
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* 第二步 设置单元格值
*/
activeSheet.setColWidth(1,160)
activeSheet.setColWidth(2,160)
activeSheet.setColWidth(3,160)
activeSheet.setColWidth(4,160)
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
¶ 2.2 插入列
假设插入列前有如下图数据：
在第2列后插入3列，代码如下：
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的activeSheet
*/
let activeSheet = wsheet.ActiveSheet();
let b1Border = new websheet.Model.Border();
let redthinBorderPr =new websheet.Model.BorderPr();
redthinBorderPr.borderStyle='thin';
redthinBorderPr.color= new websheet.Model.Color('red');
b1Border.SetAllBorder(redthinBorderPr);
activeSheet.SetCellBorder('B2',b1Border);
activeSheet.SetCellBorder('B3',b1Border);
let i=1;
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
/**
* 第二步 插入列
*/
activeSheet.InsertColStart(2,3);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
结果如下图数据：
新增列会复制开始列的格式。
¶ 2.3 删除列
假设删除前有如下图数据：
从第2列删除3列，代码如下：
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的activeSheet
*/
let activeSheet = wsheet.ActiveSheet();
let b1Border = new websheet.Model.Border();
let redthinBorderPr =new websheet.Model.BorderPr();
redthinBorderPr.borderStyle='thin';
redthinBorderPr.color= new websheet.Model.Color('red');
b1Border.SetAllBorder(redthinBorderPr);
activeSheet.SetCellBorder('B2',b1Border);
activeSheet.SetCellBorder('B3',b1Border);
let i=1;
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
activeSheet.SetCellValue(2,i++,i);
/**
* 第二步 删除列
*/
activeSheet.DelColStart(2,3);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();
结果如下图数据：
¶ 2.4 列隐藏
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* 第一步 获取激活的sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* 第二步 设置单元格值
*/
activeSheet.setColWidth(1,160)
activeSheet.setColWidth(2,160)
activeSheet.setColWidth(3,160)
activeSheet.setColWidth(4,160)
activeSheet.setColHiden(1,true);
activeSheet.setColHiden(5,true);
/**
* 第三步 重新绘制表格
*/
wsheet.BuildSheet();
wsheet.Draw();