Canvas 数据网格

Canvas 数据网格 是一个具有简单 API 的高性能网格。

¥Canvas Datagrid is a high-performance grid with a straightforward API.

单击此处查看实时独立集成演示。

¥Click here for a live standalone integration demo.

测试部署

该演示的最后验证时间为 2024 年 4 月 25 日。

¥This demo was last verified on 2024 April 25.

在线演示

¥Live Demo

由于数据网格和文档生成器之间的 CSS 冲突，滚动等功能可能无法按预期工作。

¥Due to CSS conflicts between the data grid and the documentation generator, features like scrolling may not work as expected.

链接的演示使用一个简单的 HTML 页面。

¥The linked demo uses a simple HTML page.

Result

Loading...

Live Editor

function SheetJSCDG() {
  const [url, setUrl] = React.useState("https://xlsx.nodejs.cn/pres.numbers");
  const [done, setDone] = React.useState(false);
  const ref = React.useRef(); // ref to DIV container
  const set_url = (evt) => setUrl(evt.target.value);
  const [cdg, setCdg] = React.useState(null); // reference to grid object

  return ( <>
    <div height={300} width={300} ref={ref}/>
    {!done && ( <>
      <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
      <br/><button onClick={async() => {
        /* fetch and parse workbook */
        const wb = XLSX.read(await (await fetch(url)).arrayBuffer());
        const ws = wb.Sheets[wb.SheetNames[0]];
        const data = XLSX.utils.sheet_to_json(ws, { header:1 });

        /* set up grid and load data */
        if(!cdg) setCdg(canvasDatagrid({ parentNode: ref.current, data }));
        else cdg.data = data;
        setDone(true);
      }}><b>Fetch!</b></button>
    </> )}
  </> );
}

集成详情

¥Integration Details

获取库

¥Obtaining the Library

canvas-datagrid NodeJS 包包含一个缩小的脚本，可以直接作为脚本标签插入。unpkg CDN 也提供此脚本：

¥The canvas-datagrid NodeJS packages include a minified script that can be directly inserted as a script tag. The unpkg CDN also serves this script:

<script src="https://unpkg.com/canvas-datagrid/dist/canvas-datagrid.js"></script>

预览数据

¥Previewing Data

HTML 文档需要一个容器元素：

¥The HTML document needs a container element:

<div id="gridctr"></div>

网格初始化是一行代码：

¥Grid initialization is a one-liner:

var grid = canvasDatagrid({
  parentNode: document.getElementById('gridctr'),
  data: []
});

对于大数据集，有必要限制网格的大小。

¥For large data sets, it's necessary to constrain the size of the grid.

grid.style.height = '100%';
grid.style.width = '100%';

读取工作簿并选择工作表后，分配数据变量会自动更新视图：

¥Once the workbook is read and the worksheet is selected, assigning the data variable automatically updates the view:

grid.data = XLSX.utils.sheet_to_json(ws, {header:1});

该演示预览第一个工作表。

¥This demo previews the first worksheet.

编辑

¥Editing

canvas-datagrid 处理整个编辑周期。无需干预。

¥canvas-datagrid handles the entire edit cycle. No intervention is necessary.

保存数据

¥Saving Data

grid.data 可立即读取并可转换回工作表。某些版本返回不带长度的类似数组的对象，因此可能需要一些准备工作：

¥grid.data is immediately readable and can be converted back to a worksheet. Some versions return an array-like object without the length, so a little bit of preparation may be needed:

/* converts an array of array-like objects into an array of arrays */
function prep(arr) {
  var out = [];
  for(var i = 0; i < arr.length; ++i) {
    if(!arr[i]) continue;
    if(Array.isArray(arr[i])) { out[i] = arr[i]; continue };
    var o = new Array();
    Object.keys(arr[i]).forEach(function(k) { o[+k] = arr[i][k] });
    out[i] = o;
  }
  return out;
}

/* build worksheet from the grid data */
var ws = XLSX.utils.aoa_to_sheet(prep(grid.data));

/* build up workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');

/* generate download */
XLSX.writeFile(wb, "SheetJS.xlsx");

附加功能

¥Additional Features

这个演示仅仅触及了表面。底层网格组件包括许多与 SheetJS 专业版 配合使用的附加功能。

¥This demo barely scratches the surface. The underlying grid component includes many additional features that work with SheetJS Pro.