跳到主要内容

Droptables :样式表

1.表格格式

在工具栏上,您可以为单元格设置样式,例如:字体、字体大小、文本样式、单元格背景颜色、文本颜色、单元格水平和垂直对齐方式……它可以应用于单个单元格或多个单元格。

 

表格格式

 

行高和列宽可以以像素为单位定义。 请进入菜单格式>应用列/行大小,然后选择调整列大小/调整行大小。 在弹出窗口中,您可以选择范围并设置列或行的像素。 单击“完成”按钮完成。

 

行列大小

 

 

2.主题和排序选项

在每个表中,您可以在菜单主题主题选择。 只需单击一个主题即可应用它。

 

主题选择

 

如果您的表中已有数据并且应用了主题,则所有数据都将被删除。 如果您在新表上应用主题,则会添加示例数据和样式并可以对其进行编辑。

在相同的菜单主题 > 替代颜色页眉样式页脚样式为表格上的线条着色。 您可以选择模板样式或在插件设置中创建自己的模板样式。

 

交替颜色

 

sortable 参数允许您在前端进行 AJAX 数据排序。 菜单格式>排序中看到。

 

可排序和过滤表

 

表格对齐是指对齐包含整个表格的 div,例如将所有表格居中。 您可以在菜单格式>表格对齐

 

表格对齐

 

单元格突出显示也可作为一个选项。 配置中启用行、列或两者选项。 默认情况下它是禁用的。 您可以调整突出显示的颜色和不透明度。

 

表突出显示

 

3.在单元格上添加工具提示

还提供有关单元格鼠标悬停的工具提示(需要从组件选项激活)。 在表格上的每个单元格上,右键单击它时“工具提示”

 

表格单元格工具提示

 

您可以设置工具提示宽度(以像素为单位)。 它将带您到带有编辑器的工具提示进行编辑。

 

工具提示编辑器

 

添加内容并保存后,操作完成,工具提示将在鼠标悬停时显示在公共端。

 

工具提示悬停

 

4. ACL 和前端管理

可以从 Joomla 前端管理您的表。 从 Joomla 菜单管理器中,添加一个“新菜单”项并选择“管理表”类型,然后选择Droptables前端 - 默认”作为模板。

 

菜单-droptables

 

这是您可以从前端看到的Droptables Manager 的内容。

 

Droptables前端

 

注意:要在前端全屏显示表管理器界面,您应该选择“模板样式”> Droptables前端”。

 

您可以使用 Joomla 用户组 ACL 来控制表编辑操作。 首先,要设置允许查看表的人,您应该转到Droptables用户角色选项卡。

 

前端表版本

 

表”>“表访问”设置表的所有者

 

用户组acl

 

5.行列冻结

色谱柱冻结

菜单格式 > 响应式选项。 您最多可以冻结 5 列。 从第一列开始计算。

 

冷冻柱

 

为了使列/行冻结,还有一个附加选项可以让您固定表格的高度(因为您的表格容器可能具有无限的高度)。

 

桌子高度

 

选择要冻结的列后,您将能够在表格上滚动并始终显示固定列。

 

固定线显示

 

行冻结

菜单格式 > 表标题中找到它,从这里您可以打开选项并设置要冻结的行(最多 5 行)。

 

行冻结表标题

 

如果您想设置桌子高度,请返回“响应式”选项。

然后,第一行将在设置之后冻结在前端。

 

行冻结

 

6. 过滤列数据

格式 > 过滤器中提供了过滤选项。 您可以通过单击启用公共数据过滤字段来激活它。

 

排序过滤器

 

过滤器示例:

 

数据过滤器

 

7.单元格填充和边框半径

您可以在工具栏上找到边框图标,它有助于调整单元格上的填充和边框半径。

 

填充边框

 

 

8. 自定义 CSS

让我们更进一步。 如果您是一位具有 CSS 编辑技能的网页设计师,您将能够在菜单格式 > 自定义 CSS

 

自定义CSS

 

单元格、行、列都有坐标来识别每个单元格并对其应用自定义 CSS。 R 是行,C 是列。 这是第 1 行 (r1)、第 4 列 (c4) = dtr1 dtc4

 

CSS坐标

 

CSS 代码使用代码镜像进行着色。 CSS代码可以少一点,也能用!

 

CSS自定义表

 

9. 响应式 Joomla 表格

我的表是否响应或在小型设备上使用滚动条?

隐藏cols

Droptables使用优先工具处理响应式设计。 默认情况下,响应功能是禁用的,会出现溢出(尽管在移动设备上效果很好)。 为了使用Hiding Cols选项,您应该转到菜单格式 > 响应选项。

 

响应式隐藏列

 

响应模式是高级的,您可以定义隐藏移动尺寸列的优先级。
隐藏列时,将显示带有复选框的移动菜单以强制显示/隐藏列。 列大小在表格编辑期间是固定的。 如果所有列的大小对于容器而言都太大,就会出现溢出,并且您将能够轻松地在移动设备上滚动。

带滚动条的表(更适合少量列)

 

响应表滚动

 

隐藏列的表(更适合大量列)

 

响应表隐藏

 

重复标题

如果您想在站点的小区域中插入表格,这是另一个选项。 您应该导航到“菜单格式”>“响应式选项”。 然后选择“响应式类型”>“重复标题”。

 

重复标头

 

将根据您的需求提供自定义选项:

  • 响应断点 (px):选择一个以像素为单位的断点值,以定义表格何时切换到此响应模式
  • 响应最大高度(像素):激活响应模式时,根据断点值,定义最大高度,以避免表格过长
  • 响应模式样式:为此响应模式应用默认样式或使用表格颜色

之后,您可以看到该表在前端的外观。

 

重复头前端

 

10.下载表

为了与公众共享您的表格,请导航至“菜单表格” ,然后勾选“导出 Excel”按钮选项。 在前端下载时,文件类型将为 *.xlsx。

 

导出excel

 

11. 分页

在每个表格版本的“菜单格式”>“分页”中找到此功能 使用切换按钮启用并选择要在页面上显示的行数。

 

分页选项

 

12. 单个单元格的格式 

Droptables中设置格式:日期时间、货币、单个单元格的数字。 首先,您应该选择一个/多个单元格。 然后转到菜单格式 > 日期时间。

 

日期时间单元格

 

之后,货币和数字可以以相同的方式完成。

 

13. 在前端打印表格

有时,您需要打印表格。 因此,为了在前端“打印”按钮“菜单表”并勾选“打印”按钮选项。

 

打印按钮