jQuery сортируемые - PullRequest
Новая
       21

jQuery сортируемые

3 голосов
/ 09 октября 2008

Я использую сортируемую функцию в jquery для упорядочивания списка часто задаваемых вопросов. Излишне говорить, что я новичок в этой концепции. У кого-нибудь есть хорошие примеры бэкэнда для этого. У меня фронт работает нормально, но обновление последовательности в базе данных - другая история. Мой бэкэнд - ColdFusion, кстати.

Заранее спасибо

Ответы [ 2 ]

21 голосов
/ 09 октября 2008

Определение часто задаваемых вопросов: 

<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 ...

Просто разбери его и сохрани в БД

3 голосов
/ 12 июля 2010

Вот простой пример сортировки 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 />&nbsp; First Item </div>            
    </div>      
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>2</span>&nbsp; Second Item</div>           
    </div>      
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>3</span>&nbsp; Third Item</div>            
    </div>
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>4</span>&nbsp; Fourth Item</div>           
    </div>
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>5</span>&nbsp; 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);
    });
}
...