Question

我使用JQuery UI进行排序，通过将每个元素拖动到所需的顺序来对列表#sortable进行排序。

我正在id li属性中存储项目的id（我知道这是无效的），以及order中rel的元素{1}}属性。

例如：

<li id="23" rel="1">First</li>
<li id="20" rel="2">Second</li>
<li id="24" rel="3">Third</li>

当我拖放rel元素时，我的代码成功更新了li - 这很好。

现在，当我单击提交按钮时，我想通过AJAX将一组数据发送到我的脚本，该脚本将执行更新查询。理想情况下，id将是key，rel值将是`值。

array(
       23 => 1
       20 => 2
       24 => 3
)

到目前为止，这是我的代码：

$('#submit').click(function(e) {
   e.preventDefault();

   //array
   var the_data = [];

   $('#sortable li').each(function() {

        the_data[$(this).attr('id')] = $(this).attr('rel');

   });

   console.log(the_data);         
});

我在FireBug中有很多次undefined，但如果我扩展它，所有值都在那里，有人可以解释一下是什么问题吗？至少对我来说是有意义的。

将数据数组发送到AJAX的最佳方法是什么？我读过有关Jquery .param()以及serialize

的文章

对此有什么最佳做法吗？

我的阿贾克斯：

myData=Jquery.param(the_data); //serialize the array?
$.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>admin/update_order/",
                data: myData,
                success: function(msg) {
                alert('Updated'); 
                },
                error: function(msg) {
                  alert(msg);       
                }
});

感谢。

Answer 1

我不会自己编写代码。只需使用jQuery UI Sortable中继承的功能。

绑定一个停止事件函数并使用.sortable（'serialize'）以新的顺序获取一个易于通过Ajax传递的格式的列表。

http://jqueryui.com/demos/sortable/#method-serialize

Answer 2

如果您查看jQuery UI可排序的文档，它会显示2个方法来获取ID的数组，以便用于您的目的。我会特别关注serialize方法，因为它越来越接近你想要的了。特别是如果你可以放弃rel属性，只需移动到一个强调的id。

Answer 3

请按照此链接正确处理jquery对ajax内容进行排序并绑定到更新函数请参阅此fiddle

Javascript

$(function () {
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
$("#log").html('update called');   }
});  });



$("#search").click(function() {
               loadDrop();               
           });

function loadDrop()
        {$.ajax({
                url:'/echo/html',
                success:function(){ 
                $("#trig").html('<div><ul id="sortable" class="contentLeft"><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li></div>');
                test();
$(".contentLeft").sortable({opacity: 0.6, cursor: 'move'});

                }
            });
        }
function test(){
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', 
update: function() {
 $("#log2").html('update called via ajax');
}});
}

JS / Jquery填充数组然后通过AJAX发送

3 个答案: