找回密码
 立即注册

QQ登录

只需一步,快速开始

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-9-15 11:56  /   查看:2798  /  回复:0
之前有介绍过Svelte这个框架以及如何在Svelte中使用SpreadJS,通过Svelte封装的Web Component可以跨框架使用。SpreadJS提供了自定义单元格的功能,双击单元格就进入了编辑状态,通过编辑状态中提供的DOM编辑元素,可以接受用户录入比如官方示例中FirstName和LastName分开录入的示例。
我们也提供了很多集成第三方组件的自定义单元格示例,例如很常用的AutoComplete自动提示下拉框,但是这个autoComplete使用了JQuery,对于VUE和React等框架用户,并不愿意引入Jquery这个古老的东西。同样,由于生命周期的问题,框架提供的组件无法在自定义单元格的生命周期里直接使用。
因此,使用Svelte生成的Web Component成了一个不错的选择
1. 使用框架开发,相率高可维护性好
2. 发布后没有框架依赖,其他任何场景都可以使用
3. 发布的Web Component体积小

下面就介绍下如何使用Svelte开发一个VUE和React都框架下可以使用的SpreadJS 自定义单元格。
一. 使用Svelte开发ActoComplete Web Component
    Svelte的生态现在也已经丰富起来了,通过搜索我找到了一款Svelte开发的ActoComplete组件,https://github.com/pstanoev/simple-svelte-autocomplete,我们会fork这个项目,做一些修改,让他生成一个Web Component出来(这里大家一定要注意三方组建的协议,是否运行修改发布)。
    Svelte对发布Web Component提供了很好的支持,这里我们只需要修改两个地方便完成了第一步工作。
1. 修改src/SimpleAutocomplete.svelte
在头部添加:
  1. <svelte:options tag="auto-complete" />
复制代码

同时在代码中修改items添加一些默认信息
  1.   // the list of items  the user can select from
  2.   export let items = [];
  3.   items = ["White", "Red", "Yellow", "Green", "Blue", "Black"];
复制代码


2. 修改rollup.config.js
在plugins中配置customElement
设置后的结果为:
  1. import commonjs from '@rollup/plugin-commonjs';
  2. import resolve from '@rollup/plugin-node-resolve';
  3. import svelte from 'rollup-plugin-svelte';
  4. import pkg from './package.json';

  5. export default [
  6.   {
  7.     input: 'src/SimpleAutocomplete.svelte',
  8.     output: [
  9.       { file: pkg.module, format: 'es' },
  10.       { file: pkg.main, format: 'umd', name: 'Autocomplete' }
  11.     ],
  12.     plugins: [svelte({
  13.                         customElement: true,
  14.                 }), commonjs(), resolve()]
  15.   }
  16. ];
复制代码
3. 运行npm run build打包生成Web Component
运行后会在根目录生成index.js和index.mjs两个文件,js是umd的支持,mjs是ES版本,后面我们直接使用UMD支持的index.js文件。

二. 无框架页面测试。


  1.     <div id="ss" style="height: 600px;"></div>
  2.     <script type="text/javascript" src="index.js"></script>

  3.     <script type="text/javascript">
  4.       window.onload = function(){
  5.         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  6.         var sheet = spread.getActiveSheet();
  7.         sheet.setCellType(1, 1, new AutoComplateCellType())
  8.       }

  9.       function AutoComplateCellType() {
  10.         }
  11.         AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
  12.         AutoComplateCellType.prototype.createEditorElement = function () {
  13.           var ac = document.createElement('auto-complete');
  14.           ac.setAttribute("gcUIElement", "gcEditingInput");
  15.           return ac;
  16.         }
  17.         AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
  18.             if (editorContext) {
  19.                 editorContext.style.width=cellRect.width;
  20.                 editorContext.style.height=32;
  21.                 editorContext.parentElement.parentElement.style.overflow = "visible";
  22.                 return {height: 32};
  23.             }
  24.         };
  25.         AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
  26.             if (editorContext) {
  27.                 return editorContext.value;
  28.             }
  29.         };
  30.         AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
  31.             if (editorContext) {
  32.               editorContext.value = value
  33.             }
  34.         };
  35.     </script>
复制代码

引入生成的index.js 创建AutoComplateCellType,设置到单于格中,效果如图: image.png258315734.png

三. Vue框架中使用
通过import的方式引入autocomlate Web Component
  1. <script>
  2.   import  '@grapecity/spread-sheets-vue'
  3.   import '../static/index' // 复制打包的index.js到static文件夹下
  4.   import * as GC from "@grapecity/spread-sheets"
  5.   
  6.       function AutoComplateCellType() {
  7.         }
  8.         AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
  9.         AutoComplateCellType.prototype.createEditorElement = function () {
  10.           var ac = document.createElement('auto-complete');
  11.           ac.setAttribute("gcUIElement", "gcEditingInput");
  12.           return ac;
  13.         }
  14.         AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
  15.             if (editorContext) {
  16.                 editorContext.style.width=cellRect.width;
  17.                 editorContext.style.height=32;
  18.                 editorContext.parentElement.parentElement.style.overflow = "visible";
  19.                 return {height: 32};
  20.             }
  21.         };
  22.         AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
  23.             if (editorContext) {
  24.                 return editorContext.value;
  25.             }
  26.         };
  27.         AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
  28.             if (editorContext) {
  29.               editorContext.value = value
  30.             }
  31.         };

  32.   export default {
  33. //    name: 'sample-header'
  34.     methods:{
  35.       workbookInitialized(spread){
  36.         var sheet = spread.getActiveSheet();
  37.         sheet.setCellType(1, 1, new AutoComplateCellType())
  38.       }
  39.     }
  40.   }


  41. </script>
复制代码
image.png485815123.png

这里注意打包的index.js 引入后会报一个关于ts的错误,删除文件中 一下内容即可。
  1. // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
复制代码

在React中方式相同,这里就不赘述了。


0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部