EasyAdmin3:可点击的表格行(链接到编辑页面)
EasyAdmin3:可点击的表格行(链接到编辑页面)
提问于 2020-11-25 18:34:56
我不喜欢在索引页(EasyAdmin 3/ symfony 5)上的每个实体的末尾的“编辑”EasyAdmin，我想让表行可点击，它将直接发送到编辑页面。
我想解决方案肯定是使用Javascript，所以我开始：
PHP-文件
class PersonCrudController extends AbstractCrudController {
[...]
public function configureFields(string $pageName): iterable {
[...]
yield TextField::new('fullName', 'Name')->onlyOnIndex()->setCssClass('js-row-action');
[...]
}
[...]
}javascript文件
// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
makeTableRowClickable();
});
function makeTableRowClickable() {
let elements = document.getElementsByClassName('js-row-action');
for (let i = 0; i < elements.length; i++) {
let td = elements[i];
let tr = td.parentNode;
tr.addEventListener("click", function (e) {
alert('click the row, Jack!');
});
}
}公开问题
- 如何生成编辑页面的URL？
- ，如何将包含该URL的数据属性设置为任意(隐藏)字段，以便在javascript?
中使用它。
有什么想法吗？非常感谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-11-26 06:53:19
这是我的解决方案(您必须更新小枝模板)
index.html.twig (我的重写文件)
标识编辑页面的URL，并将链接作为href-属性添加到TR-标记中。
{#
EXAMPLES:
templates/bundles/EasyAdminBundle/layout.html.twig ===> extends '@!EasyAdmin/layout.html.twig'
templates/bundles/EasyAdminBundle/crud/index.html.twig ===> extends '@!EasyAdmin/crud/index.html.twig'
#}
{# DO THIS: the '!' symbol tells Symfony to extend from the original template #}
{% extends '@!EasyAdmin/crud/index.html.twig' %}
{% block table_body %}
{% for entity in entities %}
{% if not entity.isAccessible %}
{% set some_results_are_hidden = true %}
{% else %}
{# generation of the EDIT-link #}
{% set editUrl = ea_url()
.setController(ea.crud.controllerFqcn)
.setAction('edit')
.setEntityId(entity.primaryKeyValue) %}
{# add href-attribute and insert the URL #}
<tr data-id="{{ entity.primaryKeyValueAsString }}" href="{{ editUrl }}">
[...]
{% endblock table_body %}javasript文件
标识href-属性并将用户发送到url。
// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
makeTableRowClickable();
});
function makeTableRowClickable() {
let elements = document.getElementsByClassName('js-row-action');
for (let i = 0; i < elements.length; i++) {
let td = elements[i];
let tr = td.parentNode;
let url = tr.getAttribute('href');
tr.addEventListener("click", function (e) {
location.href = url;
});
}
}crud-控制器(php)
添加一个可以被javascript捕获的css类。
class PersonCrudController extends AbstractCrudController {
[...]
public function configureFields(string $pageName): iterable {
[...]
yield TextField::new('fullName', 'Name')->onlyOnIndex()->setCssClass('js-row-action');
[...]
}
[...]
}仪表板-控制器(php)
将javascript-文件链接到仪表板控制器，使其成为默认的处处。
class DashboardController extends AbstractDashboardController
{
[...]
public function configureAssets(): Assets {
$assets = parent::configureAssets();
$assets->addJsFile('js/row_clickable.js');
return $assets;
}
[...]
}玩得开心!
Stack Overflow用户
发布于 2021-03-23 12:31:29
我找到了另一种解决方案，可以将链接中的文本转换为javascript，并将yo转换为编辑URL。
public function configureFields(string $pageName): iterable
{
return [
TextField::new('firstName')->setCssClass('js-row-action'),..。
public function configureAssets(Assets $assets): Assets
{
return $assets->addJsFile('js/admin.js');
}……
$('.js-row-action').each(function () {
$(this).find('span').html('<a href="#">' + $(this).find('span').text() +
'</a>');
});
$('.js-row-action').click(function () {
window.location.href =
(this).siblings('td.actions').find('a').attr('href');
});Stack Overflow用户
发布于 2021-03-24 12:36:55
我在一个jquery指令中改进了代码分组：
$('.js-row-action').each(function () {
$(this).find('span').html('<a href="' +
$(this).siblings('td.actions').find('a').attr('href') + ' ">' +
$(this).find('span').text() + '</a>');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65010784
复制相关文章
相似问题
腾讯云开发者
