jQuery сортируемые
Вопрос
Я использую сортируемую функцию в jquery для упорядочивания списка часто задаваемых вопросов. Излишне говорить, что я новичок в этой концепции. У кого-нибудь есть хорошие примеры бэкэнда для этого. У меня фронт работает нормально, но обновление последовательности в базе данных - другая история. Мой бэкэнд, кстати, ColdFusion.
Заранее спасибо
Решение
Определите часто задаваемые вопросы:
<div id="faq">
<div id="q1">...</div>
<div id="q2">...</div>
(...)
<div id="q100">..</div>
</div>
Сделать FAQ сортируемым:
<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, как его можно использовать с 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);
});
}