javascript - 使用 sortable.js 时如何在 php 中返回一个新数组

Question

我正在使用来自 http://farhadi.ir/projects/html5sortable/ 的可排序 javascript

该脚本对我来说工作正常，但是当我不了解 javascript 时，当您移动图片时如何创建代码以使用新顺序在 php 中取回数组是一个问题。

我现在使用的代码:

<section>
<ul class="sortable grid">

    <?php
    $i=1; 

    foreach ($werkbladen as $werkblad) {

        $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];

        echo '<li id = "'.$i.'"><img src="'.$thumbnail.'" width="139" height="181" /></li>';

        $i++;
    }
    ?>

</ul>
</section>

<script>
$('.sortable').sortable().bind('sortupdate', function() {

    //Triggered when the user stopped sorting and the DOM position has changed.

    // i will need here the code in javascript that creates a new array in php with the new order

});
</script>

我希望有人能帮我解决这个问题。

也许更多的解释也会有所帮助:这就是我的 session_array 的样子

Array
(
[0] => Array
    (
        [werkblad] => Array
            (
                [id] => 1105
                [database] => 1111
                [path] => groep12/1111
                [thumbnail] => mensen-kleding-03.jpg
                [bestand] => 
            )

    )

[1] => Array
    (
        [werkblad] => Array
            (
                [id] => 5639
                [database] => 1111
                [path] => groep12/1111/1111/
                [thumbnail] => mensen-kleding-1-minder-en-1-meer.jpg
                [bestand] => mensen-kleding-1-minder-en-1-meer.pdf
            )

    )

[2] => Array
    (
        [werkblad] => Array
            (
                [id] => 72
                [database] => 1111
                [path] => groep12/1111/
                [thumbnail] => passieve-woordenschat-02.jpg
                [bestand] => passieve-woordenschat-02.pdf
            )

    )

)

我需要的是一个包含排序图像的数组。该数组将被发送到一个从中创建 pdf 的 php 文件，因此我需要将所有信息恢复为原始信息。

亲切的问候，西茨科

Answer 1

我总是发现，如果我可以避免在某项任务中使用 JavaScript，这样做通常是值得的。至少在开始的时候，因为这意味着你的系统可以被更多的人使用。禁用脚本的回退在可访问性方面有好处，并且通常有助于指导您构建遵循可靠、易于理解的基线的应用程序。

我假设您了解 PHP，也会很好地理解 HTML。

非 JavaScript 解决方案

基本上，作为一个简单的解决方案，您需要做的就是将隐藏的输入呈现为可排序标记的一部分。这些输入必须使用无索引数组表示法命名，即 name="row[]" 以便在服务器端显示数据时遵循 HTML 顺序。

然后输入将负责将有意义的信息存储在 HTML 中。您可以使用 PHP 的 serialize() , 或 json_encode()处理复杂的值，或者——如果你可以在服务器端(即在数据库或 session 中)以集合或列表的形式访问数据——*首选只存储唯一 ID。

然后隐藏的输入将与 HTML 的其余部分一起排序。

*preferable : Why would storing just IDs be better? Not only will you be sending less data with simple IDs, less interference can occur if you end up with a malicious user. Someone who may attempt to post unwanted information to your server. You should always test and clean the data received from the outside world to your server, this is just easier to do when dealing with simple array key offsets — rather than complex data structures.

对已有的内容稍作改动

为了使其正常工作，您需要使用表单标签和**提交按钮，或者至少一些触发表单提交的号召性用语来包装您的可排序列表.然后，当提交被调用时——根本不需要利用 JavaScript——表单的目的地将以正确的顺序接收您的数据。

<form id="sorted" action="destination.php" method="post">
<section>
<ul class="sortable grid">
  <?php
  $i=1; 
  foreach ($werkbladen as $werkblad) {
    $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];
    /// I've used thumbnail as my stored data, but you use `$i` or anything you want really.
    $input = '<input type="hidden" name="row[]" value="' . $thumbnail . '" />';
    $image = '<img src="' . $thumbnail . '" width="139" height="181" />';
    echo '<li id="'.$i.'">' . $input . $image . </li>';
    $i++;
  }
  ?>
</ul>
</section>
</form>

**submit button : If I were to be generating a PDF, I wouldn't trigger its generation after every sort event. You would really want the user to request via a call-to-action because PDF generation is usually quite heavy process. Not to mention you waste bandwidth and processing time if the user hasn't finished with their ***ordering.

然后在 PHP 端，您将使用以下方法获取行信息:

$_POST['row']; // <-- this should be a sorted array of thumbnail paths.

***ordering : True, you could put a timeout delay on the sortupdate event, so as not to trigger after every sort. But my reasons for implementing a call-to-action are not just based on minimizing the work your server has to do. It is just a good idea to implement a call-to-action by default, and then progressively hide it away for users that either don't want or need it.

逐渐增强

如果您真的想要一个最新的排序交互预览，那么我仍然会实现上面的纯 HTML 解决方案，但会逐步使用 JavaScript 进行增强以添加额外的功能。您可以使用已经评论过的 AJAX/$sortable 解决方案来执行此操作。但是因为您现在有了一个表单，您可以使用 jQuery 的 .serialize()方法。这旨在采用一种形式并生成它本应作为名称-值对的字符串提交的数据。然后可以通过多种方式将此“URL”字符串发布或获取回服务器。

$('.sortable').sortable().bind('sortupdate', function() {
  var data = jQuery('form#sorted').serialize();
  console.log(data);
  /// there are a number of ways you can use this data
  /// send it via AJAX, open a new tab, open a pop-up window,
  /// open a preview iframe... even encode it using semaphore
  /// and create a canvas animation of waving flags.
});