什么?AntV/S2 还能做成 Excel 形态?

简介: 什么?AntV/S2 还能做成 Excel 形态?
🙋🏻‍♀️ 编者按:产品突然指过来一个需求,需要在 S2 大数据的表格里面,添加可编辑功能。这可咋整呀?S2 的主打的是数据展示,而不是数据编辑,看来只能自己试试黑魔法了😏。本文中,AntV 团队的亚德将为大家演示,如何把 S2 数据展示表格变成编辑表格,欢迎享用~

怎么快速搭建一个 S2 表格?

让我们看下 S2 的官网 s2.antv.vision/,然后快速搭建一个明细表

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';
import 'antd/es/checkbox/style/index.css';
import { S2DataConfig, S2Options, SpreadSheet } from '@antv/s2';
const initOptions = {
  width: 600,
  height: 400,
  showSeriesNumber: true,
  tooltip: { showTooltip: false },
  interaction: { enableCopy: true, },
  showDefaultHeaderActionIcon: false,
}
const initData = {
  fields: { columns: ['province', 'city', 'type', 'price'], },
  sortParams: [],
}
const App = ({ data }) => {
  const S2Ref = useRef<SpreadSheet>(null);
  const [options, setOptions] = useState<S2Options>(initOptions);
  const [dataCfg, setDataCfg] = useState<S2DataConfig>({ ...initData, data });
  return (
    <div>
      <SheetComponent
        ref={S2Ref}
        dataCfg={dataCfg}
        options={options}
        sheetType="table"
        />
    </div>
  );
};
fetch('../data/basic-table-mode.json')
  .then((res) => res.json())
  .then((res) => {
  ReactDOM.render(<App data={res} />, document.getElementById('container'));
});

然后让我们看看这个表格长什么样?

那怎么把数据展示表格变成编辑表格呢?

1. 先来一个受控的编辑元素

<input value={value} onChange={e => setValue(e.target.value)} />

那要如何把这个编辑元素和表格内的展示元素绑定在一起呢?

诶,S2 不是有个事件机制么?我们是不是可以把 click 事件获取到,然后将我们的编辑元素盖到展示元素的上面?找了下 API,果然有一个可以用来监听数据格的点击事件(S2Event.DATA_CELL_CLICK)。

2. 注册一个 DATA_CELL_CLICK 事件,触发后保存当前点击 Cell 的信息

S2Ref.current.on(S2Event.DATA_CELL_CLICK, (e) => {
  // 保存当前cell
  setCell(e.target.cfg.parent)
})

为什么需要保存 Cell 的信息呢?因为我们接下来要使用这个信息去排版我们的编辑元素。那怎么获取通过 cell 获取到当前 cell 的坐标以及宽高信息呢?cell 的这些信息都挂载在 cellMeta 上面,使用 cell.getMeta() 即可快速获取到这些信息,然后我们将这些信息拼装一下,变成我们需要的 style 数据。同时还得把原始数据赋值给这个编辑元素,使得用户无缝切换编辑和展示模式。

3. 通过当前 Cell 信息将受控编辑元素覆盖到当前 Cell 上方,同时赋初始值

useEffect(() => {
    const spreadsheet = S2Ref.current
    if (spreadsheet && cell) {
      const cellMeta = pick(cell.getMeta(), ['x', 'y', 'width', 'height', 'fieldValue']);
      const colCellHeight = (spreadsheet.getColumnNodes()[0] || { height: 0 }).height
      cellMeta.x -= scroll.scrollX || 0;
      cellMeta.y -= (scroll.scrollY || 0) - colCellHeight;
      setPosition({
        left: cellMeta.x,
        top: cellMeta.y,
        width: cellMeta.width,
        height: cellMeta.height,
      })
      setShow(true)
      setValue(cellMeta.fieldValue)
    }
  }, [cell])

另外,还发现一个不是很舒服的体验,点击之后没有自动focus到编辑元素上,这个问题怎么优化呢?

也很简单,只要在 show 的时候自动 focus 就好。

// show的时候自动focus
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus({ preventScroll: true })
    }
  }, [show])

已经有了一个覆盖在 S2 上方的编辑元素,那么接下来我们就要考虑如何将修改后的值同步到 S2 内部。再来看看现在我们的表格长什么样子?

4. 使用回车键触发保存功能

4.1 save 函数

// 改变S2实际渲染内容
  const onSave = (inputVal: string) => {
    const spreadsheet = S2Ref.current
    if (spreadsheet && cell) {
      const { rowIndex, valueField } = cell.getMeta();
      spreadsheet.dataSet.originData[rowIndex][valueField] = inputVal;
      spreadsheet.render(true);
      setShow(false)
    }
  }

通过修改 originData 然后再调用 render 函数即可做到更新 S2 数据的功能,是不是很简单?渲染完成之后再把我们用来控制渲染元素的 show 置为 false 来隐藏编辑元素。

4.2 添加 keydown 事件,回车的时候触发保存功能

// 绑定回车键 回车的时候触发保存
  useEffect(() => {
    const onKeyDown = (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        onSave(value);
      }
    };
    if (inputRef.current) {
      inputRef.current.addEventListener('keydown', onKeyDown)
    }
    return () => {
      inputRef.current?.removeEventListener('keydown', onKeyDown)
    }
  }, [value])

记得解绑事件哦,防止内存泄漏。来看看效果

但是用户不一定非得使用回车保存内容,和 Excel 类似,编辑元素失去焦点的时候,应该也是需要触发保存的,这个功能我们要怎么去实现呢?

5. 切换 Cell 之前,先保存当前编辑的值

// 绑定 S2Event.DATA_CELL_CLICK 事件,触发时先将上一个cell的值保存,然后设置当前cell
  useEffect(() => {
    const spreadsheet = S2Ref.current
    const handleClick = (e) => {
      onSave(value)
      setCell(e.target.cfg.parent)
    }
    if (spreadsheet) {
      spreadsheet.on(S2Event.DATA_CELL_CLICK, handleClick)
    }
    return () => {
      spreadsheet?.off(S2Event.DATA_CELL_CLICK, handleClick)
    }
  }, [value])

让我们在看看效果

正当我沾沾自喜要把代码 push 上去的时候,不小心碰到了鼠标滚轮,然后他变成这样了。😱😱😱
这可咋办,明天就要上线了!这个编辑元素居然不会跟着滚动!又翻阅了 S2 的事件列表,找到了一个事件S2Eevnt.LAYOUT_CELL_SCROLL,可以用来监听滚动事件。完美!😼😼😼

6. 监听滚动事件,使得编辑元素动态滚动

useEffect(() => {
    const spreadsheet = S2Ref.current
    const handleScroll = (e) => {
      if (spreadsheet) {
        const newScroll = spreadsheet.facet.getScrollOffset()
        if (!isEqual(newScroll, scroll)) {
          setScroll(spreadsheet.facet.getScrollOffset())
        }
      }
    }
    if (spreadsheet) {
      spreadsheet.on(S2Event.LAYOUT_CELL_SCROLL, handleScroll)
    }
    return () => {
      spreadsheet?.off(S2Event.LAYOUT_CELL_SCROLL, handleScroll)
    }
  }, [])

同时监听 scroll 的改动

// 监听滚动
  useEffect(() => {
    const spreadsheet = S2Ref.current
    if (spreadsheet && cell) {
      const cellMeta = pick(cell.getMeta(), ['x', 'y', 'width', 'height', 'fieldValue']);
      cellMeta.x -= scroll.scrollX || 0;
      cellMeta.y -=
        (scroll.scrollY || 0) -
        (spreadsheet.getColumnNodes()[0] || { height: 0 }).height;
      setPosition({
        left: cellMeta.x,
        top: cellMeta.y,
        width: cellMeta.width,
        height: cellMeta.height,
      })
    }
  }, [scroll])

我们再来看看效果

好了,一个简单的可编辑表格就在 S2 灵活的底层基础上实现了,是不是忍不住自己也想来尝试来一把?
在线预览地址 https://s2.antv.vision/zh/examples/case/data-preview#excel

欢迎 star 以及 fork!让我们一起 DIY 起来~

https://github.com/antvis/S2 🌟🌟🌟

相关文章
|
搜索推荐 easyexcel Java
阿里开源的这个库,让 Excel 导出不再复杂(既要能写,还要写的好看)
前文 聊了 EasyExcel 的内容导出,本文主要说一下导出文件的格式化,格式化包括工作表/单元格样式和内容格式化。毕竟,有时候还是要看脸。
1169 0
阿里开源的这个库,让 Excel 导出不再复杂(既要能写,还要写的好看)
|
缓存 JavaScript 前端开发
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2877 0
|
SQL 移动开发 编解码
如何使用 AntV S2 打造大数据表格组件?
如何使用 AntV S2 打造大数据表格组件?
1157 0
|
JavaScript 前端开发 数据库
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码,请关注公众号:拼搏的小浣熊,获取简化版的代码!
|
6月前
|
数据可视化 前端开发 JavaScript
本来不想分享的,但这套可视化大屏确实不错
本来不想分享的,但这套可视化大屏确实不错
|
架构师
基于D3.js绘图组件的后端架构师技术栈图谱树
基于D3.js绘图组件的后端架构师技术栈图谱树 组件效果 GitHub项目传送门 https://github.com/nqmysb/knowledge_graph 效果预览地址 https://liaocan.top/knowledge_graph/
2002 0
|
数据可视化 API 数据库
ThingJS: 做一个数据可视化项目的难点在什么地方?3D 可视化 three.js
项目开发的过程会分成三个部分:数据前置动作、三维建模环节、3D开发环节,数据前置动作,是一大难点。
ThingJS: 做一个数据可视化项目的难点在什么地方?3D 可视化 three.js
|
存储 JSON 移动开发
逻辑编排在优酷可视化搭建中的实践(三) - 元件与平台
前一篇文章里讲解了逻辑与Runtime&DSL,也提到了逻辑编排三板斧:元件 + 编排器 + Runtime,我在本篇将主要聊一聊元件设计以及YOHO的平台化。
501 1
逻辑编排在优酷可视化搭建中的实践(三) - 元件与平台
|
程序员 uml
如何用语雀画板,轻松画出架构图?
无须任何第三方工具,用语雀画板,轻松画出架构图。
如何用语雀画板,轻松画出架构图?
|
定位技术 C# 图形学
GIS开发:展示系统杂谈
GIS开发:展示系统杂谈
106 0

热门文章

最新文章