Сортируемая сетка jQuery в базу данных MySQL PHP

#php #jquery #mysql #database #jquery-ui-sortable

#php #jquery #mysql #База данных #jquery-пользовательский интерфейс-сортируемый

Вопрос:

Я пытаюсь отсортировать изображения, используя:http://jqueryui.com/demos/sortable/display-grid.html А затем каким-то образом отправить недавно отсортированный массив / результаты в базу данных MySQL с использованием PHP?

Мне трудно разобраться в этом (оповещение новичков), поэтому, если кто-нибудь может пролить некоторый свет на это, я буду раздавать hi-5s, как будто завтра не наступит.

Приветствия

Ответ №1:

В частности, вам нужно посмотреть на прикрепление события к сортируемой таблице

http://jqueryui.com/demos/sortable/#event-update

и сериализует для получения соответствующего содержимого http://jqueryui.com/demos/sortable/#method-serialize

Редактировать

Это примитивная версия того, что вам нужно сделать.

 <script>
$(function() {

    var arrayOfIds = [];

    $( "#sortable" ).sortable({

          update: function(event, ui) { 
            $.each($(this).sortable('toArray'), function(key, value) {
                arrayOfIds.push(value.replace('el-',''))
            });

            var jqxhr = $.ajax({ 
                url: "order.php?order=" encodeURIComponent(arrayOfIds),

            })
            .success(function(response) { console.log("success"    response ); })
            .error(function() {  console.log("error"); })
            .complete(function() {  console.log("complete "); });

          }

    });
    $( "#sortable" ).disableSelection();
});
</script>

Каждому элементу li требуется идентификатор, который может быть понятен вашей базе данных

 <li class="ui-state-default" id="el-1">1</li>

«1» в id =»el-1″ должно относиться к идентификатору в таблице вашей базы данных. При изменении порядка срабатывает событие обновления, проходит через новый порядок, захватывает все идентификаторы и передает их в ajax-запрос, который затем может перехватить php-файл. the order.php затем в скрипте разделите числа на «,» и обновите вашу таблицу одно за другим.

например

 $itemOrders = explode(',',$_POST['order']);

$sizeOfList = sizeof($itemOrders);for($i=0; $i<$sizeOfList; $i  )
{
    $itemId = intval($itemOrders[$i]); 

    $query = "UPDATE your_table_name SET order_no = '".$i."' WHERE id = '".$itemId."' ";
    if ($result = $msHandle->query($query))
    {
        $message = 'success';
    }
        else
    {
        $message =   'fail ';

    }
}

1. Привет, спасибо за ответ. я проверил event amp; method, но я все еще немного не понимаю, как на самом деле отправить заказ в базу данных ajax / php / mysql, поскольку я не очень хорошо знаю jquery.

2. Есть ли какая-то особая причина, по которой вам нужно использовать jQuery для этого? Поскольку у меня есть примеры Mootools под рукой.

3. Я предоставил некоторый пример кода. Пожалуйста, имейте в виду, что это всего лишь простая очистка данных, но этого должно быть достаточно, чтобы вы начали.

Ответ №2:

При событии сортировки будет функция обратного вызова, которую вы можете использовать для отправки AJAX-запроса PHP-скрипту, который обновляет базу данных. Представьте себе, что после выполнения действия сортировки (т. Е. перемещения одного элемента по кругу) вы отправляете значения (т. Е. упорядоченный список) в PHP-скрипт, который принимает эти значения и обновляет базу данных. Я предполагаю, что у вас есть опыт работы с MySQL, поскольку вы, похоже, знаете основы проблемы.