¶ I. Row-Related Settings and Operations
¶ 1.1 Row Height
The unit of height is points
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* Step 2: Set cell values
*/
activeSheet.setRowHeight(1,30);
activeSheet.setRowHeight(2,30);
activeSheet.setRowHeight(3,30);
activeSheet.setRowHeight(4,30);
activeSheet.setRowHeight(5,30);
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
You can use the following two methods to convert between points and pixel values:
// Convert pixel value to point value
const PxToBound = (px: number, ppi: number): number => {
return Math.ceil(px / ppi * 72);
};
// Calculate pixel value based on point value and PPI
const CacalPxByBound = (bound: number, ppi: number): number => {
return Math.ceil((bound / 72) * ppi);
};
The PPI (pixels per inch) is obtained from the browser, with a default value of 96.
¶ 1.2 Inserting Rows
Assuming the data before insertion is as shown in the figure below:
Insert 4 rows after the 2nd row, with the following code:
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active 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');
/**
* Step 2: Insert rows
*/
activeSheet.InsertRowStart(2,4);
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
The result is as shown in the figure below:
The inserted rows will copy the format of the starting row.
¶ 1.3 Deleting Rows
Assuming the data before deletion is as shown in the figure below:
Delete 4 rows starting from the 3rd row, with the following code:
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active 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');
/**
* Step 2: Delete 4 rows starting from the 3rd row
*/
activeSheet.DelRowStart(3,4);
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
The result is as shown in the figure below:
¶ II. Column-Related Settings and Operations
The unit of height is PX pixels
¶ 2.1 Column Width
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active sheet
*/
let activeSheet = wsheet.ActiveSheet();
/**
* Step 2: Set cell values
*/
activeSheet.setColWidth(1,160)
activeSheet.setColWidth(2,160)
activeSheet.setColWidth(3,160)
activeSheet.setColWidth(4,160)
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
¶ 2.2 Inserting Columns
Assuming the data before inserting columns is as shown in the figure below:
Insert 3 columns after the 2nd column, with the following code:
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active 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);
/**
* Step 2: Insert columns
*/
activeSheet.InsertColStart(2,3);
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
The result is as shown in the figure below:
The inserted columns will copy the format of the starting column.
¶ 2.3 Delete Columns
Assume the data before deletion is as shown below:
Delete 3 columns starting from column 2, with the following code:
let yourElement = document.getElementById("yourElement");
let wsheet = new websheet('HTML', yourElement);
/**
* Step 1: Get the active sheet
*/
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);
/**
* Step 2: Delete columns
*/
activeSheet.DelColStart(2,3);
/**
* Step 3: Redraw the table
*/
wsheet.BuildSheet();
wsheet.Draw();
The result is as shown below:
