simbiat/array2table

用于将数组转换为表格的库。

维护者

详细信息

github.com/Simbiat/array2table

主页

源代码

问题

安装: 24

依赖关系: 0

建议者: 0

安全: 0

星标: 2

关注者: 2

分支: 0

开放问题: 6

2.0.13+20240529 2024-05-29 08:19 UTC

Requires

Suggests

AGPL-3.0-or-later db486639382a3235b0d4987aaefbfe02f78aa445

phparrayconvertertable

This package is auto-updated.

Last update: 2024-09-29 08:58:39 UTC

README

此库用于使用提供的数组数据创建HTML表格。您何时想使用它？我相信，有两种用例

  • 您正在从数据库中展示大量同质数据
  • 您正在创建一些相对简单的表单（如用户设置），并且不希望对其进行过多自定义

是的，此库可以用于创建表单，您可以在表单提交后进一步处理。这里的独特功能是，表单元素不仅限于文本字段：库支持复选框、日期/时间字段、颜色、文件等。每个元素都将创建所需的最小属性，并自动生成ID和类（用于CSS自定义或所需的JavaScript交互）。

注意，如果您已经在项目中使用了模板引擎（如Twig），则不建议使用此库，因为它可能更有效且更安全，特别是在处理字段内的HTML时。如果您的项目中没有用于生成实际网页的东西，您希望基于函数的输出生成某种类型的报告，则使用此库可能是有意义的。

如何使用

了解您将获得的内容的最佳方式是查看实时示例，因此请查看此README附近的sample.html。在那里您将找到3个表格，它们是使用以下代码生成的

echo (new \Simbiat\array2table)->setIdPrefix('sem_edit')->setCaption('Semantic, editable')->setFooter(['#func_sum','',''])->setCurrencyCode('USD ')->setCurrencyPrecision(2)->setCurrencyFraction(true)->setCheckbox(true)->setChecked(true)->setEditable(true)->setTextareaSetting('cols', '20')->setTextareaSetting('rows', '5')->setTypes(['number','string',['text','password','tel','date', 'time', 'datetime', 'seconds', 'bytes', 'price', 'checkbox', 'email', 'url', 'html', 'img', 'color']])->generate(
    [
            ['Points'=>'1','Field'=>'Login','Value'=>'Simbiat'],
            ['1','Password','Simbiat'],
            ['1','Telephone','+74991752327'],
            ['1','Date of birth','12-05-1989'],
            ['1','Current time',time(),],
            ['1','Last login',time(),],
            ['1','Seconds','123456',],
            ['1','Image size','1234567',],
            ['1','Salary','123456',],
            ['1','Are you a robot?','No',],
            ['1','Email','simbiat@outlook.com',],
            ['1','Website','https://www.simbiat.dev',],
            ['1','Signature','<a href="https://www.simbiat.dev">Awesome website</a>'],
            ['1','Avatar','https://media.kitsu.io/users/avatars/41172/large.jpg'],
            ['1','Favorite color','006E72'],
    ]
);

echo (new \Simbiat\array2table)->setIdPrefix('sem_nonedit')->setCaption('Semantic, non-editable')->setFooter(['#func_sum','',''])->setCurrencyCode('USD ')->setCurrencyPrecision(2)->setCurrencyFraction(true)->setCheckbox(true)->setChecked(true)->setEditable(false)->setTextareaSetting('cols', '20')->setTextareaSetting('rows', '5')->setTypes(['number','string',['text','password','tel','date', 'time', 'datetime', 'seconds', 'bytes', 'price', 'checkbox', 'email', 'url', 'html', 'img', 'color']])->generate(
    [
            ['Points'=>'1','Field'=>'Login','Value'=>'Simbiat'],
            ['1','Password','Simbiat'],
            ['1','Telephone','+74991752327'],
            ['1','Date of birth','12-05-1989'],
            ['1','Current time',time(),],
            ['1','Last login',time(),],
            ['1','Seconds','123456',],
            ['1','Image size','1234567',],
            ['1','Salary','123456',],
            ['1','Are you a robot?','No',],
            ['1','Email','simbiat@outlook.com',],
            ['1','Website','https://www.simbiat.dev',],
            ['1','Signature','<a href="https://www.simbiat.dev">Awesome website</a>'],
            ['1','Avatar','https://media.kitsu.io/users/avatars/41172/large.jpg'],
            ['1','Favorite color','006E72'],
    ]
);

echo (new \Simbiat\array2table)->setIdPrefix('nonsem_nonedit')->setCaption('Non-semantic, non-editable')->setSemantic(false)->setStyling(true)->setFooter(['#func_sum','',''])->setCurrencyCode('USD ')->setCurrencyPrecision(2)->setCurrencyFraction(true)->setCheckbox(true)->setChecked(true)->setEditable(false)->setTextareaSetting('cols', '20')->setTextareaSetting('rows', '5')->setTypes(['number','string',['text','password','tel','date', 'time', 'datetime', 'seconds', 'bytes', 'price', 'checkbox', 'email', 'url', 'html', 'img', 'color']])->generate(
    [
            ['Points'=>'1','Field'=>'Login','Value'=>'Simbiat'],
            ['1','Password','Simbiat'],
            ['1','Telephone','+74991752327'],
            ['1','Date of birth','12-05-1989'],
            ['1','Current time',time(),],
            ['1','Last login',time(),],
            ['1','Seconds','123456',],
            ['1','Image size','1234567',],
            ['1','Salary','123456',],
            ['1','Are you a robot?','No',],
            ['1','Email','simbiat@outlook.com',],
            ['1','Website','https://www.simbiat.dev',],
            ['1','Signature','<a href="https://www.simbiat.dev">Awesome website</a>'],
            ['1','Avatar','https://media.kitsu.io/users/avatars/41172/large.jpg'],
            ['1','Favorite color','006E72'],
    ]
);

以下是代码的作用

  1. 使用(new \Simbiat\array2table)创建新对象。显然，在之前需要加载库。
  2. 可选地设置元素的ID和类的prefix，使用setIdPrefix('prefix')。如果页面上有多个这样的表格，如sample.html，则非常有用。
  3. 可选地设置表格的caption，使用setCaption('caption')。如果设置了此选项，则会在表格中添加<caption></caption>（如果它是语义的）或相应的<div></div>（如果它不是）。这基本上是表格的名称。
  4. 对于非语义表格，我们使用setSemantic(false)。这会强制使用<div></div>元素，而不是常规（语义）表格元素（table、td、tr、th等）。在创建实际表格时，建议使用语义方法（因此默认为true），但在某些情况下，您可能希望使用<div></div>。
  5. 可选地启用非语义方法的<div></div>元素的基本样式，使用setStyling(true)。这将添加内联style属性，使非语义表格看起来更像其语义对应物。样式基于编写时的WebKit样式表。
  6. 可选地使用setFooter(['','',''])设置footer。如果设置了此选项，则会在表格中添加<footer></footer>（如果它是语义的）或相应的<div></div>（如果它不是）。这将出现在表格底部的行。如果设置了，其长度将与数据的列数进行比较，如果不同，则抛出异常。footer可以与setFooterHeader(true)一起使用，以重复header。在sample.html的情况下，我们还使用#func_sum计算相应列的值（总和）。
  7. 可选地使用setCurrencyCode('USD ')设置currency值的货币。在值的末尾添加空格将货币放置在值之前。默认为''，即空字符串。
  8. 可选地使用setCurrencyPrecision(2)为currency值设置precision。这确定了小数点后的位数。默认值为2。
  9. 可选地使用setCurrencyFraction(true)设置currency值的初始格式。如果true，转换器将期望值是“分数”，例如美元的便士，因此将值的最后两位视为便士并将它们放在小数点之后。如果false，则期望浮点数并将其转换为浮点数。
  10. 可选地使用setCheckbox(true)为每个条目添加复选框。当您想允许用户删除某些条目时，这可能很有用。使用setChecked(true)将其设置为选中。
  11. 可选地使用setEditable(true)使表格的值可编辑。这将使用适当的<input>元素替换值。
  12. 可选地使用setTextareaSetting('cols', '20')>setTextareaSetting('rows', '5')调整<textarea>元素的大小。
  13. 使用setTypes(['number','string',['text','password','tel','date', 'time', 'datetime', 'seconds', 'bytes', 'price', 'checkbox', 'email', 'url', 'html', 'img', 'color']])设置值类型。在示例中，前两列（数组元素）具有一个适用于其中所有值的类型。实际上，它们都不是列表中支持的类型，因此它们将转换为常规的<span></span>元素。第三列使用一个包含每个行单独类型的类型数组。这不是必需的，这只是为了示例目的，以展示所有当前支持的类型。必须有与实际数据行相同数量的类型，否则将抛出异常。
  14. 实际上使用以下方法生成表格：
generate(
    [
            ['Points'=>'1','Field'=>'Login','Value'=>'Simbiat'],
            ['1','Password','Simbiat'],
            ['1','Telephone','+74991752327'],
            ['1','Date of birth','12-05-1989'],
            ['1','Current time',time(),],
            ['1','Last login',time(),],
            ['1','Seconds','123456',],
            ['1','Image size','1234567',],
            ['1','Salary','123456',],
            ['1','Are you a robot?','No',],
            ['1','Email','simbiat@outlook.com',],
            ['1','Website','https://www.simbiat.dev',],
            ['1','Signature','<a href="https://www.simbiat.dev">Awesome website</a>'],
            ['1','Avatar','https://media.kitsu.io/users/avatars/41172/large.jpg'],
            ['1','Favorite color','006E72'],
    ]

“外部”数组中的每个“内部”数组代表一行，而“内部”数组中的每个元素则代表相应的列。在示例中，第一行使用关联数组作为可选的标题值（创建<header></header>）。作为替代，可以使用setHeader([])达到相同的效果。

数据类型

设置