[英]Rails - expand table row on click of link_to
in my app that I am building to learn rails and js, I have this case re.在我正在构建以学习 Rails 和 js 的应用程序中,我有这个案例。 to expanding a table row to show a partial.扩展表格行以显示部分。 to help understand, see this image:为了帮助理解,请看这张图片:
The CSS for edit-tag can set to display "none"; edit-tag的 CSS 可以设置为显示“none”; this is the table:这是表:
<table id="tags" class="table table-hover" style="background-color: white; word-wrap: break-word; font-size: 0.9em;" >
<thead>
<tr>
<th>Tagged content</th>
<th>as</th>
<th>in</th>
<th></th>
</tr>
</thead>
<tbody>
<% object.tags.each do |tag| %>
<% unless tag.content.blank? %>
<tr>
<td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
<td><%= tag.tagtype.name %></td>
<td><%= tag.tagtype.typeoftag %></td>
<td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
<tr id='edit-tag'>
<td colspan="5"><%= render 'tags/tag_update' %></td>
</tr>
</tr>
<% end -%>
<% end -%>
</tbody>
I created this function in JS yet it uses ID我在 JS 中创建了这个函数,但它使用了 ID
$(function() {
var DisplayTagEdit = document.getElementById('DisplayTagEdit');
DisplayTagEdit.onclick = function() {
var edittag = document.getElementById('edit-tag');
if (edittag.style.display !== 'none') {
edittag.style.display = 'none';
}
else {
edittag.style.display = 'block'
}
}
});
So my issues are:所以我的问题是:
Use unique data attribute or class related to object'id to identify them, like:使用与 object'id 相关的唯一数据属性或类来标识它们,例如:
<tr data-tag-id='<%= tag.id >' class='show-tag'>
<td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
<td><%= tag.tagtype.name %></td>
<td><%= tag.tagtype.typeoftag %></td>
<td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
</tr>
<tr data-tag-id='<%= tag.id %>' class='edit-tag'>
<td colspan="5"><%= render 'tags/tag_update' %></td>
</tr>
And in js(I use Jquery here):在 js 中(我在这里使用 Jquery):
$(".edit-tag").on("click", function(event) {
var tagId = $(this).data("tagId");
var $showRow = $("tr.show-tag[data-tag-id=" + tagId + "]"); // here you get the references of the row you need.
// do want you want ................
$showRow.toggle();
});
And in Rails, we have "conteng_tag_for", which add the id information to dom element.而在 Rails 中,我们有“conteng_tag_for”,它将 id 信息添加到 dom 元素。
<%= content_tag_for :tr, tag do %>
<td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
<td><%= tag.tagtype.name %></td>
<td><%= tag.tagtype.typeoftag %></td>
<td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
<% end %>
will generate html like:将生成 html 如下:
<tr id='tags_16' class='tags'> <!-- assume tag'id is 16 -->
<td>......</td>
<td>......</td>
<td>......</td>
<td>......</td>
</tr>
This works (including show and hide other rows) generically:这通常有效(包括显示和隐藏其他行):
$("td.show-tag").on("click", function(event) {
var tagId = $(this).data('tagid');
$('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).hide();
$('tr.edit-tag[data-tagid='+tagId+']').toggle();
});
Update更新
Code above uses display: block To use display: table-row (to span the row with one td across all columns) use .css()上面的代码使用 display: block 要使用 display: table-row(跨所有列跨越一个 td 的行)使用 .css()
$("#tags td.show-tag").on("click", function(event) {
var tagId = $(this).data('tagid');
$('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).css("display", "none");
$('tr.edit-tag[data-tagid='+tagId+']').css("display", "table-row");
});
Yet not yet in my rails view.但在我的 Rails 视图中还没有。
No need for own JS!不需要自己的JS! Achievable with Bootstap's collapse.js
applied to the table.可以通过将 Bootstap 的collapse.js
应用于表格来实现。
<tr id='heading<%= tag.id %>', role="button", data-toggle="collapse", data-parent="tags", class='show-tag', href="#collapse<%= tag.id %>", aria-expanded="true" aria-controls="collapse<%= tag.id %>">
<td style="word-wrap: break-word;"><%= tag.content %></td>
<td><%= tag.tagtype.name %></td>
<td><%= tag.tagtype.typeoftag %></td>
<td class="delete-btn"><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm!' }, :class => "glyphicon glyphicon-trash" %></td>
</tr>
<tr id='collapse<%= tag.id %>', class='collapse' aria-labelledby="collapse"<%= tag.id %>">
<td colspan="4"><%= render 'shared/tester' %><%#= render partial: 'tags/update', object: @tag.tagable, tag: @tag %></td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.