Переупорядочьте строки HTML-таблицы с помощью перетаскивания
У меня есть функция jQuery для перемещения строк таблицы вверх и вниз. Я не знаю, как сохранить данные, ни получить положение каждой строки. Я использую PHP для показа строк таблицы.
Как я получаю каждое значение положения строки таблицы, когда пользователь переупорядочивает строки таблицы?
3 ответа
Благодаря Джиму Петкусу дал мне замечательный ответ. Но я пытался решить свой собственный сценарий, чтобы не изменить его на другой плагин. Мой главный фокус не использовал независимый плагин и делаю то, что хотел, просто используя ядро JQuery!
И угадайте, что я нашел проблему.
var title = $("em").attr("title");
$("div").text(title);
Это то, что я добавляю в свой скрипт, и коды блокировки в мою часть HTML:
<td> <em title=\"$weight\">$weight</em></td>
и нашли каждую строку значение веса
еще раз благодаря Джиму Петкусу
Вы можете посмотреть jQuery Сортировать . Я использовал его, чтобы изменить порядок столовых рядов.
jQuery UI Сортируемый плагин обеспечивает перераспомяжение перетаскивания. Кнопка «Сохранить» может извлекать идентификаторы каждого элемента, чтобы создать строку разделите запятую эти идентификаторы, добавленные в скрытое текстовое поле. TextBox возвращается на сервер, используя async-сообщение.
В этом примере пример скрипки реверсирует элементы таблицы, но не сохраняет их в базу данных.
Сортируемый плагин принимает одну строку кода для поворота любого списка в сортируемый список. Если вы хотите использовать их, он также предоставляет CSS и изображения для обеспечения визуального воздействия на сортируемый список (см. Пример, который я связан с). Разработчики, однако, должны предоставить код для извлечения предметов в их новом порядке. Я встроен уникальные идентификаторы каждого элемента в список в виде атрибута HTML, а затем извлеките эти идентификаторы через jQuery.
Например:
// ----- code executed when the document loads
$(function() {
wireReorderList();
});
function wireReorderList() {
$("#reorderExampleItems").sortable();
$("#reorderExampleItems").disableSelection();
}
function saveOrderClick() {
// ----- Retrieve the li items inside our sortable list
var items = $("#reorderExampleItems li");
var linkIDs = [items.size()];
var index = 0;
// ----- Iterate through each li, extracting the ID embedded as an attribute
items.each(
function(intIndex) {
linkIDs[index] = $(this).attr("ExampleItemID");
index++;
});
$get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(",");
}