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

时间:2013-06-22 15:57:04

标签: php jquery jquery-ui multidimensional-array foreach

我正在尝试将带有jQuery 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中的数组中。

我认为我必须将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.

    */  
}
?>

3 个答案:

答案 0 :(得分:1)

您将要使用带有闭包的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);
});

然后您可以将重写$ 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));

答案 1 :(得分:1)

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

  1. jQuery UI Sortable, then write order into a database
  2. save jquery ui-sortable positions to DB
  3. Optimal way to save order of jQueryUI sortable list with Meteor
  4. http://dev.nirmalya.net/articles/javascript/saving-ordering-of-a-sortable-list-using-jquery-ui
  5. 我相信你会在那里找到答案。一切都是通过

    获取订单
    $('#mylist').sortable('toArray');
    

    将其保存到数据库

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

答案 2 :(得分:0)

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