talan / dynamic-form
动态表单组件包
Requires
- php: >=5.3.3
- doctrine/common: >=2.1,<2.4.x-dev
- doctrine/doctrine-fixtures-bundle: >=2.1
- symfony/symfony: >=2.1
- twig/twig: >=1.8,<2.0-dev
Requires (Dev)
- codeclimate/php-test-reporter: dev-master
- mockery/mockery: ~0.9.1
This package is not auto-updated.
Last update: 2024-09-24 04:30:22 UTC
README
使用 kelp404/angular-form-builder 的 Symfony2 动态表单构建器。
##框架
- AngularJS 1.2
- jQuery
- Bootstrap 3
- Angular-validator
- jQuery Datatable
- Angular Datatable
- Angular Form Builder
安装
获取组件包
在您的 composer.json 中添加以下行
// composer.json { "require": { "talan/dynamic-form" : "dev-master" } }
初始化组件包
要开始使用组件包,请在您的应用程序的内核类中注册该组件包
// app/AppKernel.php public function registerBundles() { $bundles = array( // ... new Talan\Bundle\DynamicFormBundle\TalanDynamicFormBundle(), ); )
创建组件包的表
在项目主目录下执行以下命令
$ php app/console doctrine:schema:update --force
$ php app/console doctrine:fixture:load --fixtures=vendor/talan/dynamic-form/Talan/Bundle/DynamicFormBundle/DataFixtures/ORM --append
这将创建8个以 "talan_" 前缀的表,位于您的数据库模式中
- talan_form:存储由后台办公室创建的表单。
- talan_field_type:包含组件包支持的不同的字段类型。
- talan_field:存储与每个创建的表单关联的字段。
- talan_value:存储与表单用户插入的值相关的通用信息。
- talan_string_value:存储输入文本字段的值。
- talan_text_value:存储文本区域字段的值。
- talan_integer_value:存储选择和单选字段的价值。
- talan_array_value:存储复选框字段的值。
导入 TalanDynamicFormBundle 路由文件
TalanDynamicFormBundle 随带默认控制器和视图,使用开发的服务提供后台和前台功能。要激活所需页面,只需导入组件包的路由文件即可
# app/config/routing.yml talan_dynamic_form: resource: "@TalanDynamicFormBundle/Resources/config/routing.yml" prefix: /
当然,您可以添加自己的前缀。
如果您想向控制器添加特定行为或更改显示的页面,只需扩展此组件包,并自己实现控制器或组件包的 twigs 即可。
重写默认的 layout.html.twig
此组件包的布局文件从各种链接中导入 JavaScript 依赖项。因此,我们强烈建议您下载上面提到的所需框架,重写布局文件,并使用资产包含下载的框架。
重写组件包模板的最简单方法是在您的 app/Resources 文件夹中放置一个新的模板。要重写位于 TalanDynamicFormBundle 目录中的 Resources/views/layout.html.twig 的布局模板,您应将新的布局模板放置在 app/Resources/TalanDynamicFormBundle/views/layout.html.twig。
以下 Twig 模板文件是可能用于重写的布局文件的示例。
{% extends 'AcmeDemoBundle::layout.html.twig' %} {% block title %}Acme Demo Application{% endblock %} {% block content %} {% block talan_dynamic_form_content %}{% endblock %} {% endblock %}
在此模板中需要注意的主要事项是名为 talan_dynamic_form_content 的块。这是从每个不同组件包的操作中显示内容的地方,因此您必须确保在要使用的布局文件中包含此块。
添加值所有者提供者
当应用程序的用户提交由该组件包创建的特定表单的值时,这些值应以某种方式与该特定用户相关联。然而,提交值与用户之间的这种联系取决于应用程序的性质。因此,应由开发人员和后台办公室指定将这些元素关联的方式。
本包通过引入ValueOwnerProviderInterface和抽象实现AbstractOwnerProvider,提供了上述功能。
ValueOwnerProviderInterface需要实现3个方法,分别是getValueOwner()、getOwnerListTemplate()和getValueOwnerList($formId)。我们添加了AbstractOwnerProvider类来提供默认的拥有者模板。
因此,通过实现接口或扩展抽象类,然后通过所需标签注入服务,开发者应该能够指定提交的值和用户如何相互关联。
TalanDynamicFormBundle附带两个预实现的ValueOwnerProviderInterface类。它们是AbstractUserValueProvider和SessionValueProvider,后者已声明为服务。
以下是ServiceValueProvider类
class SessionValueProvider extends AbstractValueOwnerProvider { protected $session; protected $em; public function __construct(EntityManager $em,Session $session) { $this->session = $session; $this->em = $em; } /** * (non-PHPdoc) * @see \Talan\Bundle\DynamicFormBundle\Service\ValueOwnerProviderInterface::getValueOwner() */ public function getValueOwner() { return $this->session->getId(); } }
如你所见,唯一需要实现的方法是getValueOwner(),我们注入了session变量以获取用户的会话ID。
要激活会话值提供者,您需要将以下配置添加到您的services.yml中。
# src/Demo/Bundle/DemoBundle/Resources/config/services.yml parameters: talan_dynamic_form.session_provider.class: Talan\Bundle\DynamicFormBundle\Service\Impl\SessionValueProvider services: talan_dynamic_form.session_value_provider: class: "%talan_dynamic_form.session_provider.class%" arguments: ["@doctrine.orm.entity_manager","@session"] tags: - {name: talan_dynamic_form.value_owner_provider, alias: "Session Provider"}
注意,我们将@doctrine.orm.entity_manager和@security作为SessionValueProvider的参数注入,并使用talan_dynamic_form.value_owner_provider标签标记了服务。标记此服务非常重要,因为它允许包将此类识别为ValueOwnerProvider。至于别名,它是创建表单时在后台办公室中显示的标签。
以下是AbstractUserValueProvider类
abstract class AbstractUserValueProvider extends AbstractValueOwnerProvider { protected $security; protected $em; public function __construct(EntityManager $em,SecurityContext $security) { $this->security = $security; $this->em = $em; } /** * (non-PHPdoc) * @see \Talan\Bundle\DynamicFormBundle\Service\ValueOwnerProviderInterface::getValueOwner() */ public function getValueOwner() { if (!$this->security) { throw new \LogicException('The SecurityBundle is not registered in your application.'); } if (null === $token = $this->security->getToken()) { return; } if (!is_object($user = $token->getUser())) { return; } return $user; } }
此类被声明为抽象的,以便每个用户都可以定义自己的两个方法getValueOwnerList()和getOwnerListTemplate()的实现。以下是一个示例实现
class UserValueProvider extends AbstractUserValueProvider { protected $security; protected $em; public function __construct(EntityManager $em, SecurityContext $security) { $this->security = $security; $this->em = $em; } public function getOwnerListTemplate() { return 'TalanUserBundle::connectedUser.html.twig'; } public function getValueOwnerList($formId){ return $this->em->getRepository('TalanUserBundle:User')->findUsersByForm($formId); } }
以下是相应的拥有者列表模板connectedUser.html.twig
{% extends 'TalanDynamicFormBundle:OwnerList:default.html.twig' %}
{% block talan_dynamic_form_owner_table %}
<table datatable class="table table-striped table-bordered" id="ownerList">
<thead>
<tr>
<th>{{ 'dynamicForm.owner.id' | trans }}</th>
<th>{{ 'dynamicForm.owner.fullName' | trans }}</th>
<th>{{ 'dynamicForm.owner.email' | trans }}</th>
<th>{{ 'dynamicForm.owner.phone' | trans }}</th>
<th>{{ 'dynamicForm.bo.actions' | trans }}</th>
</tr>
</thead>
<tbody>
{% for owner in ownerList %}
<tr>
<td>{{ owner.id }}</td>
<td>{{ owner.firstName }} {{ owner.lastName }}</td>
<td>{{ owner.email }}</td>
<td>{{ owner.phone }}</td>
<td>
<a target="_self" title="{{ 'dynamicForm.btn.view' | trans }}" ng-click="setValueOwner('{{ owner.id }}', '{{form.id}}')" href="#">
<i class="glyphicon glyphicon-search" style="color: dodgerblue;"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock talan_dynamic_form_owner_table %}