Сортировка jQuery
Я использую функцию сортировки в jquery для упорядочивания списка часто задаваемых вопросов. Излишне говорить, что я новичок в этой концепции. У кого-нибудь есть хорошие примеры бэкэнда для этого. У меня фронт работает нормально, но обновление последовательности в базе данных - отдельная история. Кстати, мой бэкэнд - ColdFusion.
заранее спасибо
Ответы 2
Определите часто задаваемые вопросы:
<div id = "faq">
<div id = "q1">...</div>
<div id = "q2">...</div>
(...)
<div id = "q100">..</div>
</div>
Сделайте часто задаваемые вопросы доступными для сортировки:
<script type = "text/javascript">
$("#faq").sortable();
</script>
Форма отправлена:
<form action = "..." id = "faq_form">
<input type = "hidden" name = "faqs" id = "faqs" />
...
</form>
Добавить отсортированную последовательность в форму
<script type = "text/javascript>
$("#faq_form").submit(function() {
$("#faqs").val($("#faq").sortable('toArray'))
})
</script>
При отправке формы поле «faqs» будет содержать разделенные запятыми идентификаторы из #faq, например: q1, q3, q10, q11, q2, q100 ...
Просто проанализируйте его и сохраните в БД
Вот простой пример Jquery UI Sortable, как его можно использовать с div.
Сначала включите библиотеки в свой html:
<link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "stylesheet" type = "text/css"/>` <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>`<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>``
HTML для сортировки:
<div id = "target">
<div style = "cursor: move;" class = "entity">
<div class = "digit"><span>1</span><tab /> First Item </div>
</div>
<div style = "cursor: move;" class = "entity">
<div class = "digit"><span>2</span> Second Item</div>
</div>
<div style = "cursor: move;" class = "entity">
<div class = "digit"><span>3</span> Third Item</div>
</div>
<div style = "cursor: move;" class = "entity">
<div class = "digit"><span>4</span> Fourth Item</div>
</div>
<div style = "cursor: move;" class = "entity">
<div class = "digit"><span>5</span> Fifth Item</div>
</div>
</div>
Вот сортируемая функция:
$(document).ready(function() {
$('#target').sortable({
items:'div.entity', //the div which we want to make sortable
scroll:true, //If set to true, the page
//scrolls when coming to an edge.
update:function(event,ui){ renumber(); } //This event is triggered when the user
//stopped sorting and the DOM position has changed.
});
});
renuber () вызывается из обратного вызова обработчика событий обновления Sortable:
function renumber()
{
$('.digit span').each(function(index,element) {
$(element).html(index+1);
});
}
Всем, кто такой новичок, как я, не забудьте поместить свой код JQuery в функцию, т.е. $ (function () {// ваш код}); Это может быть неправильно / очевидно, но я не мог заставить вышеуказанное работать, пока не сделал это.