README

文档和演示主页: http://www.table-bundle.com/

此组件提供了一个简单的方式来基于 Symfony 生成和管理表格。它还允许

• 灵活性
• 分页（自动）
• 搜索（自动）
• 排序（自动）
• 主题化
• 扩展
• 子表格（自动）
• 行选择（自动）
• 导出（PDF, XSL, CSV）（自动）

安装

1. 下载 TableBundle
2. 启用组件
3. 创建/自定义新的列类型扩展
4. 子表格
5. 示例
6. 结果 & 截图

下载 TableBundle

这可以通过多种方式完成，具体取决于您的偏好。第一种方法是标准的 Symfony2 方法。

使用 Composer

在您的 composer.json 中添加 TableBundle

{
    "require": {
        "emc/table-bundle": "*"
    }
}

现在，通过运行以下命令让 composer 下载组件

$ php composer.phar update emc/table-bundle

使用子模块

如果您更愿意使用 git 子模块，请运行以下命令

$ git submodule add https://github.com/chafiq/TableBundle.git vendor/emc/table-bundle/EMC/TableBundle/
$ git submodule update --init

注意，使用子模块需要在自动加载器中手动注册 EMC 命名空间

<?php
// app/autoload.php

$loader->registerNamespaces(array(
    // ...
    'EMC' => __DIR__.'/../vendor/bundles',
));

启用组件

最后，

在内核中启用组件

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new EMC\TableBundle\EMCTableBundle(),
    );
}

启用路由配置

# app/config/routing.yml
emc_table:
    resource: "@EMCTableBundle/Resources/config/routing.yml"
    prefix:   /

依赖

• jQuery >= v1.4.2 : https://jqueryjs.cn/download/
• emc/xmlhttprequest-bundle : 3.0

创建/自定义新的列类型扩展

PHP : 列类型类

<?php
namespace Acme\MyBundle\Table\Column;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class CustomType extends ColumnType {
    public function buildView(array &$view, ColumnInterface $column, array $data, array $options) {
        parent::buildView($view, $column, $data, $options);
        /* Add you column data view here. You can access to them in the twig extension widget */
    }
    public function setDefaultOptions(OptionsResolverInterface $resolver) {
        parent::setDefaultOptions($resolver);
        /* define you parameters here */
    }
    public function getName() {
        return 'custom';
    }
}

Twig : 列类型模板

{# Acme/MyBundle/Resources/views/Table/Column/custom.html.twig #}
{% block custom_widget %}
    {# here you can edit the content of TD element (Cell). #}
{% endblock %}

配置 : 列类型服务

# Acme/MyBundle/Resources/config/services.yml
services:
    ...
    my_custom_column_type:
        class: Acme\MyBundle\Table\Column\CustomType
        tags:
            -  { name: column.type, alias: custom }

子表格

控制器代码

        /* Controller */
        ...
        $table = $factory->create(new MyTableType(), null, array(
                        ...
                        'caption' => 'My sub table example',
                        'subtable'  => new MySubTableType(),
                        'subtable_params'   => array('cityId' => 'c.id'),
                        'subtable_options'  => array( /* can take the same options as the root table */ )
                        ...
      );

表格类型代码

<?php

namespace Acme\MyBundle\Table\Type;

use EMC\TableBundle\Table\Type\TableType;
use EMC\TableBundle\Table\TableBuilderInterface;
use Doctrine\Common\Persistence\ObjectManager;

class MySubTableType extends TableType {
    
    public function buildTable(TableBuilderInterface $builder, array $options) {
        $builder->add('store', 'text', array(
            'params' => array('ci.name'),
            'title' => 'Center of interest',
            'allow_filter' => true,
            'allow_sort' => true
        ));

        $builder->add('address', 'text', array(
            'params' => array('ci.address', 'ci.zipcode', 'c.name'),
            'format' => '%s %s %s',
            'title' => 'Address',
            'allow_filter' => true,
            'allow_sort' => true
        ));
        
        $builder->add('delete', 'button', array(
            'icon' => 'remove',
            'attrs' => class('attrs' => 'btn-xs')
        ));

        $builder->add('add', 'button', array(
            'icon' => 'plus',
            'attrs' => class('attrs' => 'btn-xs')
        ));
    }

    public function getName() {
        return 'my-sub-table';
    }

    public function getQueryBuilder(ObjectManager $entityManager, array $params) {
        return $entityManager
                    ->getRepository('AcmeMyBundle:CenterInterest')
                        ->createQueryBuilder('ci')
                        ->innerJoin('ci.city', 'c')
                        ->where('c.id = :cityId')
                        ->setParameter('cityId', $params['cityId']); /* this parameter was defined in the subtable_options. $params is poputated in the TableType::buildSubtableParams and are passed to this method */
    }
}

    

示例

假设我们有两个数据库表

• city : #id, name, createdAt, stateid
• state : #id, name

控制器代码

        use Symfony\Component\HttpFoundation\Request;
        use Acme\MyBundle\Table\Type\MyTableType

        public function indexAction(Request $request) {
            
            /* @var $factory \EMC\TableBundle\Table\TableFactory */
            $factory = $this->get('table.factory');
          
            $table = $factory   ->create(
                                    new MyTableType(),
                                    null,
                                    array('caption' => 'My table example')
                                )
                                ->getTable();
          
          return $this->render('AcmeMyBundle:Table:index.html.twig', array('table' => $table));
        }

模板代码

...
    {% stylesheets 'bundles/emctable/css/style.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

    {% javascripts 'bundles/emctable/js/EMCTable.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <div class="container">{{ table(table) }}</div>
...

表格类型代码

<?php

namespace Acme\MyBundle\Table\Type;

use EMC\TableBundle\Table\Type\TableType;
use EMC\TableBundle\Table\TableBuilderInterface;
use Doctrine\Common\Persistence\ObjectManager;

class MyTableType extends TableType {
    
    public function buildTable(TableBuilderInterface $builder, array $options) {
        $builder->add('id', 'anchor', array(
            'route' => 'edit_route',
            'params' => array('id' => 'c.id'),
            'format' => '#%s',
            'title' => '#',
            'allow_sort' => true
        ));

        $builder->add('state', 'text', array(
            'params' => array('s.name'),
            'format' => '%s',
            'title' => 'State',
            'allow_filter' => true,
            'allow_sort' => true
        ));

        $builder->add('city', 'text', array(
            'params' => array('c.name', 'c.id'),
            'format' => '%s (#%d)',
            'title' => 'City',
            'allow_filter' => true,
            'allow_sort' => true
        ));

        $builder->add('createdAt', 'datetime', array(
            'params' => array('t.createdAt'),
            'title' => 'Date',
            'allow_sort' => true
        ));

        $builder->add('delete', 'button', array(
            'icon' => 'remove',
            'text' => 'Delete',
            'attrs' => class('attrs' => 'btn-xs')
        ));

        $builder->add('add', 'button', array(
            'icon' => 'plus',
            'attrs' => class('attrs' => 'btn-xs')
        ));

        $builder->add('status', 'icon', array(
            'params' => array('c.id'),
            'format' => function($id) { return $id % 2 ? 'star' : 'star-o'; }
        ));

        $builder->add('pdf', 'image', array(
            'asset_url' => 'bundles/acmesandbox/images/pdf.jpg'
        ));
    }

    public function getName() {
        return 'my-table';
    }

    public function getQueryBuilder(ObjectManager $entityManager, array $options) {
        return $entityManager
                    ->getRepository('AcmeMyBundle:City')
                        ->createQueryBuilder('c')
                        ->innerJoin('t.state', 's');
    }
}

    

结果 & 截图

表格

WebProfiler 工具栏

WebProfiler 内容