Rails新手求助：如何结合Bootstrap Data Slider实现就地编辑并存库

嘿，作为Rails新手能想到用滑块来做实时编辑真的很棒！完全可以把Bootstrap Slider和best_in_place或者AJAX表单提交结合起来，我给你分两种详细方案，一步步来你肯定能搞定～

方案一：使用best_in_place + Bootstrap Slider #

这个方案借助best_in_place的AJAX更新能力，配合滑块的交互，实现实时保存。

1. 准备依赖 #

首先确保你的Gemfile里包含这两个gem：

gem 'best_in_place'
gem 'bootstrap-slider-rails'

执行bundle install安装后，在对应的资源文件里引入：

• app/assets/javascripts/application.js：

  //= require best_in_place
  //= require bootstrap-slider
  

• app/assets/stylesheets/application.css：

  *= require bootstrap-slider
  

2. 控制器与路由 #

确保RelationsController的index和update动作正确，并且允许preference参数：

class RelationsController < ApplicationController
  def index
    @relations = Relation.all # 按需调整查询逻辑
  end

  def update
    @relation = Relation.find(params[:id])
    if @relation.update(relation_params)
      respond_to do |format|
        format.js { head :ok } # 简单返回成功状态
        format.html { redirect_to relations_path, notice: 'Preference updated!' }
      end
    else
      respond_to do |format|
        format.js { head :unprocessable_entity }
        format.html { redirect_to relations_path, alert: 'Failed to update preference.' }
      end
    end
  end

  private
  def relation_params
    params.require(:relation).permit(:preference)
  end
end

路由里默认的RESTful路由已经包含PATCH /relations/:id，不用额外配置。

3. 视图中的表格与滑块 #

在app/views/relations/index.html.erb的表格里，给Preference列添加滑块和隐藏的best_in_place字段：

<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Preference</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <% @relations.each do |relation| %>
      <tr>
        <td><%= relation.id %></td>
        <td>
          <!-- 滑块容器 -->
          <div class="preference-slider" 
               data-id="<%= relation.id %>" 
               data-value="<%= relation.preference %>"></div>
          <!-- 隐藏的best_in_place字段，用于提交更新 -->
          <%= best_in_place relation, :preference, type: :hidden, id: "preference_#{relation.id}" %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

4. JavaScript初始化与交互 #

在app/assets/javascripts/relations.js（如果没有就新建）里写初始化逻辑：

$(document).ready(function() {
  // 初始化best_in_place
  $('.best_in_place').best_in_place();

  // 遍历初始化每个滑块
  $('.preference-slider').each(function() {
    const relationId = $(this).data('id');
    const initialValue = $(this).data('value');

    // 初始化Bootstrap Slider
    $(this).slider({
      min: 0,    // 根据你的需求调整最小值
      max: 100,  // 调整最大值
      step: 1,   // 调整步长
      value: initialValue,
      tooltip: 'always' // 始终显示当前值提示
    });

    // 滑块停止滑动时，更新best_in_place并触发保存
    $(this).on('slideStop', function(e) {
      const newValue = e.value;
      const hiddenField = $(`#preference_${relationId}`);

      // 更新隐藏字段的值
      hiddenField.val(newValue);
      // 触发best_in_place的AJAX更新
      hiddenField.trigger('change');
    });
  });
});

方案二：直接用AJAX提交滑块值（无需best_in_place） #

如果你不想依赖best_in_place，也可以直接通过AJAX请求把滑块值提交到控制器。

1. 视图调整 #

去掉best_in_place字段，只保留滑块容器：

<td>
  <div class="preference-slider" 
       data-id="<%= relation.id %>" 
       data-value="<%= relation.preference %>"></div>
</td>

2. JavaScript交互逻辑 #

修改relations.js里的代码，直接在滑块停止时发送AJAX请求：

$(document).ready(function() {
  $('.preference-slider').each(function() {
    const relationId = $(this).data('id');
    const initialValue = $(this).data('value');

    $(this).slider({
      min: 0,
      max: 100,
      step: 1,
      value: initialValue,
      tooltip: 'always'
    });

    $(this).on('slideStop', function(e) {
      const newValue = e.value;

      // 发送AJAX请求更新数据库
      $.ajax({
        url: `/relations/${relationId}`,
        method: 'PATCH',
        data: { relation: { preference: newValue } },
        success: function() {
          console.log('Preference updated successfully!');
          // 可以添加成功提示，比如弹出Toast
        },
        error: function(xhr) {
          console.error('Update failed:', xhr.responseText);
          // 出错时恢复滑块到原来的值
          $(this).slider('setValue', initialValue);
        }.bind(this)
      });
    });
  });
});

控制器的update动作和方案一完全一致，不需要修改。

小贴士 #

• 根据你的业务需求调整滑块的min、max、step参数，比如如果preference是0-10的整数，就把max设为10。
• 可以添加加载状态提示，比如在滑块滑动时显示一个加载图标，AJAX请求完成后隐藏。
• 如果preference是小数类型，记得把step设为对应的小数（比如0.1）。
• 测试时可以打开浏览器的开发者工具，查看Network标签页，确认AJAX请求是否成功发送，参数是否正确。

内容的提问来源于stack exchange，提问作者Max Heumann