jQuery UI 将可排序列表保存到 PHP 数组

Posted 2023-02-22

【中文标题】jQuery UI 将可排序列表保存到 PHP 数组

【英文标题】：jQuery UI saving sortable list to PHP array

【发布时间】：2013-06-19 14:35:40

【问题描述】：

我正在尝试将带有 jQ​​uery UI（可排序）的表格的顺序保存到 php 数组中。

我已经大大简化了它，但这是它的基本思想。我有一个嵌入了可排序列表的表格。该表是通过 PHP foreach 生成的，其中涉及包含在另一个文件 (config.php) 中的多维数组。

config.php:

<?php
$config     = array(
    "mno" => array('item 5'),
    "abc" => array('item 1'),
    "ghi" => array('item 3'),
    "pqr" => array('item 6'),
    "jkl" => array('item 4'),
    "vwx" => array('item 8'),
    "def" => array('item 2'),
    "stu" => array('item 7'),
);
?>

表（index.html）：

<table cellpadding="2" cellspacing="0" align="center" id="mytable">
    <tbody>

<?php
    $i = 0;
    include 'config.php';
    foreach($config AS $name => $value)
        $item = $value[0];
        echo '
        <tr id="'.$name.'-'.$i++.'">
            <td>'.$item.'</td>
        </tr>';
    
?>

    </tbody>
</table>

脚本 (index.html):

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add jQuery UI library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() 
        var fixHelper = function(e, ui) 
            ui.children().each(function() 
                $(this).width($(this).width());
            );
            return ui;
        ;

        $("#mytable tbody").sortable(
            helper: fixHelper,
            opacity: 0.5,
            scroll: false,
            update: function () 
                var data = $('#mytable tbody').sortable('serialize');
                $.post("edit.php", 'neworder': data);
            
        ).disableSelection();
    );
</script>

排序工作正常，但我不知道如何将 neworder 值 ($_POST['neworder']) 保存到数组中的 config.php 中。

我想我必须使用PHP函数uasort()（或uksort()，uksort()）和file_put_contents的组合来保存config.php中的新订单。

所以是这样的：

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['neworder'])) 
    /* 
    Here file_put_contents in config.php the new order. So:
    $config     = array(
        "mno" => array('item 5'),
        "abc" => array('item 1'),
        "ghi" => array('item 3'),
        "pqr" => array('item 6'),
        "jkl" => array('item 4'),
        "vwx" => array('item 8'),
        "def" => array('item 2'),
        "stu" => array('item 7'),
    );

    Becomes:
    $config     = array(
        "abc" => array('item 1'),
        "def" => array('item 2'),
        "ghi" => array('item 3'),
        "jkl" => array('item 4'),
        "mno" => array('item 5'),
        "pqr" => array('item 6'),
        "stu" => array('item 7'),
        "vwx" => array('item 8'),
    );

    After this is send by Jquery UI:
    neworder:abc[]=1&def[]=6&ghi[]=2&jkl[]=4&mno[]=0&pqr[]=3&stu[]=7&vwx[]=5

    I've tried this:
        $filename = 'config.php';

        $lines = file( $filename , FILE_IGNORE_NEW_LINES );
        $linenumber = 2;
        foreach( $_POST['neworder'] AS $name => $val)
            $phost = $val[0];

            $lines[$linenumber] = ' "'.$name.'" => array(\'' . $phost . '\'),';
            $linenumber++;
        

        file_put_contents( $filename , implode( "\n", $lines ) );

    But the '$val' is not send with Jquery only the order.

    */  

?>

【问题讨论】：

将数据保存到 php 文件中是个坏主意。您可以将它们存储为某种 json 或 xml 格式。如果您需要更大规模/更频繁地执行此操作，则必须使用数据库。

@GerritHoekstra 嗨，我想帮助你并认为这并不难，但我想知道你为什么这样做不好？当它变得更好时，我可以改变它的一部分吗？我的意思通常是一个包含两列或更多列的表格，可以使用 jui 和它的排序或当用户单击按钮时保存新订单？为什么不使用 JSON 或 XML 格式来保存？一个名为 JSON_Config_reader.php 的文件会读取该 JSON 文件并创建该数组？

@GerritHoekstra - 你知道吗。你可以给我评论说“不错的尝试”。

【参考方案1】：

$(function() $("ul.sortable").sortable( connectWith: '.sortable', update: function(event, ui) /* var position = $('.sortable').sortable('serialize', key: 'menu', connected: true );*/ $('div').empty().html( $('.sortable').serial() ); ); );

【讨论】：

(function($) $.fn.serial = function() var array = []; var $elem = $(this); $elem.each(function(i) var menu = this.id; $('li', this).each(function(e) array.push( menu + '['+e+']=' + this.id ); ); ); return array.join('&'); )(jQuery);

【参考方案2】：

有很多线程可以解决您的问题

jQuery UI Sortable, then write order into a database save jquery ui-sortable positions to DB Optimal way to save order of jQueryUI sortable list with Meteor http://dev.nirmalya.net/articles/javascript/saving-ordering-of-a-sortable-list-using-jquery-ui

我相信你会在那里找到你的答案。一切都是为了通过

获得订单

$('#mylist').sortable('toArray');

保存到数据库

然后从数据库中获取订单并使用循环正确显示。看看教程。

【参考方案3】：

您将希望使用带有闭包的 usort（在 php 5.3+ 中可用）以按您需要的顺序获取密钥。

$newOrder = $_POST["neworder"];
$config_keys = array_keys($config);
usort($config_keys, function($a, $b) use($newOrder) 
      return array_search($a, $newOrder) - array_search($b, $newOrder);
);

然后你就可以把rewrite $config改成新的顺序了

$newConfig = array();

foreach($config_keys as $key)
    $newConfig[$key] = $config[$key];

$config = $newConfig;
unset($newConfig);

从这里你可以用任何对你的用例最有意义的方法来持久化 $config。我建议不要使用它来创建一个 php 文件，更好的方法可能是使用

file_put_contents($cacheFile, serialize($config));

然后去检索

$config = unserialize(file_get_contents($cacheFile));

【讨论】：

谢谢，我会用这个。它适用于 jQuery UI 中的此修改：update: function () var a = $('#mytable tbody').sortable('toArray'); var newOrdering = []; for (var i=0; i<a.length; i++) newOrdering[i] = a[i].substring(0, a[i].indexOf('-')); $.post("edit.php", 'neworder': newOrdering);