Как сделать перетаскиваемые колонки в таблице в представлении Rails

Question

Я заполняю таблицу в представлении через each do через бд. Мне сейчас необходимо иметь возможность менять порядок колонок в таблице перетаскиванием. + ко всему сохранять этот результат. Можно, например, менять id у перетаскиваемой записи, а у остальных на единицу. Ну или иным методом, который позволит как-либо сохранять результат.

Я уже находил один способ менять порядок колонок, но он работает только с самостоятельно заданной таблицей.

А в более сложных методах у меня пока не получилось разобраться т.к., я ещё слишком новичок в rails.

Моё представление

<form method="GET">
  <select name="filter_option" onchange="this.form.submit()">
    <option value="">
      Выберите пользователя
    </option>
    <option value="0">
      Все
    </option>
    <% @users.each do |user| %>
      <option value="<%=user.id%>"><%= user.name %>
      </option>
    <% end %>
  </select>
</form>

<table>
  <thead>
    <tr>
      <th>Номер</th>
      <th>Проект</th>
      <th>Трекер</th>
      <th>Статус</th>
      <th>Тема</th>
    </tr>
  </thead>
<% @issues.each do |issues| %>
  <tbody>
      <tr>
        <td><%= issues.id %></td>
        <% @project = @projects.find_by(id: issues.project_id) %>
        <td><%= @project.name %></td>
        <% @tracker = @trackers.find_by(id: issues.tracker_id) %>
        <td><%= @tracker.name %></td>
        <% @status = @statuses.find_by(id: issues.status_id) %>
        <td><%= @status.name %></td>
        <td><%= issues.subject %></td>
      </tr>
  </tbody>
<% end %>
</table>

Мой контроллер

class TasksController < ApplicationController

  def index
    @issues = Issue.all
    @projects = Project.all
    if params[:filter_option]
      if params[:filter_option] != "0"
        @issues = Issue.where(assigned_to_id: params[:filter_option])
      else
        @issues = Issue.all
      end
    end
    @trackers = Tracker.all
    @statuses = IssueStatus.all
    @users = User.all
  end

end

Answer 1

недавно была подобная задача где надо было менять порядок строк в столбце и потом их сохранять. я не знаю ruby поэтому подсказать с бека не могу, но задачу можно решить с стороны фронта используя такой способ. упорядочить массив как надо на фронте и отправить этот массив с нужным порядком на бек. надеюсь поможет вам в решении вашей задачи
P.S. использовал таблицу другого вида и содержания чтобы подходило под placeholderapi чтобы показать как загружать данные в таблицу запросом

var table = new Tabulator("#example-table", {
  height: "512px",
  movableRows: true,
  data: [],
  columns: [{
      rowHandle: true,
      formatter: "handle",
      frozen: true,
    },
    {
      title: "userId",
      field: "userId",
    },
    {
      title: "Id",
      field: "id",
      sorter: "number"
    },
    {
      title: "Title",
      field: "title"
    },
    {
      title: "completed",
      field: "completed",
      formatter: "tickCross"
    }
  ],
});

// загрузка данных в таблицу. данные получаем из api
table.on('tableBuilt', function() {
  table.setData('https://jsonplaceholder.typicode.com/todos')
});

// при нажатии на кнопку выводим массив с данными
document.getElementById("get-example-table").addEventListener("click", function() {
  console.log(table.getData());
});

// при нажатии на кнопку отправляем массив с данными в таком порядке в каком установили их в таблицу
document.getElementById("save-example-table").addEventListener("click", async function() {
  const data = {
    method: 'POST',
    headers: {
      ContentType: 'application/json'
    },
    data: JSON.stringify(table.getData()),
  }
  console.log(data.data)
  const res = await fetch('https://jsonplaceholder.typicode.com/todos', data)
});

// пример как загрузить данные в таблицу в зависимости от выбора select
document.getElementById("select-user").addEventListener("change", function(event) {
  table.setData(`https://jsonplaceholder.typicode.com/todos?id=${event.target.value}`);
})

<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet" />


<button type="button" id="save-example-table">сохранить</button>
<button type="button" id="get-example-table">показать в консоли массив</button>

<form>
  <select id="select-user">
    <option disabled selected>All</option>
    <option value="1">User 1</option>
    <option value="2">User 2</option>
    <option value="3">User 3</option>
  </select>
</form>

<div id="example-table"></div>

БЛОГ НА HUSL

Как сделать перетаскиваемые колонки в таблице в представлении Rails

Ответы (1 шт):