blocks|key|350000|text|你走运了，我在我的CMS里用的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350001|当您想要存储订单时，只需调用JavaScript方法saveOrder()。它将向saveorder.php发出一个AJAX+POST请求，当然，您也可以始终将其作为常规表单发布。|offset|length|style|CODE|350002|<script+type="text/javascript">
function+saveOrder()+{
++++var+articleorder="";
++++$("#sortable+li").each(function(i)+{
++++++++if+(articleorder=='')
++++++++++++articleorder+=+$(this).attr('data-article-id');
++++++++else
++++++++++++articleorder+%2B=+","+%2B+$(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:+'+%2B+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();'/>|code-block|syntax|javascript|350003|在saveorder.php中，请记住我删除了所有的验证和检查。|350004|<?php
$orderlist+=+explode(',',+$_POST['order']);
foreach+($orderlist+as+$k=>$order)+{
++echo+'Id+for+position+'+.+$k+.+'+=+'+.+$order+.+'<br>';
}+++++
?>|350005|entityMap^0|0|Q|B|1R|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>You're in luck, I use the exact thing in my CMS</p>

<p>When you want to store the order, just call the JavaScript method <code>saveOrder()</code>. It will make an AJAX <code>POST</code> request to saveorder.php, but of course you could always post it as a regular form.</p>

<pre><code>&lt;script type="text/javascript"&gt;
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); 
        }); 
}
&lt;/script&gt;
&lt;ul id="sortable"&gt;
&lt;?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?&gt;
    &lt;li data-article-id='&lt;?=$article-&gt;Id()?&gt;'&gt;&lt;?=$article-&gt;Title()?&gt;&lt;/li&gt;
    &lt;?
}               
?&gt;   
&lt;/ul&gt;
   &lt;input type='button' value='Save order' onclick='saveOrder();'/&gt;
</code></pre>

<p>In saveorder.php; Keep in mind I removed all verification and checking.</p>

<pre><code>&lt;?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=&gt;$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '&lt;br&gt;';
}     
?&gt;
</code></pre>


blocks|key|132072|text|jQuery+UI+sortable功能包括一个用于执行此操作的serialize+method。这很简单，真的。这里有一个简单的示例，一旦元素的位置发生变化，它就会将数据发送到指定的URL。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|132073|$('#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'
++++++++});
++++}
});|code-block|syntax|javascript|132074|这样做的目的是使用元素id创建一个元素数组。所以，我通常会这样做：|132075|<ul+id="sortable">
+++<li+id="item-1"></li>
+++<li+id="item-2"></li>
+++...
</ul>|132076|当您使用serialize选项时，它将创建如下的POST查询字符串：item[]=1&item[]=2等。因此，如果您在id属性中使用-例如-您的数据库ID，那么您可以简单地迭代POSTed数组并相应地更新元素的位置。|132077|例如，在PHP中：|132078|$i+=+0;

foreach+($_POST['item']+as+$value)+{
++++//+Execute+statement:
++++//+UPDATE+[Table]+SET+[Position]+=+$i+WHERE+[EntityId]+=+$value
++++$i%2B%2B;
}|132079|Example+on+jsFiddle.|132080|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/sortable/|1|http://api.jqueryui.com/sortable/#method-serialize|2|http://jsfiddle.net/ryTsN/^0|A|8|W|9|A|8|0|W|G|1|0|0|B|2|0|0|4|9|Y|H|1O|2|0|0|0|0|K|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]|$9|1G|A|1H|1|1I]]|E|$]]|$1|F|3|G|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1N|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1V|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1W|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1X|8|@]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|W|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]]]

<p>The jQuery UI <a href="http://api.jqueryui.com/sortable/" rel="noreferrer"><code>sortable</code></a> feature includes a <a href="http://api.jqueryui.com/sortable/#method-serialize" rel="noreferrer"><code>serialize</code> method</a> to do this. It's quite simple, really. Here's a quick example that sends the data to the specified URL as soon as an element has changes position.</p>

<pre><code>$('#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'
        });
    }
});
</code></pre>

<p>What this does is that it creates an array of the elements using the elements <code>id</code>. So, I usually do something like this:</p>

<pre><code>&lt;ul id="sortable"&gt;
   &lt;li id="item-1"&gt;&lt;/li&gt;
   &lt;li id="item-2"&gt;&lt;/li&gt;
   ...
&lt;/ul&gt;
</code></pre>

<p>When you use the <code>serialize</code> option, it will create a POST query string like this: <code>item[]=1&amp;item[]=2</code> etc. So if you make use - for example - your database IDs in the <code>id</code> attribute, you can then simply iterate through the POSTed array and update the elements' positions accordingly.</p>

<p>For example, in PHP:</p>

<pre><code>$i = 0;

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

<p><a href="http://jsfiddle.net/ryTsN/" rel="noreferrer">Example on jsFiddle.</a></p>


blocks|key|132123|text|我想这也会有帮助。A)它的设计目的是在每次排序后将有效负载保持在最小，同时将其发送回服务器。(而不是每次都发送所有元素，或者迭代许多服务器可能会丢弃的元素)+B)我需要在不影响元素的id+/名称的情况下发回自定义id。这段代码将从asp.net服务器获取列表，然后在排序时只返回两个值:已排序元素的db和它被拖放到的下一个元素的db。基于这两个值，服务器可以很容易地识别新的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|132124|<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>|code-block|syntax|javascript|132125|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Thought this might help as well. A) it was designed to keep payload to its minimum while sending back to server, after each sort. (instead of sending all elements each time or iterating through many elements that server might chuck out) B) I needed to send back custom id without compromising the id / name of the element. This code will get the list from asp.net server and then upon sorting only 2 values will be sent back: The db id of sorted element and db id of the element next to which it was dropped. Based on those 2 values, server can easily identify the new postion.</p>

<pre><code>&lt;div id="planlist" style="width:1000px"&gt;
    &lt;ul style="width:1000px"&gt;
       &lt;li plid="listId1"&gt;&lt;a href="#pl-1"&gt;List 1&lt;/a&gt;&lt;/li&gt;
       &lt;li plid="listId2"&gt;&lt;a href="#pl-2"&gt;List 1&lt;/a&gt;&lt;/li&gt;
       &lt;li plid="listId3"&gt;&lt;a href="#pl-3"&gt;List 1&lt;/a&gt;&lt;/li&gt;
       &lt;li plid="listId4"&gt;&lt;a href="#pl-4"&gt;List 1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="pl-1"&gt;&lt;/div&gt;
    &lt;div id="pl-2"&gt;&lt;/div&gt;
    &lt;div id="pl-3"&gt;&lt;/div&gt;
    &lt;div id="pl-4"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript" language="javascript"&gt;
    $(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
            }
        });
    });
&lt;/script&gt;
</code></pre>


blocks|key|132148|text|这是我的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|132149|https://github.com/luisnicg/jQuery-Sortable-and-PHP|offset|length|132150|您需要在更新事件中捕获订单|132151|++++$(+"#sortable"+).sortable({
++++placeholder:+"ui-state-highlight",
++++update:+function(+event,+ui+)+{
++++++++var+sorted+=+$(+"#sortable"+).sortable(+"serialize",+{+key:+"sort"+}+);
++++++++$.post(+"form/order.php",{+'choices[]':+sorted});
++++}
});|code-block|syntax|javascript|132152|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>This is my example.</p>

<p><a href="https://github.com/luisnicg/jQuery-Sortable-and-PHP">https://github.com/luisnicg/jQuery-Sortable-and-PHP</a></p>

<p>You need to catch the order in the update event</p>

<pre><code>    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});
</code></pre>


blocks|key|350160|text|我可以通过遵循jsFiddle上接受的答案和相关的示例来更改行。但是由于一些未知的原因，我无法在“停止或更改”操作后获得ids。但是JQuery+UI页面中发布的示例对我来说工作得很好。你可以使用check+that+link+here.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|350161|entityMap|0|LINK|mutability|MUTABLE|url|https://jqueryui.com/sortable/^0|2Q|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I can change the rows by following the accepted answer and associated example on jsFiddle. But due to some unknown reasons, I couldn't get the ids after "stop or change" actions. But the example posted in the JQuery UI page works fine for me. You can <a href="https://jqueryui.com/sortable/" rel="nofollow">check that link here.</a></p>


blocks|key|350207|text|尝试使用这个解决方案：http://phppot.com/php/sorting-mysql-row-order-using-jquery/，将新订单保存在一些HMTL元素中。然后，将包含此数据的表单提交给一些PHP脚本，并使用for循环对其进行迭代。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|350208|注意:我不得不添加另一个INT(11)类型的db字段，它在每次迭代中都会更新(时间戳)-它的作用是让脚本知道哪一行最近更新了，否则你就会得到混乱的结果。|350209|entityMap|0|LINK|mutability|MUTABLE|url|http://phppot.com/php/sorting-mysql-row-order-using-jquery/^0|B|1N|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>Try with this solution: <a href="http://phppot.com/php/sorting-mysql-row-order-using-jquery/" rel="nofollow noreferrer">http://phppot.com/php/sorting-mysql-row-order-using-jquery/</a>
where new order is saved in some HMTL element.
Then you submit the form with this data to some PHP script,
and iterate trough it with for loop.</p>

<p>Note: I had to add another db field of type INT(11) which is updated(timestamp'ed) on each iteration - it serves for script to know which row is recenty updated, or else you end up with scrambled results.</p>


<p>I want to use the jQuery UI <code>sortable</code> function to allow users to set an order and then on change, write it to the database and update it. Can someone write an example on how this would be done?</p>


jQuery UI Sortable, then write order into a database

数据库

服务器

jQuery

我想使用jQuery UI sortable函数来允许用户设置订单，然后在更改时将其写入数据库并进行更新。有没有人可以写一个例子，说明如何做到这一点？

问jQuery UI可排序，然后将订单写入数据库
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI可排序，然后将订单写入数据库EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI可排序，然后将订单写入数据库
EN