websheet之 编辑器

一、默认编辑器

该单元格编辑器是控件自带的编辑器，用户不需要指定。

二、下拉选择

该单元格编辑器是控件自带的编辑器的一种。该控件需要你指定下拉的数据源。在下面的例子中，我们给C3和C6单元格指定了币种的下拉选择编辑器。参数见：六、 参数说明。

   /**
    * 币种下拉
   */
  let wsheet = new websheet('HTML', yourElement);
    /**
   * 第一步 获取激活sheet
   */
    let activeSheet = wsheet.ActiveSheet();
    /**
     * 第二步 币种下拉控件，并注册
     */
    const cny = document.createElement('option');
    cny.value = 'CNY';
    cny.textContent = 'CNY-人民币';


    const usd = document.createElement('option');
    usd.value = 'USD';
    usd.textContent = 'USD-美元';


    const eur = document.createElement('option');
    eur.value = 'EUR';
    eur.textContent = 'EUR-欧元';


    let optionsBZ= [cny, usd, eur];

    activeSheet.setCellEditor('C3', websheet.Model.SelectCell, {data:optionsBZ,bextend:true});

    activeSheet.setCellEditor('C6', websheet.Model.SelectCell, {data:optionsBZ,bextend:true});
    /**
      * 第三步   重新绘制表格
      */
    activeSheet.setColWidth(1, 160);
    activeSheet.setColWidth(2, 160);
    activeSheet.setColWidth(3, 160);
    activeSheet.setColWidth(4, 160);
    activeSheet.setColWidth(5, 160);
    activeSheet.WorkFormula(); //重建公式
    activeSheet.cacl();//公式计算

    wsheet.BuildSheet();
    wsheet.Draw();

结果如下图：

在线代码

{.is-success}

三、日期时间编辑器

websheet控件使用小巧flatpickr控件来实现日期时间编辑器，版本是：4.6.13。

3.1 默认日期编辑器

    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.2 月份

    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.3 日期多选

    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.4 日期时间

    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.5 时间

   activeSheet.SetCellValue('B3','2025-02-28');
   activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

其设置可以参考flatpickr的官方网站。

效果图如下：

在线代码

{.is-success}

四、进度条

该进度条展示控件是自带的编辑器的一种， 该控件根据单元格的绘制完成比例。完整代码如下:

    /**
  * 第一步 获取激活sheet
  */
  let activeSheet = wsheet.ActiveSheet();
  activeSheet.SetCellValue('A3','Progress控件'); 
  
 /**
  * 第二步 一个下进度条控件，并注册
  */
  let redoptions={isVertical:false,
     background:  '#eee',
        foreground:  'red',
       textColor:  '#333',
  };
  activeSheet.SetCellValue('B3',0.01);//设置完成度

  activeSheet.setCellEditor('B3', websheet.Model.ProgressCell,redoptions);

  let yeoptions={isVertical:false,
     background:  '#eee',
        foreground:  'yellow',
       textColor:  '#333',
  };
  activeSheet.SetCellValue('B4',0.50);//设置完成度 

  activeSheet.setCellEditor('B4', websheet.Model.ProgressCell, yeoptions);

  activeSheet.SetCellValue('B5',1);//设置完成度 
 activeSheet.setCellEditor('B5', websheet.Model.ProgressCell);


 activeSheet.SetCellValue('B6','Aab');//设置完成度
  activeSheet.setCellEditor('B6', websheet.Model.ProgressCell);

 /**
   * 第三步   重新绘制表格
   */
 activeSheet.setColWidth(1, 160);
 activeSheet.setColWidth(2, 260);
 activeSheet.setColWidth(3, 160);
 activeSheet.setColWidth(4, 160);
 activeSheet.setColWidth(5, 160);
 activeSheet.WorkFormula(); //重建公式
 activeSheet.cacl();//公式计算

 wsheet.BuildSheet();
 wsheet.Draw();
 

在线代码

{.is-success}

上下文参数如下:

参数	说明	是否必须
background	背景颜色，例如'#eee'	否
foreground	前景颜色，'red'	否
textColor	文本颜色	否

五、自动选择代码

该编辑器可以根据输入自动筛选匹配的数据，可以通过鼠标或上下按键选择展示的内容，代码如下:

    /**
  * 第一步 获取激活sheet
  */
  let activeSheet = wsheet.ActiveSheet();

  
 /**
  * 第二步 定义数据源，设置单元格编辑器为websheet.Model.CodeSelector
  */
 const codeData = [
           { code: "B01", description: "苹果" },
           { code: "B02", description: "香蕉" },
           { code: "B03", description: "橙子" },
           { code: "B04", description: "西瓜" },
           { code: "B05", description: "葡萄" },
           { code: "A01", description: "电视机" },
           { code: "A02", description: "冰箱" },
           { code: "A03", description: "洗衣机" },
           { code: "C01", description: "笔记本电脑" },
           { code: "C02", description: "手机" },
           { code: "C03", description: "笔记本电脑1" },
           { code: "C04", description: "手机1" }
       ];

 activeSheet.setCellEditor('C1:C10', websheet.Model.CodeSelector, {showdata:codeData,placeholder:'选择代码',bextend:true});
 activeSheet.setColWidth(3, 250)

 /**
   * 第三步   重新绘制表格
   */

 wsheet.BuildSheet();
 wsheet.Draw();
 

在线代码

{.is-success}

上下文参数如下:

参数	说明	是否必须
showdata	需要展示的数组，对象格式"{code: "B01", description: "苹果" }"	是
placeholder	提示词，默认'代码选择'	否
bextend	名称是否填充 ,默认'false'	否

六、 参数说明

setCellEditor的参数说明如下：

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

七、待开发的控件

1. Radio 单选框
2. Checkbox 多选框
3. Switch 开关
4. Slider 滑块

八、自定义编辑器

如果你有自己编辑控件和展示内容的需求，可以参考自定义展示控件。