我不喜欢索引页面（EasyAdmin 3 / symfony 5）上每个实体末尾的“编辑”按钮，我希望表行可单击，它将直接将我发送到编辑-页。
我想解决方案必须使用Javascript，所以我开始：
class PersonCrudController extends AbstractCrudController {
[...]
public function configureFields(string $pageName): iterable {
[...]
yield TextField::new('fullName', 'Name')->onlyOnIndex()->setCssClass('js-row-action');
[...]
}
[...]
}
// 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 并将链接作为 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 %}
识别 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;
});
}
}
添加一个可以被javascript捕获的CSS类
class PersonCrudController extends AbstractCrudController {
[...]
public function configureFields(string $pageName): iterable {
[...]
yield TextField::new('fullName', 'Name')->onlyOnIndex()->setCssClass('js-row-action');
[...]
}
[...]
}
将 javascript 文件链接到仪表板控制器，使其在任何地方都默认为
class DashboardController extends AbstractDashboardController
{
[...]
public function configureAssets(): Assets {
$assets = parent::configureAssets();
$assets->addJsFile('js/row_clickable.js');
return $assets;
}
[...]
}
玩得开心！
为我工作。 Symfony 6.1、EasyAdminBundle 4
在 CRUD 控制器中（PHP）
公共函数configureFields（字符串$ pageName）：可迭代
{
//....
产生 IdField::new('id')->onlyOnIndex()
->setTemplatePath('admin/field/linkedit.html.twig');
产生 TextField::new('anyfield')->setLabel("标题")
->setTemplatePath('admin/field/linkedit.html.twig');
//....
}
模板（树枝）
{# admin/field/linkedit.html.twig #}
{% 设置 editUrl = ea_url()
.setController(ea.crud.controllerFqcn)
.setAction('编辑')
.setEntityId(entity.primaryKeyValue) %}
{{ 字段.值 }}
此答案中使用的“editUrl”变量https://stackoverflow.com/a/65017290/19516399
我找到了一种替代解决方案，可以转换链接中的文本，然后 javascript 查找并将您带到编辑 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');
});
我改进了代码分组全部在一个 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>');
});
纯javascript版本
for (let [key, element] of Object.entries(document.getElementsByClassName('edit-entity'))) {
element.innerHTML = '<a href="'+element.parentElement.querySelector('td.actions a').getAttribute('href')+'">'+element.innerHTML+'</a>';
}
CrudController 配置字段
yield Field::new('column')->setCssClass('edit-entity');
感谢您的鼓舞人心的帖子。这是我使用纯 JavaScript 的解决方案：
使用另一个字段作为编辑链接
例如将“名称”链接到编辑操作，而不是单独的“编辑”链接
// src/Controller/Admin/FooCrudController.php
public function configureFields(string $pageName): iterable
{
// Add the trigger css class name:
yield TextField::new('name')->setCssClass('use-as-edit-link');
...
}
public function configureAssets(): Assets
{
$assets = parent::configureAssets();
$assets->addJsFile('js/easyadmin/move-edit-link.js');
return $assets;
}
// /public/js/easyadmin/move-edit-link.js
/* jshint esversion: 6 */
document.addEventListener("DOMContentLoaded", function(event)
{
// Remove the "edit" link and link the field with css class 'use-as-edit-link' instead
// Get all elements with class "action-edit"
const editLinks = document.querySelectorAll('.action-edit');
// Loop through each edit link
editLinks.forEach(editLink => {
// Get the href attribute of the current edit link
const href = editLink.getAttribute('href');
// Hide the original edit link cell by setting its style to "display: none;"
editLink.style.display = 'none';
// Find the closest parent row of the edit link
const row = editLink.closest('tr');
// Find the element with class "use-as-edit-link" within the same row
const useAsEditLink = row.querySelector('.use-as-edit-link');
// Update the innerHTML of the use-as-edit-link element to create a link
useAsEditLink.innerHTML = `<a href="${href}">${useAsEditLink.innerHTML}</a>`;
});
});