EasyAdmin 3：可点击 table 行（link 到编辑页面）

Question

我不喜欢索引页面 (EasyAdmin 3 / symfony 5) 上每个实体末尾的“编辑”按钮，我希望 table 行可点击并且它会将我直接发送到编辑页面。

我猜解决方案必须使用 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 中使用它？

有什么想法吗？非常感谢！

Answer 1

这是我的解决方案（你必须更新树枝模板）

index.html.twig（我的覆盖文件）

确定编辑页面的 URL 并将 link 作为 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）

添加一个css-class可以被javascript

捕获

class PersonCrudController extends AbstractCrudController {
   [...]
   
    public function configureFields(string $pageName): iterable {
        [...]
        yield TextField::new('fullName',  'Name')->onlyOnIndex()->setCssClass('js-row-action');
        [...]
    }

   [...]
}

仪表板控制器（php）

link 将 javascript 文件发送到仪表板控制器，使其在任何地方都成为默认值

class DashboardController extends AbstractDashboardController
{
    [...]
    public function configureAssets(): Assets {
        $assets = parent::configureAssets();
        $assets->addJsFile('js/row_clickable.js');

        return $assets;
    }
    [...]
}

玩得开心！

Answer 2

我找到了一个替代解决方案，可以将文本转换为 link，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');
});

Answer 3

我在一个 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>');
});

EasyAdmin 3：可点击 table 行（link 到编辑页面）

EasyAdmin3: clickable table-row (link to EDIT-page)

javascript

crud

onclick

easyadmin

symfony5