universal_table/app/views/admin/universal_tables/_table_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "universal_table/universal-table" %>
<% end %>
 <% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "universal_table/jquery-ui.min" %>
<% end %>

<fieldset class="utable-heading-wrap">
    <div class="utable-heading-header">
      <h4><%= t("universal_table.table_name") %></h4>
    </div>
    <div class="control-group">
      <div class="controls">
          <div class="input-append">
              <div class="tab-content">
                <% @site_in_use_locales.each do |locale| %>
                  <% active = (locale == @site_in_use_locales.first ? "active in" : "") %>
                    <div class="tab-pane fade <%= active %>" id="table_name_<%= locale.to_s %>">
                    <%= f.fields_for :title_translations do |f| %>
                      <%= f.text_field locale, :placeholder => "Title", :value => @table.title_translations[locale] %>
                    <% end %>
                    </div>
                <% end %>
              </div>

              <div class="btn-group" data-toggle="buttons-radio">
              <% @site_in_use_locales.each do |locale| %>
                <% active = (locale == @site_in_use_locales.first ? "active" : "") %>
                <%= link_to t(locale).to_s,"#table_name_#{locale.to_s}",:class=>"btn #{active}",:data=>{:toggle=>"tab"}%>
              <% end %>
              </div>
          </div>
      </div>
    </div>
  </fieldset>

  <fieldset class="utable-content">
    <div id="attributes-area" class="input-area">
      <% @table.table_columns.asc(:order).each_with_index do |table_column, index| %>
      <div class="attributes default ">
          <%= f.fields_for :table_columns, table_column, :child_index => index.to_s do |f| %>
            <%= render :partial => "column", :object => table_column, :locals => {:f => f, :i => index} %>
            <%= f.hidden_field :id %>
          <% end %>
      </div>
      <% end %>
    </div>
    <div class="form-actions">
      <button type="button" class="btn btn-success add-attributes"><%= t("universal_table.add_column") %></button>
      <input class="btn btn-primary" name="commit" type="submit" value="<%= t("save") %>">  
    </div>
  </fieldset>


<script type="text/javascript">
  var columnArea = $("#attributes-area"),
      totalColumns = columnArea.find(".attributes.default").length,
      columnCounter = totalColumns;
  $("button.add-attributes").on("click",function(){
    var html = "<%= escape_javascript(add_attribute 'column', f, :table_columns) %>",
        replaceReg = new RegExp("new_table_columns","g"),
        idNumber = new RegExp("XXX","g");
    html = html.replace(replaceReg,columnCounter);
    html = html.replace("ColumnXX", "Column " + (columnCounter + 1));
    html = html.replace(idNumber,columnCounter);
    columnArea.append(html);
    columnCounter++;
  })

  $(document.body).on("click","a.delete",function(){
      if($(this).parent().find(".attribute_field_to_delete").length == 0){
        $(this).parent().parent().slideUp(function(){
          $(this).remove();
          updateOrder();
        });
      }else{
        if(confirm("Are you sure?")){
          $(this).parent().parent().slideUp(function(){
            updateOrder();
          });
          $(this).parent().find(".attribute_field_to_delete").val("true");
        }
      }
    return false;
  })

  $(document.body).on("change","select.type-selector",function(){
    var el = $(this),
        label = el.parent().find("span.link_to_show");
    if(el.val() == "text"){
      label.removeClass("hide");
    }else{
      label.addClass("hide");
      label.find("input[type=checkbox]").prop("checked",false);
    }
    label = el.parent().find("label.date_format");
    if(el.val() == "date" || el.val() == "period"){
      label.removeClass("hide");
    }else{
      label.addClass("hide");
    }
  })
  function key_on_blur() {
    $('input[data-type=key]').on('blur',function() {
      var index_this = $(this).parents('.attributes').index()
      console.log(index_this)
      var input_this = parseInt($(this).val()) - 1
      if (input_this > ($('#attributes-area>.attributes').length-1)){
        input_this = $('#attributes-area>.attributes').length-1
      }else if (input_this < 0){
        input_this = 0
      }
      if (index_this > input_this){
        $(this).parents('#attributes-area>.attributes').insertBefore($('#attributes-area>.attributes').eq(input_this))
      }
      else if (index_this < input_this){
        $(this).parents('#attributes-area>.attributes').insertAfter($('#attributes-area>.attributes').eq(input_this))
      }
      update_key(this)
    });
  }
  
  function update_key(ele){
    var ui_child=$(ele).parents('#attributes-area').find('.attributes');
    for (var i=0;i<ui_child.length;i++){
      var now_ele = ui_child.eq(i);
      now_ele.find('input[data-type=key]').val(i+1);
    }
    updateOrder
  }
  $('#attributes-area').ready(function(){
    $("#attributes-area").sortable({
       update: function( event, ui ) {
        update_key($(ui.item[0]).find('input[data-type=key]'))
       }
    });
    $("#attributes-area").on('change',key_on_blur)
    key_on_blur()
  })
  var updateOrder = function(){
     var attributes = $("#attributes-area").find(".attributes:visible");
      attributes.each(function(i){
        $(this).find("input.order-hidden-field").val(i);
      })
  }


</script>