README

SimpleSheet 插件，适用于 Craft CMS 3.x

为 Craft CMS 提供额外的电子表格字段类型。关于我们为何开发此插件，请参阅 Digital Butter 博客。

需求

此插件需要 Craft CMS 3.0.0-beta.23 或更高版本。

SimpleSheets 使用 CDN 通过非商业实例的 Handsontable 渲染电子表格。您可以在网上找到 Handsontable 许可证的副本此处。

安装

要安装此插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目
```
 cd /path/to/project
```
然后告诉 Composer 加载插件
```
 composer require /simple-sheet
```
在控制面板中，转到“设置”→“插件”，并点击 SimpleSheet 的“安装”按钮。

SimpleSheet 概览

SimpleSheet 将基本的电子表格功能与熟悉的界面带给 Craft CMS。

配置 SimpleSheet

一旦成功安装 SimpleSheet 插件，它就准备就绪。

使用 SimpleSheet

创建 SimpleSheet 字段

您可以使用与在 Craft 中创建任何其他字段相同的方式创建 SimpleSheet 字段。

在控制面板中，转到“设置”->“字段”，并点击“新建字段”按钮。
填写必填字段，并从“字段类型”下拉菜单中选择“SimpleSheet”。

现在您可以将此新字段添加到您的部分。

添加数据

在条目页面中使用 SimpleSheet 字段时，以下操作可用

插入/删除行和列
复制数据
排序数据
重新排列行和列顺序
过滤 *
键盘导航
从 Excel 和 Google Sheets 复制

请注意，过滤器不会永久更改源数据，也不会被保存。这将在未来的版本中更新。

插入和删除行和列

右键单击电子表格以显示上下文菜单。以下选项将可用

在上方插入行
在下方插入行
在左侧插入列
在右侧插入列
删除行
删除列

复制数据

当前可以通过以下步骤复制数据

选择要复制的行或列。
从上下文菜单中选择“复制”，或使用原生键盘快捷键（Ctrl+C / Cmd+C）
打开上下文菜单并插入一个新行或列。
选择新创建的行或列的第一个单元格。
使用键盘快捷键粘贴数据（Ctrl+V / Cmd+V）

排序数据

可以通过单击列的标题文本来排序数据。标题中将出现一个箭头，以指示电子表格数据正在按该特定列排序，以及数据是按升序还是降序排序。

重新排列行和列顺序

可以通过拖放将行和列重新排列到新顺序。当选择行/列标题时，将出现一个小手形光标，以指示可以拖动该元素。请注意，必须选择行/列才能显示此光标。

对于行，光标出现在所选行标题的顶部。
对于列，光标出现在所选列标题的左侧。

筛选

可以通过每个列右侧的下拉按钮进行数据筛选。以下筛选选项可用：

根据预定义条件筛选：- 是否为空/不为空 - 是否等于/不等于 - 以...开始/结束 - 包含/不包含
根据值（自由文本）筛选
手动筛选（从复选框列表中选择/取消选择特定值）

键盘导航

支持基本的键盘导航

Tab 将当前单元格焦点向右移动。
Shift+Tab 将当前单元格焦点向左移动。
Enter/Return - 在第一次按键时，将进入最左上角的选中单元格进行编辑。 - 在第二次按键时，将提交任何更改并向下移动一个单元格。
方向键 将当前单元格焦点移动到按下的方向。

从 Excel 和 Google Sheets 复制

可以使用标准键盘快捷键将数据从 Excel/Google Sheets 复制并粘贴到电子表格中：要复制，Windows/Linux 上按 Ctrl+C，MacOS 上按 Cmd+C。要粘贴，Windows/Linux 上按 Ctrl+V，MacOS 上按 Cmd+V。

请注意，当前不支持格式和样式功能，并且这些功能不会传递到 SimpleSheet 字段中。

显示 SimpleSheet

嵌入

在前端渲染电子表格的非编辑版本很简单，只需在 SimpleSheet 字段上使用 embed 方法。这将返回一个带有您提供的（或自动生成的 ID）的 div 容器标签，并包括渲染电子表格所需的 JS 和 CSS。

    {{ entry.mySimpleSheetField.embed() }}

Embed 接受一个可选的 options 对象作为其唯一参数。目前接受以下值：

id : 提供一个 HTML 元素的 ID，该元素将用于在 HTML 中创建 SimpleSheet 容器。
width : 将 SimpleSheet 的宽度定义为字符串。默认 100%。

height : 定义 Simplesheet 的高度。默认 500px。

 {{ entry.mySimpleSheetField.embed({
         id: 'sheet',
         width: '800px',
         height: '600px',
 }) }}

手动输出

如果您希望访问用于自由格式模板的原始数据，可以使用电子表格上的 data 属性检索一个行数组数组。

    {% set sheetData = mySimpleSheetField.data %}

以 JSON 格式字符串显示数据

    {{ sheetData | json_encode(constant('JSON_PRETTY_PRINT')) }}

检索行数

    {{ sheetData | length }}

检索列数

    {{ sheetData[0] | length }}

SimpleSheet 路线图

此插件目前处于早期阶段，功能有限。计划在未来版本中添加的功能

支持非易失性显示设置（文本对齐、列宽等），允许这些设置在视图之间持久存在并应用于前端。
允许在查看会话之间传递筛选器，而不会永久更改源数据。
条件格式。
为单元格应用背景颜色。
为单元格应用简单边框。
定义单元格的数据类型（文本、数字、小数等）
支持基本公式（平均值、总和等）

dgjackson / simplesheet

维护者

详细信息