в jQuery Сортируемыми пользовательского интерфейса, то пишите заказ в базе данных

Я хочу использовать jQuery UI sortable функция, позволяющая пользователям устанавливать порядок, а затем при изменении записывать его в базу данных и обновлять. Может ли кто-нибудь написать пример того, как это будет сделано?

618   6  

6 ответов:

jQuery UI sortable функции включает в себя serialize метод для этого. На самом деле все очень просто. Вот быстрый пример, который отправляет данные на указанный URL-адрес, как только элемент изменяет положение.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

что это делает, что он создает массив элементов с помощью элементов id. Итак, я обычно делаю что-то вроде этого:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

при использовании serialize опция, она создаст запрос POST строка вроде этой:item[]=1&item[]=2 etc. Так что если вы используете, например, базы данных идентификаторов в id атрибут, затем вы можете просто перебирать размещенный массив и обновлять позиции элементов соответственно.

например, в PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

пример на jsFiddle.

196  
2014-07-21 15:29:21

подумал, что это тоже может помочь. А) он был разработан, чтобы держать нагрузку до минимума при отправке обратно на сервер, после каждой сортировки. (вместо того, чтобы отправлять все элементы каждый раз или повторять многие элементы, которые сервер может выбросить) B) мне нужно было отправить обратно пользовательский идентификатор без ущерба для идентификатора / имени элемента. Этот код получит список из asp.net сервер, а затем при сортировке будут отправлены только 2 значения: идентификатор БД отсортированного элемента и идентификатор БД элемента рядом с который был сброшен. На основе этих 2 значений, сервер может легко определить новое положение.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>
9  
2017-10-13 21:04:24

вам повезло, я использую точную вещь в моей CMS

если вы хотите сохранить заказ, просто вызвать метод JavaScript saveOrder(). Это сделает AJAX POST запрос saveorder.php, но, конечно, вы всегда можете опубликовать его как обычную форму.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

в saveorder.php; имейте в виду, что я удалил все проверки и проверки.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>
8  
2014-12-12 02:33:06

Это мой пример.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

вам нужно поймать заказ в событии обновления

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});
7  
2014-03-26 07:39:09

Я могу изменить строки, следуя принятому ответу и связанному примеру на jsFiddle. Но по каким-то неизвестным причинам, я не мог получить идентификаторы после "или" действия. Но пример, опубликованный на странице пользовательского интерфейса JQuery, отлично работает для меня. Вы можете проверьте эту ссылку здесь.

0  
2015-07-02 17:50:01

попробуйте с этим решением:http://phppot.com/php/sorting-mysql-row-order-using-jquery/ где новый порядок сохраняется в некотором элементе HMTL. Затем вы отправляете форму с этими данными в какой-то PHP скрипт, и выполнить итерации через его петлю.

Примечание: мне пришлось добавить еще одно поле БД типа INT(11), которое обновляется(timestamp'ED) на каждой итерации - оно служит для скрипта, чтобы знать, какая строка недавно обновлена, иначе вы получите скремблированные результаты.

0  
2017-01-06 19:40:07

Comments

    Ничего не найдено.
Click here to cancel reply.