<table> 点击时的内联编辑，Rails 3.0 / jQuery AJAX答案

【问题标题】：Inline editing of <table> on click, Rails 3.0 / jQuery AJAX<table> 点击时的内联编辑，Rails 3.0 / jQuery AJAX
【发布时间】：2011-10-30 19:27:15
【问题描述】：

我正在寻找最符合 Rails 的方法来创建一个显示数据元素的表，这样当用户单击任何行时，该行就可以编辑了。到目前为止我得到了什么：

表格中的每一行都由部分渲染
我将 jQuery 事件处理程序绑定到行上的 click 事件，它使用 jQuery.load 将编辑部分的 HTML 加载到行中

这几乎可以工作，使用以下代码：

tasks.js

$(document).ready(function() {
    $('.task_row').click( function() {
        var id = $(this).attr('id');
        $('#' + id).load('/tasks/' + id + '/edit');
        //$(this).unbind('click');
    });
});

_edit_row.html.erb

<%= form_for(task, :remote => true) do |f| %>
  <td>
    <%= f.text_field :title %>
  </td>
  <td>
    <%= f.text_field(:due_date_string, :value => format_time(f.object.due_date)) %>
  </td>
  <td>
    <%= f.text_field(:tag_string) %>
  </td>
  <td>
    <%= f.submit %>
  </td>  
  <td>
    <%= link_to 'Delete', task, :confirm => 'Are you sure?', :method => :delete %>
  </td>
<% end %>

问题是表单没有提交。单击 f.submit 按钮（“更新”）后，什么也没有发生 - 没有 JS 错误，也没有向服务器发出请求。

对于这类事情，这可能是完全错误的方法。最初我想使用 javascript 来完成整个事情，手动读取值并让 jQuery ajax 调用我的 Rails 控制器上的 update 方法，但我认为可能有更直接的方法来做到这一点。有什么建议吗？

【问题讨论】：

标签： jquery ajax ruby-on-rails-3

【解决方案1】：

我发现按照您的建议，最简单的方法是在 javascript 中进行所有编辑，然后进行 ajax 调用以更新服务器。

我更喜欢 jQuery DataTables 插件 - http://datatables.net/ 与 jEditable 配对（请参阅 http://www.datatables.net/examples/api/editable.html），但如果 DataTables 不适合您，还有其他不错的插件。

【讨论】：