fsi/datagrid

FSi DataGrid 组件

2.1.0 2021-02-09 14:19 UTC

README

通过使用特殊的列对象来展示数据源中的项目(集合)的组件。在Web应用程序中,显示对象列表是最常见的任务之一,可能也是最容易的任务之一,所以您可能会问这个组件如何帮助您?

FSi DataGrid 组件允许您创建一个动作来处理显示应用程序中所有类型的列表,而不需要重复代码。这对于所有类型的后台面板生成器非常有用。

基本用法

示例代码比一千个字还要多,所以让我们开始吧!

在您显示数据之前,您需要将列添加到 DataGrid 组件中。列通过使用 DataMappers 从对象中提取数据(它们将在后面进行描述)。

想象一个我们需要显示新闻列表的场景。列表必须包含如下信息:

  • 新闻 ID
  • 新闻标题
  • 作者姓名、姓氏和电子邮件
  • 发布日期
  • 一些基本操作,如编辑和删除

因此,我们应该得到一个类似以下的表格

这是我们的新闻对象。

<?php

namespace FSi\SiteBundle\Entity\News;

class News
{
    /**
     * @var integer
     */
    protected $id;

    /**
     * @var string
     */
    protected $title;

    /**
     * @var string
     */
    protected $author_name;

    /**
     * @var string
     */
    protected $author_surname;

    /**
     * @var string
     */
    protected $author_email;

    /**
     * @var DateTime
     */
    protected $publication_date;

    public function getId()
    {
        return $this->id;
    }

    public function getTitle()
    {
        return $this->title;
    }

    public function getAuthorName()
    {
        return $this->author_name;
    }

    public function getAuthorSurname()
    {
        return $this->author_surname;
    }

    public function getAuthorEmail()
    {
        return $this->author_email;
    }

    public function getPublicationDate()
    {
        return $this->publication_date;
    }

    /*
    Here we should have setters
    public function setTitle($title)
    public function setAuthorName($name)
    ...
    */
}

假设我们使用 Doctrine ORM,我们可以获取如下列表的对象

<?php

$data = $this->getEntityManager()->getRepository('FSi\SiteBundle\Entity\News')->findAll();

所以,如果我们有数据,我们需要构建网格并将其传递给它。

我们假设 datagrid.factory 是一个包含 DataGridFactory 实例的服务。关于创建 DataGridFactory 和将其列加载到其中的更多信息将在后面进行描述。

<?php

$grid = $this->get('datagrid.factory')->createDataGrid();

DataGrid::addColumn($name, $type = 'text', $options = array());

<?php

$grid->addColumn('id', 'number', array('label' => 'Id'))
     ->addColumn('title', 'text', array('label' => 'News Title'))
     ->addColumn('author', 'text', array(
            'field_mapping' => array(
                'author_name',
                'author_surname',
                'author_email'
            ),
            'value_glue' => '<br/>',
            'label' => 'Author'
        )
    )
    ->addColumn('publication', 'datetime', array(
            'field_mapping' => array('publication_date'),
            'value_format' => 'Y.m.d H:i:s',
            'label' => 'Author'
        )
    )
    ->addColumn('action', 'action', array(
            'label' => 'Actions',
            'field_mapping' => array('id'),
            'actions' => array(
                'edit' => array(
                    'route_name' => '_edit_news',
                    'parameters_field_mapping' => array('id' => 'id'),
                ),
                'delete' => array(
                    'route_name' => '_delete_news',
                    'parameters_field_mapping' => array('id' => 'id'),
                )
            )
        )
    );

好的,现在我们有了网格,是时候创建视图了。这可以通过调用 DataGrid::CreateView() 来完成

<?php

$view = $grid->createView();

$view 是一个实现了 \SeekableIterator\Countable\ArrayAccess 接口的 DataGridView 对象,因此可以轻松访问视图中的每一行。

视图中的每一行都是一个实现了 \SeekableIterator\Countable\ArrayAccess 接口的 DataGridRowView 对象,因此您可以访问行中的每一列。

最后,视图的一部分是列,它是一个具有诸如 getAttributegetValue 和其他一些帮助您构建完美视图的方法的对象。

这里是一个简单的视图实现

<table>
    <tr>
    <?php foreach ($view->getColumns() as $column):?>
        <td><?php echo $column->getLabel(); ?></td>
    <?php endforeach; ?>
    </tr>
    <tr>
    <?php foreach ($view as $row) :?>
    <tr>
        <?php foreach ($row as $column):?>
        <td>
            <?php if ($column->getType() == 'action'): ?>
                <?php foreach ($column->getValue() as $link): ?>
                    <a href="<?php echo $link['url']; ?>"><?php echo $link['anchor']; ?></a>
                <?php endforeach; ?>
            <?php else: ?>
                <?php echo $column->getValue(); ?>
            <?php endif;?>
        </td>
        <?php endforeach; ?>
    </tr>
    <?php endforeach; ?>
</table>

注意!在视图中使用 getColumns 方法和使用直接数组访问之间存在差异。

<?php

$columns = $view->getColumns();
foreach ($columns as $column) {
    // this will give you access to ``HeaderView`` object.
    echo $column->getLabel();
}

// this will give you access to ``CellView`` object.
$cell = $view['name'];
echo $cell->getValue();

安装

本节将描述如何将 datagrid 添加到您的项目中。首先,您需要获取 DataGrid 源代码,我们建议您使用 composer。之后,您需要做一些事情来创建 DataGridFactory,这将最终允许您创建 DataGrid 对象。

以下是组件使用的示例场景

您还可以将 fsi/datagrid 添加到 composer.json 中,并运行 composer.phar updatecomposer.phar install

{
    "require": {
        "fsi/datagrid": "^2.0"
    }
}

测试

安装 PHPUnit 要运行 DataGrid 的测试,您应该安装开发包,并使用以下命令运行测试

    $ php composer.phar update
    $ phpunit

扩展

扩展使 DataGrid 组件变得极其灵活,它们高度受到 SymfonyForm 扩展的启发。

有两种类型的扩展。

  • DataGrid 扩展
  • DataGrid 列扩展

DataGrid 扩展用于提供新的列类型、事件订阅者以及现有列类型的新选项。

DataGrid 列扩展的目的是向现有列类型添加新功能。

每个 DataGrid 列扩展都必须由 DataGrid 扩展加载。将扩展加载到 DataGrid 中实际上就是在 DataGridFactory 中注册它。

内置扩展类型

(您可以在 doc/en/extensions 文件夹中找到一些这些扩展的文档。)

  • 核心
  • Doctrine
  • Gedmo

内置列类型

(您可以在 doc/en/columns 文件夹中找到类型文档。)

内置可用的列选项

            |                |value_format   | value_format    | value_format          |
            |                |editable       | collection_glue | editable              |
            |                |form_options   |                 | form_options          |
            |                |form_type      |                 | form_type             |
            |                |empty_value    |                 | empty_value           |
            |                |true_value     |                 | datetime_format       |
            |                |false_value    |                 | input_type            |
            |                |               |                 | field_mapping_format  |
            |                |               |                 | display_order         |