在rails视图中创建拖放表的更好方法是什么?

时间:2016-04-19 10:21:56

标签: ruby-on-rails ruby drag-and-drop

我正在铁轨上工作。在我的一个视图中,我需要创建一个可以通过拖放方式排序的列表。我在谷歌上找到了this way。但在该教程中,他们使用了act_as_list gem。根据这个宝石的文档,它是;

  

用于管理列表的ActiveRecord插件。 http://swanandp.github.io/acts_as_list/

我正在使用mongoid。请问,有人可以建议我如何在mongoDB的导轨视图中创建拖放列表吗?

1 个答案:

答案 0 :(得分:1)

我使用gem jquery-ui-rails创建了拖放表。在这里您可以找到更多信息here

使用jquery我已经这样做了

    jQuery(function($) {
  if ($('#table_body_id').length > 0) {
    table_width = $('#table_body_id').width();
    cells = $('.table').find('tr')[0].cells.length;
    desired_width = table_width / cells + 'px';
    $('.table td').css('width', desired_width);
  }

  $('#table_body_id').sortable({
    axis: 'y',
    cursor: 'move',
    containment: '.table-responsive',
    sort: function(e, ui) {
      ui.item.addClass('active-item-shadow');
    },
    stop: function(e, ui) {
      ui.item.removeClass('active-item-shadow');
      ui.item.children('td').effect('highlight', {}, 1000);
    },
    update: function(event, ui) {
      var all_row_ids = $(this).sortable('toArray', { attribute: 'table_row_id' });
      $.ajax({
        url: 'my_url_to_sort',
        method: 'POST',
        data: {
          ids: all_row_ids
        },
        success: function(){
          $('#table_body_id > tr').each(function(i, tr) {
            $('.index:first', this).html(i + 1);
          });

          console.log("success");
        }
      });
    }
  });
});

现在在控制器操作中,我们可以使用像这样的位置字段来整理数据

    def sort
      params[:ids].each_with_index do |id, index|
      ModelName.where(id: id).update(position: index+1)
    end

    render nothing: true
  end

谢谢。