blocks|key|4322806|text|这是我的解决方案(您必须更新小枝模板)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4322807|index.html.twig+(我的重写文件)|4322808|标识编辑页面的URL，并将链接作为href-属性添加到TR-标记中。|4322809|{#
++++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+#}
{%25+extends+'@!EasyAdmin/crud/index.html.twig'+%25}


{%25+block+table_body+%25}

++++{%25+for+entity+in+entities+%25}
++++++++{%25+if+not+entity.isAccessible+%25}
++++++++++++{%25+set+some_results_are_hidden+=+true+%25}
++++++++{%25+else+%25}

++++++++++++{#+generation+of+the+EDIT-link+#}
++++++++++++{%25+set+editUrl+=+ea_url()
++++++++++++++++++++.setController(ea.crud.controllerFqcn)
++++++++++++++++++++.setAction('edit')
++++++++++++++++++++.setEntityId(entity.primaryKeyValue)+%25}


++++++++++++{#+add+href-attribute+and+insert+the+URL+#}
++++++++++++<tr+data-id="{{+entity.primaryKeyValueAsString+}}"+href="{{+editUrl+}}">

[...]

{%25+endblock+table_body+%25}|code-block|syntax|javascript|4322810|javasript文件|4322811|标识href-属性并将用户发送到url。|4322812|//+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%2B%2B)+{
++++++++let+td++=+elements[i];
++++++++let+tr++=+td.parentNode;
++++++++let+url+=+tr.getAttribute('href');

++++++++tr.addEventListener("click",+function+(e)+{
++++++++++++location.href+=+url;
++++++++});
++++}
}|4322813|crud-控制器(php)|4322814|添加一个可以被javascript捕获的css类。|4322815|class+PersonCrudController+extends+AbstractCrudController+{
+++[...]
+++
++++public+function+configureFields(string+$pageName):+iterable+{
++++++++[...]
++++++++yield+TextField::new('fullName',++'Name')->onlyOnIndex()->setCssClass('js-row-action');
++++++++[...]
++++}

+++[...]
}|4322816|仪表板-控制器(php)|4322817|将javascript-文件链接到仪表板控制器，使其成为默认的处处。|4322818|class+DashboardController+extends+AbstractDashboardController
{
++++[...]
++++public+function+configureAssets():+Assets+{
++++++++$assets+=+parent::configureAssets();
++++++++$assets->addJsFile('js/row_clickable.js');

++++++++return+$assets;
++++}
++++[...]
}|4322819|玩得开心!|4322820|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|1C|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|11|5|H|7|1I|8|@]|9|@]|A|$I|J]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

<p>Here is my solution (you have to update the twig-template)</p>
<h2>index.html.twig (my overriding file)</h2>
<p>identify the URL for the edit-page and add the link as href-attribute into the TR-tag</p>
<pre><code>{#
    EXAMPLES:
    templates/bundles/EasyAdminBundle/layout.html.twig      ===&gt; extends '@!EasyAdmin/layout.html.twig'
    templates/bundles/EasyAdminBundle/crud/index.html.twig  ===&gt; 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 #}
            &lt;tr data-id=&quot;{{ entity.primaryKeyValueAsString }}&quot; href=&quot;{{ editUrl }}&quot;&gt;

[...]

{% endblock table_body %}

</code></pre>
<h2>javasript-file</h2>
<p>identify the href-attribute and send user to url</p>
<pre><code>// call functions once page is loaded
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    makeTableRowClickable();
});

function makeTableRowClickable() {
    let elements = document.getElementsByClassName('js-row-action');

    for (let i = 0; i &lt; elements.length; i++) {
        let td  = elements[i];
        let tr  = td.parentNode;
        let url = tr.getAttribute('href');

        tr.addEventListener(&quot;click&quot;, function (e) {
            location.href = url;
        });
    }
}
</code></pre>
<h2>crud-controller (php)</h2>
<p>add a css-class that can be catched by javascript</p>
<pre><code>class PersonCrudController extends AbstractCrudController {
   [...]
   
    public function configureFields(string $pageName): iterable {
        [...]
        yield TextField::new('fullName',  'Name')-&gt;onlyOnIndex()-&gt;setCssClass('js-row-action');
        [...]
    }

   [...]
}
</code></pre>
<h2>dashboard-controller (php)</h2>
<p>link the javascript-file to the dashboard-controller to have it as default everywhere</p>
<pre><code>class DashboardController extends AbstractDashboardController
{
    [...]
    public function configureAssets(): Assets {
        $assets = parent::configureAssets();
        $assets-&gt;addJsFile('js/row_clickable.js');

        return $assets;
    }
    [...]
}
</code></pre>
<p>Have fun!</p>


blocks|key|2939179|text|我找到了另一种解决方案，可以将链接中的文本转换为javascript，并将yo转换为编辑URL。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2939180|public+function+configureFields(string+$pageName):+iterable
{
++++return+[
++++++++TextField::new('firstName')->setCssClass('js-row-action'),|code-block|syntax|javascript|2939181|..。|2939182|public+function+configureAssets(Assets+$assets):+Assets
{
++++return+$assets->addJsFile('js/admin.js');
}|2939183|……|2939184|$('.js-row-action').each(function+()+{
++++$(this).find('span').html('<a+href="#">'+%2B+$(this).find('span').text()+%2B+
'</a>');
});

$('.js-row-action').click(function+()+{
++++window.location.href+=++
++++(this).siblings('td.actions').find('a').attr('href');
});|2939185|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I found an alternative solution that converts the text in a link, and javascript find and takes yo to the edit URL.</p>
<pre><code>public function configureFields(string $pageName): iterable
{
    return [
        TextField::new('firstName')-&gt;setCssClass('js-row-action'),
</code></pre>
<p>...</p>
<pre><code>public function configureAssets(Assets $assets): Assets
{
    return $assets-&gt;addJsFile('js/admin.js');
}
</code></pre>
<p>....</p>
<pre><code>$('.js-row-action').each(function () {
    $(this).find('span').html('&lt;a href=&quot;#&quot;&gt;' + $(this).find('span').text() + 
'&lt;/a&gt;');
});

$('.js-row-action').click(function () {
    window.location.href =  
    (this).siblings('td.actions').find('a').attr('href');
});
</code></pre>


blocks|key|4322857|text|我在一个jquery指令中改进了代码分组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4322858|$('.js-row-action').each(function+()+{
++++$(this).find('span').html('<a+href="'+%2B+
$(this).siblings('td.actions').find('a').attr('href')+%2B+'+">'+%2B+
$(this).find('span').text()+%2B+'</a>');
});|code-block|syntax|javascript|4322859|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I improved the code grouping all in one jquery instruction:</p>
<pre><code>$('.js-row-action').each(function () {
    $(this).find('span').html('&lt;a href=&quot;' + 
$(this).siblings('td.actions').find('a').attr('href') + ' &quot;&gt;' + 
$(this).find('span').text() + '&lt;/a&gt;');
});
</code></pre>


blocks|key|38384|text|纯javascript版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38385|for+(let+[key,+element]+of+Object.entries(document.getElementsByClassName('edit-entity')))+{++++++++
++++element.innerHTML+=+'<a+href="'%2Belement.parentElement.querySelector('td.actions+a').getAttribute('href')%2B'">'%2Belement.innerHTML%2B'</a>';
}|code-block|syntax|javascript|38386|CrudController+configureFields|38387|yield+Field::new('column')->setCssClass('edit-entity');|38388|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>pure javascript version</p>
<pre><code>for (let [key, element] of Object.entries(document.getElementsByClassName('edit-entity'))) {        
    element.innerHTML = '&lt;a href=&quot;'+element.parentElement.querySelector('td.actions a').getAttribute('href')+'&quot;&gt;'+element.innerHTML+'&lt;/a&gt;';
}
</code></pre>
<p>CrudController configureFields</p>
<pre><code>yield Field::new('column')-&gt;setCssClass('edit-entity');
</code></pre>


<p>I don't like the &quot;edit&quot;-button at the end of each entity on the INDEX-Page (EasyAdmin 3 / symfony 5) and I would like to have the table-row clickable and it shall send me directly to the EDIT-page.</p>
<p>I guess the solution must be using Javascript, so I started:</p>
<h2>PHP-file</h2>
<pre><code>class PersonCrudController extends AbstractCrudController {
   [...]
   
    public function configureFields(string $pageName): iterable {
        [...]
        yield TextField::new('fullName',  'Name')-&gt;onlyOnIndex()-&gt;setCssClass('js-row-action');
        [...]
    }

   [...]
}
</code></pre>
<h2>javascript-file</h2>
<pre><code>// call functions once page is loaded
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    makeTableRowClickable();
});

function makeTableRowClickable() {
    let elements = document.getElementsByClassName('js-row-action');

    for (let i = 0; i &lt; elements.length; i++) {
        let td = elements[i];
        let tr = td.parentNode;

        tr.addEventListener(&quot;click&quot;, function (e) {
            alert('click the row, Jack!');
        });
    }
}
</code></pre>
<h2>open questions</h2>
<ol>
<li>How do I generate the URL of the EDIT-page?</li>
<li>How can I set a data attribute with the URL into any (hidden) field so that I can use it in the javascript?</li>
</ol>
<p>Any ideas? Many thanks!</p>


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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我不喜欢在索引页(EasyAdmin 3/ symfony 5)上的每个实体的末尾的“编辑”EasyAdmin，我想让表行可点击，它将直接发送到编辑页面。我想解决方案肯定是使用Javascript，所以我开始：PHP-文件class PersonCrudController extends AbstractCrudCo...

问EasyAdmin3:可点击的表格行(链接到编辑页面)
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问EasyAdmin3:可点击的表格行(链接到编辑页面)EN