使用kintone的电子表格插件来实现Excel风格的UI!

aki发表于:2017年01月20日 14:53:40更新于:2023年01月31日 13:56:13

本文的作者是kintone技术布道师的村濱 一樹,也是本插件的作者。以下为译文。
当我看到“通过Handsontable在kintone上实现像Excel一样编辑数据 之系列1”时,我就想到要是kintone可以像Excel那样编辑数据,应该很受欢迎的。

因此,我把那篇自定义拿来做成了插件,名称叫“kintone电子表格”。这样,您可以不用自己动手编写JavaScript代码,只要安装了插件设置好之后就可以在kintone上像Excel那样进行编辑了。

下载kintone电子表格

在本篇文章中使用的 Handsontable,从 v7.0.0 开始将不再是 MIT License。
在本篇文章的自定义里,请使用许可证为 MIT License 的 v6.2.2(查看许可证内容)。
如需使用 v7.0.0 或更高版本时,请从 Handsontable 的官方网站 购买付费许可证,并在遵守许可证条件的前提下使用。
有关详细信息,请参阅 Cybozu CDN 许可证对应指南

请下载源代码并打包

https://github.com/mura-/kintone-spreadsheet

安装kintone电子表格

在kintone系统管理页面,打开插件设置页面,点击“导入”按钮,选择插件文件。
(详情,请参考此处。)

0015885badc724bffeabe26cdb2692f

设置kintone电子表格

安装好插件后,可在任意的应用中使用。
这次使用的应用如下。

0015885beb4a0cffd547240cdd54f5e

1. 自定义列表的设置

用HTML形式编写用于显示电子表格的元素。
需要kintone系统管理权限才可创建或编辑自定义列表。

<div id="sheet"></div>

0015885bb68e2a9fab90f3c48bbd3ed

关于自定义表格的详情,请参考以下页面。
入门篇 第 7篇 使用自定义列表

2. 在应用中设置插件

在应用的设置页面,进行插件的设置。
打开应用的设置页面,点击“插件”,打开插件的设置页面。

0015885bbed7d2e1a563bda6cb11f08

在插件的设置页面中,点击“添加”,选中“kintone电子表格”添加。

0015885bd8a03d9e79d682f63a4428a

 添加之后,点击该插件所在行中的齿轮按钮,即可设置插件。

0015885bd9f067a5f3ea42d9fb6c1fd

在插件的设置页面,正确填写自定义列表中设置的元素ID,选择需要在电子表格中显示的字段,点击保存。

注意:第2项的输入框中会默认输入例子中的id,即使您的元素ID与输入例子一样,也必须重新输入。

0015f6c352687b8e1f175dbc68b0f5c

这样设置就完成了。

kintone电子表格使用方法

打开刚才设置的电子表格,即可显示电子表格,可进行添加/编辑/删除记录等操作。

001588808c49807d37aacaf68709330

注意

此插件还不支持下拉菜单和单选框(自由文本输入)。为了让您使用起来更加方便,我们还会继续努力改进的!
这次提供的是β版。可能还有不足之处,请大家见谅。

最后

是不是还不赖?经常有人提意见说虽然使用的是kintone,但也希望能够像Excel可以进行批量输入或删除。
如果有这样的插件,就可以轻松实现了,请务必试一下哦。
另外,如果有什么缺陷或需要改善的地方,请在Github的Issue或本文档后面留言。
代码公开在Git上,可以自由地进行fork,也期待大家的Pull Request。