如何在 Symfony 6 中安装 select2
问题描述 投票：0回答：1
我正在尝试使用 select2 多选框（药丸盒）重新填充表单字段。
我想使用 CDN 安装 select2： https://select2.org/getting-started/installation#using-select2-from-a-cdn
问题是，当我运行我的项目时，看起来它根本没有读取 select2。
以下是我如何将 select2 添加到我的基本模板中：
<!doctype html>
<html lang="en">
<head>
<title>{% block title %}ZZZCG{% endblock %}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="">
<meta name="author" content="Exploring d.o.o.">
<link rel="icon" href="{{ asset('build/images/admin/favicon.ico') }}" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
{{ encore_entry_link_tags('admin') }}
{{ encore_entry_link_tags('tables') }}
{% block stylesheets %}{% endblock %}
</head>
<body data-theme="light">
<div id="body" class="theme-orange">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="m-t-30"><img src="{{ asset('build/images/site/ZZZCG_logo.png') }}" width="40" height="40"
alt="Mooli">
</div>
<p>Molimo Vas sačekajte...</p>
</div>
</div>
<div class="themesetting">
<a href="javascript:void(0);" class="theme_btn" style="display: none"><i class="fa fa-gear fa-spin"></i></a>
<ul class="list-group">
<li class="list-group-item">
<ul class="choose-skin list-unstyled mb-0">
<li data-theme="green">
<div class="green"></div>
</li>
<li data-theme="orange">
<div class="orange"></div>
</li>
<li data-theme="blush">
<div class="blush"></div>
</li>
<li data-theme="cyan" class="active">
<div class="cyan"></div>
</li>
<li data-theme="timber">
<div class="timber"></div>
</li>
<li data-theme="blue">
<div class="blue"></div>
</li>
<li data-theme="amethyst">
<div class="amethyst"></div>
</li>
</ul>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between">
<span>Light Sidebar</span>
<label class="switch sidebar_light">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between">
<span>Gradient</span>
<label class="switch gradient_mode">
<input type="checkbox" checked="">
<span class="slider round"></span>
</label>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between">
<span>Dark Mode</span>
<label class="switch dark_mode">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<li class="list-group-item d-flex align-items-center justify-content-between">
<span>RTL version</span>
<label class="switch rtl_mode">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<div id="wrapper">
<!-- Page top navbar -->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-left">
<div class="navbar-btn">
<a href="#">ZZZCG</a>
<button type="button" class="btn-toggle-offcanvas"><i class="fa fa-align-left"></i></button>
</div>
</div>
<div class="navbar-right">
<div id="navbar-menu">
<ul class="nav navbar-nav">
{% if lang is defined %}
<li class="language-menu hidden-xs">
<img src="{{ asset('build/images/admin/flags/'~lang~'.png') }}" alt="lang"
class="nav-item-flag">
{{ languages[lang].name }}
</li>
{% endif %}
<li class="hidden-xs"><a href="javascript:void(0);" id="btnFullscreen" class="icon-menu"><i
class="fa fa-arrows-alt"></i></a></li>
<li><a href="{{ path('app_logout') }}" class="icon-menu"><i class="fa fa-power-off"></i></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Main left sidebar menu -->
<div id="left-sidebar" class="sidebar">
<a href="#" class="menu_toggle"><i class="fa fa-angle-left"></i></a>
<div class="navbar-brand">
{# <a href="{{ path('admin_default') }}"><img src="{{ asset('build/images/site/ZZZCG_logo.png') }}" #}
{# alt="Logo"></a> #}
<a href="{{ path('admin_default', { 'lang' : lang }) }}"><img
src="{{ asset('build/images/site/ZZZCG_logo.png') }}" alt="Logo"
class="img-fluid logo"><span>ZZZCG</span></a>
<button type="button" class="btn-toggle-offcanvas btn btn-sm float-right"><i
class="lnr lnr-menu fa fa-chevron-circle-left"></i></button>
</div>
<div class="sidebar-scroll">
<div class="user-account">
<div class="user_div">
<img src="{{ asset('build/images/admin/user.png') }}" class="user-photo"
alt="User Profile Picture">
</div>
<div class="dropdown">
<span>Zdravo,</span>
<a href="javascript:void(0);" class="dropdown-toggle user-name" data-toggle="dropdown">
<strong>
{% if app.user.firstName or app.user.lastName %}
{{ app.user.firstName }} {{ app.user.lastName }}
{% else %}
{{ app.user.email }}
{% endif %}
</strong></a>
<ul class="dropdown-menu dropdown-menu-right account vivify flipInY">
<li><a href="{{ path('profile_details') }}"><i class="fa fa-user"></i>Moj Profil</a></li>
<li><a href="{{ path('app_logout') }}"><i class="fa fa-power-off"></i>Odjavite se</a></li>
</ul>
</div>
</div>
<nav id="left-sidebar-nav" class="sidebar-nav">
<ul id="main-menu" class="metismenu animation-li-delay">
<li><a href="{{ path('admin_default', { 'lang': lang }) }}"><i class="fa fa-dashboard"></i>
<span>Pregled</span></a>
</li>
{# <li> #}
{# <a href="#"><i class="fa fa-dashboard"></i> <span>Proizvodi</span></a> #}
{# </li> #}
<li>
<a href="#" class="has-arrow"><i class="fa fa-file-text"></i><span>Stranice</span></a>
<ul>
{% for lang in languages.available %}
<li>
<a href="{{ path('pages_list',{'lang': lang}) }}"><img
src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
class="nav-item-flag">
<span>{{ languages[lang].name }}</span></a>
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#" class="has-arrow"><i class="fa fa-sliders"></i><span>Slideri</span></a>
<ul>
{% for lang in languages.available %}
<li>
<a href="{{ path('sliders_list',{'lang': lang}) }}"><img
src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
class="nav-item-flag">
<span>{{ languages[lang].name }}</span></a>
</li>
{% endfor %}
</ul>
</li>
{% if enable_blog %}
<li>
<a href="#" class="has-arrow"><i class="fa fa-book"></i><span>Aktuelno</span></a>
<ul>
{% for lang in languages.available %}
<li>
<a href="{{ path('blogs_list',{'lang': lang}) }}"><img
src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
class="nav-item-flag">
<span>{{ languages[lang].name }}</span></a>
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#" class="has-arrow"><i class="fa fa-book"></i><span>Aktivnosti</span></a>
<ul>
{% for lang in languages.available %}
<li>
<a href="{{ path('activities_list',{'lang': lang}) }}"><img
src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
class="nav-item-flag">
<span>{{ languages[lang].name }}</span></a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
<li>
<a href="{{ path('gallery_list',{'lang': 'en' }) }}"><i class="fa fa-image"></i><span>Galerije</span></a>
</li>
<li>
<a href="#" class="has-arrow"><i class="fa fa-file"></i><span>Dokumenta</span></a>
<ul>
{% for lang in languages.available %}
<li>
<a href="{{ path('docs_list',{'lang': lang}) }}"><img
src="{{ asset('build/images/admin/flags/'~lang~'.png') }}"
class="nav-item-flag">
<span>{{ languages[lang].name }}</span></a>
</li>
{% endfor %}
</ul>
</li>
<li class="header">Sistem</li>
<li>
<a href="{{ path('users_all_users') }}"><i class="fa fa-user"></i>
<span>Korisnici</span></a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main body part -->
<div id="main-content">
<div class="container-fluid">
{% block body %}{% endblock %}
</div>
</div>
</div>
</div>
{% if hasWysiwyg|default(0) %}
{{ include("admin/tinymceFileUpload.twig") }}
{% endif %}
{{ encore_entry_script_tags('admin') }}
{{ encore_entry_script_tags('tables') }}
{% block javascripts %}{% endblock %}
{% if hasWysiwyg|default(0) %}
<script src="{{ asset('build/vendor/tinymce/jq/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
window['TINYMCE_PATH'] = '{{ asset('build/vendor/tinymce/jquery.tinymce.min.js') }}';
window['TINYMCE_CONTENT_CSS'] = '{{ asset('build/vendor/tinymce/wysiwyg-reset.css') }}';
window['TINYMCE_DEV'] = {{ is_granted('ROLE_DEVELOPER') ? 1 : 0 }};
</script>
<script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/vendor/tinymce/jquery.tinymce.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/vendor/tinymce/tinymce-init.js') }}"></script>
{% endif %}
</body>
</html>
这是我的 create.html.twig 文件，其中的表单（我使用了 select2 文档中给出的示例）：
{% extends 'admin/template.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% set hasWysiwyg = true %}
{% block title %}Kreirajte novu stranicu{% endblock %}
{% block body %}
<div class="row pt-2">
<div class="col-lg-12 col-md-12 col-12">
<div class="card">
<div class="header">
<h2>Kreirajte novu stranicu
{% if lang is defined %}
<span class="pl-2">
<img src="{{ asset('build/images/admin/flags/'~lang~'.png') }}" alt="lang"
class="nav-item-flag">
{{ languages[lang].name }}
</span>
{% endif %}
</h2>
</div>
<div class="body">
{{ form_start(form, {'attr': {'novalidate': 'novalidate'}} ) }}
{{ form_row(form.title, { 'label' : 'Naslov'}) }}
{{ form_row(form.subtitle, { 'label' : 'Podnaslov'}) }}
{{ form_row(form.text, { 'label' : 'Sadržaj'}) }}
{{ form_row(form.children, { 'label' : 'Podstranice'}) }}
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="IL">Illinoise</option>
</select>
<button type="submit" class="btn btn-primary">Kreirajte stranicu</button>
<a href="{{ path('pages_list',{'lang':lang}) }}" class="btn btn-default">Nazad</a>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
{% endblock %}
这是它在我的网站上的显示方式。正如你所看到的，它没有正确显示，我不确定我错过了哪一部分......
这也是我的 TextPage 实体的表单：
<?php
namespace App\Form;
use App\Entity\TextPage;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class TextPageType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('title', TextType::class)
->add('subtitle', TextType::class)
->add('text', WysiwygType::class)
->add('children', EntityType::class, [
'class' => TextPage::class,
'choice_label' => 'title',
'multiple' => TRUE,
'expanded' => FALSE
]);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => TextPage::class,
]);
}
}
我非常感谢您的帮助！
1个回答
0
投票
投票
我解决了这个问题。这是我初始化和声明 CDN 的方式。 CDN 应在 JQuery 之后初始化。
最新问题
- 有没有办法监控我所在的 Discord 服务器中的某些关键字？
- 给定一个以时间戳为索引的数据帧以及包含 ID 和布尔值的 2 列，为每个 ID 获取一个带有转换布尔值的新数据帧
- Python-can bus.recv 缺少一些消息
- NAudio WaveOut 设备 ID
- 使用 Spring Cloud Gateway BFF 为前端做出反应本机 OAuth2 后端
- 在外部模块中使用假定角色时出现问题。如何将提供程序添加到外部模块？
- 错误：与“运算符<<' (operand types are 'QTextStream' and 'const char [3]')
- 在 3D 数组 NetCDF 文件中查找每年的最大值（使用 Pandas 或 xarray 的方法？）
- 无法从 docker 容器内部访问主机上的 quarkus 应用程序
- NodeJS String.indexOf 缓慢，即使索引为 200/1000000
- 启用优化会无缘无故地破坏 Angular 网站
- Spring Security 是否尝试向客户授权公共端点？
- Azure Load ballencer 公共 IP 与 cloudflate 证书
- openapi-spec-validator 无法验证 swagger:2.0 API 规范
- Azure Function Blob 触发器未针对新 Blob 触发
- 创建许多空映射时导致 Java 内存泄漏
- windows 上 nvim 中的 clangd 无法解析标准库
- 为什么异步函数中返回的 Promise.reject 没有被该函数内的 try-catch 块捕获？
- 如何使用Databricks限制Azure AD SPN权限？
- 为什么异步函数中返回的 Promise.reject 没有被该函数内的 try-catch 块捕获？
© www.soinside.com 2019 - 2024. All rights reserved.