jQuery UI Sortable, a następnie zapis zamówienia do bazy danych
Chcę użyć funkcji jQuery UI sortable
, aby umożliwić użytkownikom ustawienie porządku, a następnie po zmianie, zapisanie go do bazy danych i aktualizację. Czy ktoś może napisać przykład jak to zrobić?
6 answers
JQuery UI sortable
funkcja obejmuje serialize
metoda aby to zrobić. To bardzo proste, naprawdę. Oto szybki przykład, który wysyła dane na podany adres URL, gdy tylko element zmieni pozycję.
$('#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'
});
}
});
Tworzy tablicę elementów za pomocą elementów id
. Więc zazwyczaj robię coś takiego:
<ul id="sortable">
<li id="item-1"></li>
<li id="item-2"></li>
...
</ul>
Kiedy użyjesz opcji serialize
, utworzy ona ciąg zapytania POST, taki jak: item[]=1&item[]=2
itd. Więc jeśli wykorzystasz - na przykład-Twój identyfikator bazy danych w atrybucie id
, możesz po prostu iterację poprzez opublikowaną tablicę i odpowiednio aktualizować pozycje elementów.
Na przykład w PHP:
$i = 0;
foreach ($_POST['item'] as $value) {
// Execute statement:
// UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
$i++;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-21 12:29:21
Pomyślałem, że to też może pomóc. A) został zaprojektowany, aby utrzymać ładunek do minimum podczas wysyłania z powrotem do serwera, po każdym sortowaniu. (zamiast wysyłać wszystkie elementy za każdym razem lub iterację przez wiele elementów, które serwer może wyrzucić) B) musiałem odesłać niestandardowe id bez naruszania id / nazwy elementu. Ten kod otrzyma listę z asp.net serwer a następnie przy sortowaniu zostaną odesłane tylko 2 wartości: db id sortowanego elementu oraz db id elementu obok który został porzucony. Na podstawie tych 2 wartości serwer może łatwo zidentyfikować nową pozycję.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-13 18:04:24
Masz szczęście, używam dokładnie tego w moim CMS
Aby zapisać zamówienie, wystarczy wywołać metodę JavaScript saveOrder()
. Spowoduje wysłanie żądania AJAX POST
, aby saveorder.php, ale oczywiście zawsze można go zamieścić jako zwykły formularz.
<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();'/>
W saveorder.php; pamiętaj, że usunąłem całą weryfikację i sprawdzanie.
<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}
?>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-12 00:33:06
To jest mój przykład.
Https://github.com/luisnicg/jQuery-Sortable-and-PHP
Musisz złapać kolejność w zdarzeniu aktualizacji
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
update: function( event, ui ) {
var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
$.post( "form/order.php",{ 'choices[]': sorted});
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-26 05:39:09
Mogę zmienić wiersze, postępując zgodnie z zaakceptowaną odpowiedzią i powiązanym przykładem na jsFiddle. Ale z nieznanych powodów nie mogłem uzyskać identyfikatorów po akcji "stop or change". Ale przykład zamieszczony na stronie jQuery UI działa dobrze dla mnie. Możesz Sprawdzić ten link tutaj.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-02 14:50:01
Spróbuj z tym rozwiązaniem: http://phppot.com/php/sorting-mysql-row-order-using-jquery/ gdzie nowa kolejność jest zapisywana w jakimś elemencie HMTL. Następnie przesyłasz formularz z tymi danymi do jakiegoś skryptu PHP, i iterate koryta go z pętli for.
Uwaga: musiałem dodać kolejne pole db typu INT(11), które jest aktualizowane(timestamp'ed) przy każdej iteracji - służy do tego, aby skrypt wiedział, który wiersz jest ostatnio aktualizowany, albo skończysz z zakodowanymi wynikami.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-06 17:40:07