Когда-либо хотелось иметь HTML-таблицу перетаскивания и сортировки, в которой можно сортировать строки и столбцы? Я знаю, за что я умру. Там много сортируемых списков, которые собираются, но поиск сортируемой таблицы, кажется, невозможно найти.
Я знаю, что вы можете вплотную приблизиться к инструментам, которые script.aculo.us предоставляет, но я столкнулся с некоторыми проблемами между браузерами.
Я использовал dhtmlxGrid в прошлом. Среди прочего, он поддерживает перетаскивание строк и столбцов, сортировку на стороне клиента (строку, целое число, дату, пользовательскую) и поддержку нескольких браузеров.
Ответ на комментарий: Нет, не нашел ничего лучшего - просто перешел от этого проекта.: -)
Я использовал jQuery UI sortable plugin с хорошими результатами. Пометка похожа на следующую:
<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
}
});
}
});
Этот POST представляет сериализованную версию идентификаторов элементов для указанного URL. Эта функция (PHP в моем случае) затем обновляет заказы элементов в базе данных.
Я рекомендую Sortables в jQuery, Вы можете использовать его в элементах списка или почти что угодно, включая таблицы.
jQuery очень кросс-браузерный, и я рекомендую его все время.
Дэвид Хегги ответ был самым полезным для меня. Это может быть несколько более кратким:
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
});
работает для меня с той же разметкой.
Большинство фреймворков (Yui, MooTools, jQuery, Prototype/Scriptaculous и т.д.) имеют сортировку списков. Сделайте небольшое исследование каждого и выберите тот, который больше всего подходит вашим потребностям.
Как насчет sorttable? Это, казалось бы, соответствовало вашим требованиям.
Он довольно прост в использовании - загрузите сортируемый Javascript файл, затем для каждой таблицы, которую вы хотите сделать сортировкой, примените class= "sortable" к таблице <table> тег.
Он сразу поймет, как сортировать большинство типов данных, но если там что-то не получается, вы можете добавить собственный ключ сортировки, чтобы рассказать ему, как сортировать. Документация объясняет все это довольно хорошо.
Если вы не против Java, есть очень удобная библиотека для GWT, называемая GWT-DND, чтобы проверить онлайн-демонстрацию, чтобы увидеть насколько он силен.
Если вы найдете .serialize() возвращающий null в решении David Heggie, тогда установите значения 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"
Вы можете использовать '=', '-' или '_' вместо '_'. И любое другое слово, кроме "id".
Я использую JQuery Sortable для этого, но в случае, если вы используете Vue.js, как я, вот решение, которое создает пользовательскую директиву Vue для инкапсуляции функциональности Sortable, я знаю о перетаскиваемом Vue, но он не сортирует столбцы таблицы как по вопросу ЗДЕСЬ Чтобы увидеть это в действии, ПРОВЕРЬТЕ ЭТО
Код JS
Vue.directive("draggable", {
//adapted from https://codepen.io/kminek/pen/pEdmoo
inserted: function(el, binding, a) {
Sortable.create(el, {
draggable: ".draggable",
onEnd: function(e) {
/* vnode.context is the context vue instance: "This is not documented as it not encouraged to manipulate the vm from directives in Vue 2.0 - instead, directives should be used for low-level DOM manipulation, and higher-level stuff should be solved with components instead. But you can do this if some usecase needs this. */
// fixme: can this be reworked to use a component?
// https://github.com/vuejs/vue/issues/4065
// https://forum.vuejs.org/t/how-can-i-access-the-vm-from-a-custom-directive-in-2-0/2548/3
// https://github.com/vuejs/vue/issues/2873 "directive interface change"
// 'binding.expression' should be the name of your array from vm.data
// set the expression like v-draggable="items"
var clonedItems = a.context[binding.expression].filter(function(item) {
return item;
});
clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);
a.context[binding.expression] = [];
Vue.nextTick(function() {
a.context[binding.expression] = clonedItems;
});
}
});
}
});
const cols = [
{name: "One", id: "one", canMove: false},
{name: "Two", id: "two", canMove: true},
{name: "Three", id: "three", canMove: true},
{name: "Four", id: "four", canMove: true},
]
const rows = [
{one: "Hi there", two: "I am so excited to test", three: "this column that actually drags and replaces", four: "another column in its place only if both can move"},
{one: "Hi", two: "I", three: "am", four: "two"},
{one: "Hi", two: "I", three: "am", four: "three"},
{one: "Hi", two: "I", three: "am", four: "four"},
{one: "Hi", two: "I", three: "am", four: "five"},
{one: "Hi", two: "I", three: "am", four: "six"},
{one: "Hi", two: "I", three: "am", four: "seven"}
]
Vue.component("datatable", {
template: "#datatable",
data() {
return {
cols: cols,
rows: rows
}
}
})
new Vue({
el: "#app"
})
CSS
.draggable {
cursor: move;
}
table.table tbody td {
white-space: nowrap;
}
Шаблон мопса HTML
#app
datatable
script(type="text/x-template" id="datatable")
table.table
thead(v-draggable="cols")
template(v-for="c in cols")
th(:class="{draggable: c.canMove}")
b-dropdown#ddown1.m-md-2(:text='c.name')
b-dropdown-item First Action
b-dropdown-item Second Action
b-dropdown-item Third Action
b-dropdown-divider
b-dropdown-item Something else here...
b-dropdown-item(disabled='') Disabled action
tbody
template(v-for="row in rows")
tr
template(v-for="(col, index) in cols")
td {{row[col.id]}}