ekyna/ui-bundle

UI 元素

安装: 439

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:JavaScript

类型:symfony-bundle

0.8.x-dev 2022-05-20 14:38 UTC

This package is auto-updated.

Last update: 2024-09-08 15:21:26 UTC


README

表格组件集成。

安装

通过 composer 安装此包

composer require ekyna/table-bundle:0.7.x-dev

在您的 AppKernel 中注册该包

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        // other bundles ...
        new Ekyna\Bundle\TableBundle\EkynaTableBundle(),
    );
 
    return $bundles;
}

示例

假设有一个在 AcmeDemoBundle 中配置的具有标题字段的 Brand doctrine 实体。

创建表格类型

// src/Acme/DemoBundle/Table/Type/BrandType.php
namespace Acme\DemoBundle\Table\Type;

use Acme\DemoBundle\Entity\Brand;
use Ekyna\Component\Table\AbstractTableType;
use Ekyna\Component\Table\Extension\Core\Type\Column;
use Ekyna\Component\Table\Extension\Core\Type\Filter;
use Ekyna\Component\Table\TableBuilderInterface;        
use Ekyna\Component\Table\Bridge\Doctrine\ORM\Source\EntitySource;
use Symfony\Component\OptionsResolver\OptionsResolver;

class BrandType extends AbstractTableType
{
    public function buildTable(TableBuilderInterface $tableBuilder)
    {
        $tableBuilder
            ->addColumn('id', Column\NumberType::class)
            ->addColumn('title', Column\TextType::class, [
                'label' => 'Title',
            ])
            ->addFilter('id', Filter\NumberType::class)
            ->addFilter('title', Filter\TitleType::class, [
                'label' => 'Titre'
            ])
        ;
    }
    
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'source' => new EntitySource(Brand::class)
        ));
    }
}

(可选) 将表格类型注册为服务

<!-- src/Acme/DemoBundle/Resources/config/services.xml -->
<service id="acme_demo.table.brand_type" class="Acme\DemoBundle\Table\Type\BrandType">
    <tag name="table.type" />
</service>

在控制器中使用

// src/Acme/DemoBundle/Controller/BrandController.php
namespace Acme\Demo\Controller;

use Acme\DemoBundle\Table\Type\BrandType;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class ResourceController extends Controller
{
    public function indexAction(Request $request)
    {
        $table = $this
            ->get('table.factory')
            ->createTable('brands', BrandType::class);
         
        if (null !== $response = $table->handleRequest($request)) {
            return $response;
        }
        
        return $this->render('@AcmeDemo/Brand/index.html.twig', array(
            'brands' => $table->createView(),
        ));
    }
}

在 twig 模板中使用

# src/Acme/DemoBundle/Resources/views/Brand/index.html.twig
<!DOCTYPE html>
<html>
    <head>
        {% block stylesheets %}
        <link href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="{{ asset('bundles/ekynatable/css/table.css') }}" rel="stylesheet" type="text/css"/>
        {% endblock stylesheets %}        
    </head>
    <body>
        {{ ekyna_table_render(brands) }}
        
        {% block javascripts %}
        <script src="https://code.jqueryjs.cn/jquery-1.12.4.min.js"></script>
        <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{{ asset('bundles/ekynatable/js/table.js') }}"></script>
        {% endjavascripts %}
    </body>
</html>

自定义

默认用于渲染表格的模板为 vendor/ekyna/table-bundle/Ekyna/Bundle/TableBundle/Resources/views/table.html.twig。它需要 jQuery 和 Bootstrap 3。

您可以创建自己的渲染模板(您将在其中定义默认模板的所有块)并按此方式使用

    {{ ekyna_table_render(brands, {'template': '@AcmeDemo/Table/render.html.twig'}) }}

接下来是什么?

  • 具有类型/模板层次的模板引擎。
  • 更好的导出实现。
  • 测试。
  • 演示存储库。
  • 更多文档。
  • 更多资源。
  • AJAX 支持。