使用拖放更新数据顺序

I show some data from the DB on a table ordered by a column in the DB called order:

<tbody>
    <tr id="1" data-order="1">
        <td>1</td>    <!-- id from DB -->
        <td>Test</td> 
        <td>1</td>    <!-- order from DB  --> 
        <td>
            <a>Edit</a>
            <a>Delete</a>
        </td>
    </tr>
    ..
</tbody>

I use jquery-uri for drag and drop http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

JS code:

jQuery("table tbody").sortable({
    update: function (event, ui) {
        UpdateOrder();
    }
});

function UpdateOrder() {
    jQuery("table tbody tr").each(function () {
        //Do something.
    }
}

It's working and I can drag and drop the elements, But how to save the new order of elements?

Like the WordPress menus drag and drop feature, Where you could organize the pages in the menu using drag-drop.

I could create a form beneath the table:

<form method="POST">
    <input type="submit" name="update_order" value="Save" >
</form>

Then check if that form is submitted:

if( isset($_POST['update_order']) ){
    global $wpdb;
    $wpdb->update('data', array("order" => ) , array('id' => ));
}

But how to gather all the elements order and ids to update them?

How to do that?

查看全部
duanpi7578
duanpi7578
2018/08/14 13:23
  • wordpress
  • php
  • ajax
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复