Question

我在表中显示了来自数据库的一些数据，该表由数据库中名为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>

我使用jquery-uri拖放http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

JS代码：

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

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

它正在工作，我可以拖放元素，但是如何保存元素的新顺序？

就像WordPress菜单的拖放功能一样，您可以在其中使用拖放来组织菜单中的页面。

我可以在表格下方创建一个表单：

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

然后检查该表单是否已提交：

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

但是如何收集所有元素order和id进行更新？

该怎么做？

Answer 1

请尝试这个

#include <iostream>
#include <sstream>
using namespace std;

int main()
{
    stringstream strstream;
    strstream << "Hello World";
    string str = strstream.str();
    cout << str << endl;
    return 0;
}

$(document).ready(function() {
    jQuery("table tbody").sortable();
    // Save button click event
       $("[name='update_order']").click(function(e){
       e.preventDefault();
       UpdateOrder();
    });
 });
 
 function UpdateOrder() {
    var jsonObj = [];
    var id = '';
    var existing_order = '';
    var updated_order = '';
    var updated_row = {};
    jQuery("table tbody tr").each(function (index, value) {
      if((index+1) != $(this).data('order'))
      { // To check whether the current row order has been changed or not. Only the changed order rows only needs to be updated.
        id = $(this).attr("id");
        existing_order = $(this).data('order');
        updated_order = (index+1);
        updated_row = {}
        updated_row ["id"] = id;
        updated_row ["existing_order"] = existing_order; // I just added for your reference. If you do not need this value, comment this line.
        updated_row ["updated_order"] = updated_order;
        jsonObj.push(updated_row);
      }
    });
    console.log(JSON.stringify(jsonObj));
//ex: [{"id":"2","existing_order":2,"updated_order":1},{"id":"3","existing_order":3,"updated_order":2},{"id":"1","existing_order":1,"updated_order":3}]
    $('form').append("<input type='hidden' name='updated_rows' value='"+JSON.stringify(jsonObj)+"'>").submit(); // To send the values to server side script (here, PHP). Please do empty validation before you send to server if you need
}

PHP脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table>
  <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>
      <tr id="2" data-order="2">
          <td>2</td>    <!-- id from DB -->
          <td>Test</td>
          <td>2</td>    <!-- order from DB  -->
          <td>
              <a>Edit</a>
              <a>Delete</a>
          </td>
      </tr>
      <tr id="3" data-order="3">
          <td>3</td>    <!-- id from DB -->
          <td>Test</td>
          <td>3</td>    <!-- order from DB  -->
          <td>
              <a>Edit</a>
              <a>Delete</a>
          </td>
      </tr>
  </tbody>
</table>
<form method="POST">
<input type="submit" name="update_order" value="Save" >
</form>

使用拖放操作更新数据顺序

1 个答案: