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

​

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

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

参数	说明	是否必须
margin	边距	否
color.dark	前景颜色	否
color.light	背景色	否
errorCorrectionLevel	错误修正级别：L, M, Q, H	否

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

去除全选警告

区域选择后列行的颜色设置

自动列宽及其撤销重做功能

选择区域移动变化太快

最上面行定位不准

加载20M文件，展示卡顿

​