Редактируемый ряд в рельсах, используя сценарий Java - PullRequest
Новая
       1

Редактируемый ряд в рельсах, используя сценарий Java

0 голосов
/ 17 июня 2019

Я хочу сделать каждую строку редактируемой в таблице.Для этого я помещаю строки с полями text_fields в каждой ниже строке с данными таблицы. 

<style>
  .dtr{
    display:none;
  }
</style>

<body>
  <div class="container" align="center">
    <h1>Products Description</h1>
  </div>
  <br />
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Product Name</th>
        <th scope="col">Product Description</th>
        <th scope="col">Brand Name</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <% @csv_table.each do |row| %>
        <tr class="mtr">
          <% row.each do |key, value| %>
            <%unless key == "id"%>
              <td class="value"><%= value %></td>
            <%end%>
          <% end %>

          <td>
            <div class="edit">
              <%=link_to "Edit",class: 'form-control' %>
            </div>
            <div class="delete">
              <%=link_to "Delete",class: 'form-control' %>
            </div>
          </td>
        </tr>

        <tr class="dtr">
          <td>
            <%= text_field_tag :login_aei2, "", class: 'form-control' %>
          </td>
          <td>
            <%= text_field_tag :login_aei3, "", class: 'form-control' %>
          </td>
          <td>
            <%= text_field_tag :login_aei4, "", class: 'form-control' %>
          </td>
          <td>
            <%=link_to "Save", remote: true, class: 'form-control' %>
          </td>
        </tr>
      <%end%>
    </tbody>
  </table>
</body>

<script>
  $(document).ready(function(){
    $(".edit").click(function(){
      debugger;
      var mtr = this.closest(".mtr");
      mtr.style.display = "none";
      mtr.nextElementSibling.style.display="inline";
      // this.parentElement.parentElement.style.display='none';
      event.preventDefault();
    });
  });
</script>

Когда я нажимаю кнопку редактирования, текущая строка становится скрытой, а строка с полем ввода отображается, но проблема в том, что она показываеттолько в области данных таблицы, а не во всей строке.пожалуйста помоги.Заранее спасибо

1 Ответ

0 голосов
/ 17 июня 2019

Поэтому, когда пользователь нажимает «изменить», необходимо точно знать, какая информация была нажата, чтобы обновить базу данных и чтобы показать и скрыть информацию.

ИзмененияЯ создал демонстрационные данные , которые я создал для разработки этого решения:

@ csv_table = [{id: 3, product: "Product", описание:" Описание ", бренд:" Бренд ", действие:" Акция "}, {id: 4, продукт:" Продукт2 ", описание:" Описание2 ", бренд:" Бренд2 ", действие:" Действие2 "}]

Это так называемый «массив хэшей», и я подумал, что это то, что вы тоже использовали.

В полном коде, пока мы выполняем итерацию по массиву, мыможно увидеть два значения: name и value .Я использовал «значение» вместо идентификатора, потому что я не хотел вызывать конфликт HTML.Таким образом, вы можете увидеть в коде это: 

<% value = row[:id] %>

И это 

<% name = key[0] %>

Тогда у каждой строки есть поле и информация (но одна из них скрыта), какитак: 

<td class="value">
     <a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name]  %></a>
     <%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}"  %>
</td>

Можете ли вы заметить, что идентификатор имеет имя и значение?Таким образом, мы можем сказать JQuery искать поле, которое мы щелкнули.Например, info_product1 и field_product1, и установите его в hide ();или показать () ;.Ниже приведен полный код, в основном это javascript и html трюки, поэтому вы можете попробовать немного поиграться:

Ruby + Html: 

<style>
.dtr{
 display:none;
}

</style>
<div class="container" align="center">
    <h1>Products Description</h1>
</div><br />
<table class="table table-striped" border=2 style="border: 2px solid;">
    <thead>
        <tr>
            <th scope="col">Product Name</th>
            <th scope="col">Product Description</th>
            <th scope="col">Brand Name</th>
            <th scope="col">Action</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <% @csv_table.each_with_index do |row, i|%>
            <% value = row[:id] %> 
                <tr class="mtr">
                    <% row.each_with_index do |key, j| %>
                        <% name = key[0] %>
                        <% unless j==0 %>
                            <td class="value">
                                <a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name]  %></a>
                                <%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}"  %>
                            </td>
                          <% end %>
                        <% end %>
                        <td>
                            <%= link_to "Save", {}, remote: true, class: 'form-control save', 'value' => value   %>
                            <div class="delete"><%=link_to "Delete",class: 'form-control'%></div>
                        </td>
                    </tr>
                <% end %>
        </tbody>
    </table>
</body>

Javascript: 

$(document).ready(function(){
   $(".field").hide();
});
$(".info").click(function(event){
    console.log("info");
    name = $(this).attr("name");
    id = $(this).attr("value");
    console.log($(this).attr("value"));

    $("#info_" + name + id).hide();
    $("#field_" + name + id).show();
});

$(".save").click(function(event){
    event.preventDefault();
    // { .. if saves}
    console.log("salvar");
    id = $(this).attr("value");

    $(".field_dtr" + id).hide();
    $(".info_dtr" + id).show();           
});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...