如何将自定义变量添加到 jQuery 可排序？答案

【问题标题】：How to add custom variable to jQuery sortable?如何将自定义变量添加到 jQuery 可排序？
【发布时间】：2016-12-07 11:22:42
【问题描述】：

我目前正在制作一个可排序的表，并且需要传递的不仅仅是 id 到序列化数组。

我添加了除 post 文件之外的所有代码，这些代码除了 var_dumping post 之外还可以做任何事情。

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12"><br><br><br><br>
            <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <th>Navn</th>
                <th>Order</th>
            </thead>
            <tbody id="sortable">
                <tr id="order_1" data-extravalue="45">
                    <td>value</t>
                </tr>
                <tr id="order_2" data-extravalue="56">
                    <td>value</t>
                </tr>
            </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {

        $('#sortable').sortable({
            update: function( event, ui ) {

                var order = $("#sortable").sortable('serialize');

                $.ajax({
                    data: order,
                    type: 'POST',
                    url: 'post.php'
                });
            }
        });
    });
</script>
</body>
</html>

【问题讨论】：

首先，您应该正确关闭<td> 标签：<td></td>。其次，您还想收集哪些其他信息？

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

不确定，但这可能会对您有所帮助。由于您要发布到 PHP，因此您需要在 $_POST['json'] 上使用 json_decode()。

工作示例：https://jsfiddle.net/Twisty/a2e9626L/4/

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <br>
      <br>
      <br>
      <br>
      <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%">
        <thead>
          <th>Navn</th>
          <th>Order</th>
        </thead>
        <tbody id="sortable">
          <tr id="order_1" data-extravalue="45">
            <td>value</td>
          </tr>
          <tr id="order_2" data-extravalue="56">
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

JavaScript

$(function() {
  $('#sortable').sortable({
    update: function(event, ui) {
      var order = $("#sortable").sortable('serialize');
      var data = [];
      $("#sortable tr").each(function(i, el) {
        data.push({
          order: $(el).attr("id"),
          value: $(el).data("extravalue")
        });
      });
      $.ajax({
        data: {
          json: JSON.stringify(data)
        },
        type: 'POST',
        url: 'post.php'
        success: function(d) {
          console.log(d);
        }
      });
    }
  });
});

【讨论】：

【解决方案2】：

如果您不介意公开参数，您可以随时将它们附加到请求 URL 中。

在你的情况下，像这样：

    $('#sortable').sortable({
        update: function( event, ui ) {

            var order = $("#sortable").sortable('serialize');

            $.ajax({
                data: order,
                type: 'POST',
                url: "post.php?extra_param=value,another_extra_param=another_value"
            });
        }
    });

我今天遇到了这个阻止程序，但是在 Rails 中，我就是这样解决的。

【讨论】：