在rails上删除ruby中的表行

时间:2013-12-18 08:58:56

标签: html ruby-on-rails ruby

我使用会话用数据填充表格。我的表看起来像这样:

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
        <th></th>
      </tr>
      <% grand_total = 0 %>
      <% session[:cart].each do |key, item| %>
        <tr>
          <td><%= item[:name] %></td>
          <td><%= item[:price] %></td>
          <td><%= text_field_tag(:quantity, item[:quantity]) %>
            <%= link_to("Update", {:action => "update", :id => item[:id]}) %>
          </td>
          <td><%= item[:total_cost] %></td>
          <td>
            <%= link_to("X", {:action => "delete", :id => item[:id]}) %>
          </td>
        </tr>
        <% grand_total = grand_total + item[:total_cost] %>
      <% end %>
    </thead>
  </table>

我想删除一个表条目以及该条目的会话数据。我如何使用delete方法来做到这一点?我用了会话..

我的控制器:

 def delete
  product = Product.find(params[:id])
end

3 个答案:

答案 0 :(得分:0)

在表格中添加ID:

<table id="cartTable">

和这个Javascript:

$('#cartTable tr').click({
    $(this).remove();
    return false;
};

这将删除表格中的行。

要删除会话中的条目,您应该从会话对象和数据库中删除它,如果您要保留它。

答案 1 :(得分:0)

我假设您想要一个AJAX样式删除,因为它可能最适合购物车类型的场景。

我如何做到的过程非常简单:

  1. 异步命中destroy URI(remote: true选项使用UJS执行此操作)
  2. 填写您的销毁操作,以便在服务器端进行相关更改
  3. destroy操作(responds_to ..)
  4. 中回复JS请求
  5. 创建一个destroy.js.erb视图,使您需要更改UI(删除行,可能会显示一些确认消息)

答案 2 :(得分:0)

http://firststopcosmeticshop.co.uk - 我们的开发应用程序之一,具有您所寻求的功能

以下是我们如何做到的:


购物车控制器

session变量填充了购物车表,但它们仍由Rails存储

这意味着如果您要“删除”购物车记录,则必须在后端取消设置会话变量。这个已经通过连接到Rails&amp;执行delete操作(如您所知),因此我最好为您解释此过程

我们使用cart_controller来处理delete操作:

 #app/controllers/cart_controller.rb 
 def delete
            session[:cart] ||={}
            products = session[:cart][:products]
            id = params[:id]
            all = params[:all]

            #Is ID present?
            unless id.blank?
                    unless all.blank?
                            products.delete(params['id'])
                    else
                            products.delete_at(products.index(id) || products.length)
                    end
            else
                    products.delete
            end

            #Handle the request
            respond_to do |format|
                    format.json { render json: cart_session.build_json }
                    format.html { redirect_to cart_index_path }
            end
end

#config/routes.rb
get 'cart' => 'cart#index', :as => 'cart_index'
post 'cart/add/:id' => 'cart#add', :as => 'cart_add'
delete 'cart/remove(/:id(/:all))' => 'cart#delete', :as => 'cart_delete'

这为我们提供了后端功能,以及使用HTTP或JSON(ajax)请求调用的端点。这意味着在前端,您可以像这样调用delete函数:

#app/views/cart/index.html.erb
<%= link_to "Remove", cart_delete_path(item[0]["id"], 1), :class => 'delete', :id => item[0]["id"], :method => :delete, data: { :confirm => "Are You Sure?"}, :remote => :true, :format => :json  %>

#app/assets/javascripts/cart.js
//Cart Remove Links NEED TO OPTIMIZE
$(document).on('click', 'li:not(.shipping) .delete a', function(e){
            e.preventDefault();

            var id = $(this).attr('id');
            table_overlay(id)

    }).on('ajax:success', 'li:not(.shipping) .delete a', function(e, xhr, data, status){

            var id = $(this).attr('id');
            table_overlay(id);
            cart_count(xhr.qty);
            cart_total(xhr.subtotal);
            if(xhr.qty != "0"){        $('#' + id).animationUp(); }else{ clear_cart();        }

    }).on('ajax:error', 'li:not(.shipping) .delete a', function(){
            var id = $(this).attr('id');
            $('#' + id + ' .table_overlay').fadeOut(200);
            alert('Sorry, there was an error!');
    });

要重构购物车删除JS,但希望你能看到它如何将数据发送到服务器&amp;只有在成功回调时才会从DOM中删除该项目