什么?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 🌟🌟🌟

目录
打赏
0
0
0
0
153
分享
相关文章
如何判断jdk版本是32位还是64位?
如何判断jdk版本是32位还是64位?1、这个主要是在 cmd 下输入 java -version来查看,如果没有标明是多少位的,默认一般是32位的。2、看你在oracle官网下载的jdk文件原名:刚下载的JDK文件名后面标注了x64代表是64位的JDK,若没有标注,则都是32位的JDK(必须保证是官网下载的文件原名哦);当然此只是官网下载的文件,不包括手动更改的文件名。 比如: jdk-8u102-windows-i586是什么32位还是64位?没有标注x64,就说明是32位的。 64位后面都会带x64标识;不带就是32位的;
6599 0
如何判断jdk版本是32位还是64位?
React 侧边栏组件 Sidebar
本文介绍了如何使用React创建交互式侧边栏组件,涵盖基础结构、状态管理、样式设计等方面。通过`useState`钩子控制侧边栏的展开与收起,并利用CSS实现动画效果。同时,文章还探讨了响应式设计、性能优化、可访问性和路由集成等常见问题及解决方案,帮助开发者构建高效、美观且易于维护的侧边栏组件,提升Web应用的用户体验。
187 8
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式,用于校验IPv4地址的有效性,包括支持CIDR表示法的变体。
177 4
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
193 7
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问