websheet之 编辑器

一、默认编辑器

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

二、下拉选择

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

js 复制代码
   /**
    * 币种下拉
   */
  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 默认日期编辑器

js 复制代码
    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.2 月份

js 复制代码
    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.3 日期多选

js 复制代码
    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.4 日期时间

js 复制代码
    activeSheet.SetCellValue('B3','2025-02-28');
    activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

3.5 时间

js 复制代码
   activeSheet.SetCellValue('B3','2025-02-28');
   activeSheet.setCellEditor('B3', websheet.Model.DatePickCell);

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

效果图如下:

在线代码

{.is-success}

四、进度条

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

js 复制代码
    /**
  * 第一步 获取激活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 文本颜色

五、自动选择代码

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

js 复制代码
    /**
  * 第一步 获取激活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 滑块

八、自定义编辑器

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

相关推荐
wjs20242 小时前
状态模式(State Pattern)
开发语言
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle2 小时前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜4 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
爱装代码的小瓶子6 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass