jquery - 如何在 WordPress 中保存 jquery ui 可排序顺序

Question

我使用了jquery-ui-sortable，它工作得很好。但它没有保存他们的订单，我该如何保存它

任何一个帮助这是我的代码

<?php
add_action('wp_enqueue_script','image_sort');       
function image_sort(){  
    wp_enqueue_script( 'jquery-ui-sortable' );  
    }
?>
<script type="text/javascript">
jQuery(document).ready( function($) {
   $('table#image_sort tbody').sortable();
});

</script>
<?php if(!empty($wp_logo_slider_images)) : ?>   
<table class="widefat fixed" cellspacing="0" id="image_sort">
    <thead>
        <tr>
            <th scope="col" class="column-slug">Image</th>
            <th scope="col">Image Links To</th>
            <th scope="col" class="column-slug">Actions</th>
        </tr>
    </thead>
         <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
             </tr>
    </tbody>
</table>

Answer 1

首先，在文件中正确调用 jQuery lib，并将值保存在 wp_options 中

function image_sort(){  
wp_enqueue_script('jquery');
?>
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<?php 
wp_enqueue_script('jquery-ui-sortable');
?>
<script type="text/javascript">

jQuery(document).ready( function(e) {
   jQuery('#image_sort').sortable({
            items: '.list_item',
            opacity: 0.5,
            cursor: 'pointer',
            axis: 'y',
            update: function() {
                var ordr = jQuery(this).sortable('serialize') + '&action=list_update_order';
                jQuery.post(ajaxurl, ordr, function(response){
                    //alert(response);
                });
            }
      });
});

</script>
<?php
    }
    add_action('admin_head','image_sort');

function order_list(){
        global $wp_logo_slider_images;

        $list = $wp_logo_slider_images;
        $new_order = $_POST['list_item'];
        $new_list = array();

        foreach($new_order as $v){
            if(isset($list[$v])){
                $new_list[$v] = $list[$v];
            }
        }
        update_option('wp_logo_slider_images',$new_list);
    }
    add_action('wp_ajax_list_update_order','order_list');

<table class="widefat fixed" cellspacing="0" id="image_sort" style="width:100%; table-layout:inherit;">
     <tr id="list_item_<?php echo $image ?>" class="list_item">
         Your Values
     </tr>
</table>

希望你能找到答案