当前位置：首页 > news >正文

本地免费使用网页表格控件websheet

news 2026/6/12 17:57:07

websheet本地localhost免费使用

代码样例地址： http://www.websheet.cn/xlsx/

1.0.3 版本主要更新内容：

设置行隐藏

下面代码隐藏第一行和第五行，行代码如下：

   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即可。

设置列隐藏

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

条形码功能

该软件使用了JsBarcode来绘制条形码，使用方法如下:

    /*** 第一步 获取激活sheet*/let activeSheet = wsheet.ActiveSheet();activeSheet.setColWidth(1, 260);activeSheet.setRowHeight(4, 40);activeSheet.setColWidth(2, 260);activeSheet.SetCellValue('A4', 'CODE128 is the default mode :hello websheet!');activeSheet.SetCellValue('B4', 'hello websheet!');activeSheet.setCellEditor('B4', websheet.Model.BarCodeCell);let EAN13options: Object ={format: "EAN13",lineColor: "#0aa",displayValue: true};activeSheet.setRowHeight(5, 80);activeSheet.SetCellValue('A5', 'EAN13:123456789012');activeSheet.SetCellValue('B5', '123456789012');activeSheet.setCellEditor('B5', websheet.Model.BarCodeCell, EAN13options);let CODE39options: Object ={format: "CODE39",lineColor: "#faa",displayValue: true};activeSheet.setRowHeight(6, 80);activeSheet.SetCellValue('A6', 'CODE39:123456789012');activeSheet.SetCellValue('B6', '123456789012');activeSheet.setCellEditor('B6', websheet.Model.BarCodeCell, CODE39options);/*** 第三步   重新绘制表格*/wsheet.BuildSheet();wsheet.Draw();

这里的绘制参数options，主要使用参数参考如下：

参数	说明	是否必须
format	展示条形码格式，常见的有CODE128 默认，EAN13，CODE39等	否
lineColor	线条颜色	否
displayValue	是否展示文本	否

你也可以参考JsBarcode官方网站。

上下文参数说明

setCellEditor的参数说明如下：

参数	说明	是否必须
range	单元格地址，例如‘A1’	是
widget	视图控件，例如websheet.Model.DatePickCell控件	是
contex	上下文，例如展示币种控件需要币种的数据源	否

二维码功能

该软件使用了QRCode来绘制二维码，使用方法如下:

    /*** 第一步 获取激活sheet*/let activeSheet = wsheet.ActiveSheet();activeSheet.setColWidth(1, 160);activeSheet.setRowHeight(4, 80);activeSheet.setColWidth(2, 160);activeSheet.SetCellValue('A4', 'hello websheet!');activeSheet.SetCellValue('B4', 'hello websheet!');activeSheet.setCellEditor('B4', websheet.Model.QRCodeCell);let options: Object ={margin: 2,              // 边距（默认 2）color: {dark: '#ff0000',     // 前景色 红色light: '#ffffff'     // 背景色},errorCorrectionLevel: 'H'  // 错误修正级别：L, M, Q, H};activeSheet.setRowHeight(5, 80);activeSheet.SetCellValue('A5', 'hello websheet!');activeSheet.SetCellValue('B5', 'red hello websheet!');activeSheet.setCellEditor('B5', websheet.Model.QRCodeCell, options);/*** 第三步   重新绘制表格*/wsheet.BuildSheet();wsheet.Draw();