我该如何组织这个逻辑

时间:2012-07-31 10:51:26

标签: javascript ruby-on-rails ajax

请帮帮我!!

我想创建可编辑的数据表。在表的顶部将是一个“添加”按钮,使用javascript将行添加到表中。并且每行应该是butons(链接)“Save”和“Delete”。

如何将发布请求发送到服务器?

为我的愚蠢而烦恼..

在application.js中,我有一个像这样的函数

function AddElementsToPage(elements) {
/*elements - is array with name elements whose will be add to page*/    
this.add_row_to_data_table = function(obj,attributes,selector_table){
    last_row_of_table = selector_table.find('tbody tr').last();
    var new_row = "<tr><th scope='row'></th>";

    if ($.isEmptyObject(last_row_of_table.html()))
    {
        $.each(attributes, function(index, item){
            input_tag = "<input id=\""+obj+"_"+item+"\" name=\""+obj+"["+item+"]\" size=\"10\"  type=\"text\" />";
            new_row = new_row + "<td>"+input_tag+"</td>";
        })
        alert(new_row);
        selector_table.append(new_row+"</tr>");
    }else
    {
        alert("not empty");
    }

}

我的控制器动作新

def new
 @table_row = SchOfWorkInformation.new
respond_to do |format|
  format.js do
    render :action => 'new'
  end
end
end

我的new.js文件

var obj = new AddElementsToPage();

obj.add_row_to_data_table("sch_of_working",["date","hour"], $('.data_table'))

我的index.haml

 = link_to content_tag('span', "Add" , :class=>"add"),   new_sch_of_work_information_path, :remote => true
 %table{:border=>"1", :class=>"data_table", :style=>"width:450px"}
    %thead
      %th{:style=>"width:5%;"} №
      %th{:style=>"width:10%;"} Date
      %th{:style=>"width:10%;text-align:center;"} schedule_code
      %th{:style=>"width:2%;",:class=>"transperent_right_border"} 
      %th{:style=>"width:2%;"} 
    %tbody
      %tr
        %th{:scope=>"row"}
        %td=@sch.date
        %td=@sch.schedule_code
        %td{:style=>"text-align:center"}= link_tag "save", sch_of_work_informations, #how can send post request in here 
        %td{:style=>"text-align:center"}

1 个答案:

答案 0 :(得分:0)

我认为这是你要看的那种答案。按照railscasts http://railscasts.com/episodes/196-nested-model-form-part-1嵌套表格中的教程进行操作,它可以为您提供帮助。基本上你会有一个添加行按钮,它会在javascript中添加html行,你甚至可以删除行按钮。完成此操作后,只需按下表单的保存按钮即可完成所有更改。