jquery .sortable()序列化方法onload

时间:2013-04-28 00:21:53

标签: jquery serialization jquery-ui-sortable

我正在使用可排序的序列化将命令保存到数据库,当我对排序的列表进行排序(即拖动)时,该数据库很好。但是我想在页面加载时自动序列化项目的顺序。

我使用以下内容对数据进行排序:

$(".menuSubSection_"+ <? echo $id; ?> +" ul.sortableSub").sortable({
                connectWith: "ul.sortableSub",
                placeholder: "ui-state-highlight",
                update: function(){
                $('#saved').html('ORDER CHANGED + SAVED');
                $('#saved').fadeIn( function(){
                $(this).delay(2000).fadeOut(); 
                });
                saveOrderSub('<? echo $id; ?>');

                },
                start: function(event, ui) {
                $('ul.sortableSub').find('li:hidden').show();

                }
});
});

以下函数将serialize存储到数据库:

function saveOrderSub(menuid){

       var order = $(".menuSubSection_"+ menuid +" ul.sortableSub").sortable("serialize"); //
       $.post("../lib/saveOrderSub.php?menuID=" + menuid ,order,function(theResponse){

               $('#saved').html(theResponse);
               $('#saved').fadeIn( function(){
                $(this).delay(2000).fadeOut(); 
               }); 
                //reloadMenu();
                reloadMenuNav();
                     });
       event.preventDefault();
}

我尝试将saveOrderSub(menuid)添加到标题部分,以便在加载时调用它,但序列和帖子似乎不起作用。

任何人都可以了解我如何在不更改列表顺序的情况下使用此功能来触发事件?

2 个答案:

答案 0 :(得分:0)

试试这个(在jQuery之后的任何地方):

<script>
  $(function(){
    saveOrderSub('<? echo $id; ?>');
  });
</script>

答案 1 :(得分:0)

jQuery UI Sortable API中,您可以找到名为“创建”的事件。该文档说明在创建可排序时会触发此事件。 也许这可以帮到你? 我认为对于您当前的实现,它看起来像这样:

$(".menuSubSection_"+ <? echo $id; ?> +" ul.sortableSub").sortable({
            connectWith: "ul.sortableSub",
            placeholder: "ui-state-highlight",
            //new
            create: saveOrderSub('<? echo $id; ?>'),
            update: function(){
            $('#saved').html('ORDER CHANGED + SAVED');
            $('#saved').fadeIn( function(){
            $(this).delay(2000).fadeOut(); 
            });
            saveOrderSub('<? echo $id; ?>');

            },
            start: function(event, ui) {
            $('ul.sortableSub').find('li:hidden').show();

            }
});