HTML перетаскивание сортируемых таблиц

когда-либо хотели иметь HTML-перетаскивание сортируемой таблицы, в которой вы могли бы сортировать строки и столбцы? Я знаю, что готов умереть за это. Существует много сортируемых списков, но найти сортируемую таблицу, похоже, невозможно найти.

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

10
drag-and-drop html html-table javascript

8 ответов

Я использовал dhtmlxGrid в прошлом. Среди прочего, он поддерживает перетаскивание строк / столбцов, сортировку на стороне клиента (строка, целое число, дата, пользовательский) и поддержку нескольких браузеров.

ответ на комментарий: Нет,не нашел ничего лучше - просто перешел от этого проекта. :-)

4

я использовал сортируемый плагин jQuery UI с хорошими результатами. Разметка похожа на эту:

<table id="myTable">
<thead>
<tr><th>ID</th><th>Name</th><th>Details</th></tr>
</thead>
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr>
</tbody>
</table>

, а затем в JavaScript

$('.sort').sortable({
    cursor: 'move',
    axis:   'y',
    update: function(e, ui) {
        href = '/myReorderFunctionURL/';
        $(this).sortable("refresh");
        sorted = $(this).sortable("serialize", 'id');
        $.ajax({
            type:   'POST',
            url:    href,
            data:   sorted,
            success: function(msg) {
                //do something with the sorted data
            }
        });
    }
});

Это публикует сериализованную версию идентификаторов элементов в указанный URL-адрес. Эта функция (PHP в моем случае) затем обновляет заказы элементов в базе данных.

19

рекомендую Sortables на jQuery. Вы можете использовать его в элементах списка или почти во всем, включая таблицы.

jQuery очень кросс-браузерный, и я рекомендую его все время.

5
var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

работает для меня, с той же разметкой.

3

большинство фреймворков (Yui, MooTools, jQuery, Prototype/Scriptaculous и т. д.) возможность сортировки списка. Сделайте небольшое исследование каждого и выберите тот, который больше всего подходит вашим потребностям.

1

Если вы не против Java, есть очень удобная библиотека для GWT под названием GWT-DND проверьте онлайн-демо, чтобы увидеть, насколько он мощный.

0

как о метода sorttable? Похоже, это вполне соответствует вашим требованиям.

Он довольно прост в использовании-загрузите файл Javascript sorttable, затем для каждой таблицы, которую вы хотите сделать сортируемой, примените class= "sortable" к тегу

.

Он сразу поймет, как сортировать большинство типов данных, но если что-то не так, вы можете добавить пользовательский ключ сортировки, чтобы рассказать ему, как сортировать. Документация объясняет все это довольно хорошо.

0

Если вы найдете .serialize () возвращает null в решении Дэвида Хегги, затем устанавливает значения id для TRs как "id_1" вместо просто "1"

пример:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr>

выше будет сериализовано как "id[]=1 & id[]=2 & id[]=3"

вы можете использовать '=', '-' или '_' вместо '_'. И любое другое слово, кроме "идентификатор".

0