JQuery UI 保存可排序列表

Posted 2023-02-24

【中文标题】JQuery UI 保存可排序列表

【英文标题】：JQuery UI Saving Sortable List

【发布时间】：2011-11-12 15:38:36

【问题描述】：

我知道以前有人问过这个问题，但解决方案对我不起作用。我正在尝试将项目的新排序保存到数据库中。

我已经大大简化了它，但这是它的基本思想。我有一个嵌入了可排序列表的表单。

<form id="itemlist">
    <ul id="itemsort">
       <li id="Item_1">Item<input type="hidden" name="itemid[]" value="itemsRowID01"/></li>
       <li id="Item_2">Item<input type="hidden" name="itemid[]" value="itemsRowID02"/></li>
       <li id="Item_3">Item<input type="hidden" name="itemid[]" value="itemsRowID03"/></li>
       <li id="Item_4">Item<input type="hidden" name="itemid[]" value="itemsRowID04"/></li>
    </ul>
</form>

我已加载 JQuery 和 JQuery UI，以下代码启用可排序列表功能并将项目 ID 和新排序顺序发布到 php 脚本。 “编辑器”变量是在加载时设置的公共变量，它工作正常。排序工作正常，但当我重新排序列表时，发布的 neworder 值似乎没有改变。

//sorting feature  
    $("#itemsort").live('hover', function() 
        $("#itemsort").sortable( 
            opacity:.5,
            update : function ()           

                var neworder =  $('#itemsort').sortable('serialize');
                var inputs = serializePost('#itemlist');

                $.post("core/actions.php",
                   'order': editor,
                   'inputs': inputs,
                   'neworder': neworder,function()

                       alert("Order saved.", 1);

                );
             
        );
    );

关于actions.php...

    if(isset($_POST['order']))

            //set a variable for each post
            $batchid = $_POST['inputs']['itemid'];

            parse_str($_POST['neworder'], $neworder);

            //count the number of entries to be ordered
            $count = count($batchid);        

            //use the count to create an incremental loop for each item to be updated.
            $i=0;
            while ($i <= $count) 

   $query ="UPDATE $_POST['order'] SET order=$neworder[item][$i] WHERE id=$batchid[$i]";
                ++$i;
            
        

我不确定为什么我为每件商品获得的订单不会改变。

有什么想法吗？

-L

【问题讨论】：

Holy SQL 注入漏洞，蝙蝠侠！ $query ="UPDATE $_POST['order'] SET order=$neworder[item][$i] WHERE id=$batchid[$i]"; 除了你原来的问题，这段代码非常危险。您需要确保在将输入变量传递给查询之前对其进行了清理，否则当有人恶意将 $_POST['inputs']['itemid'] 设置为 10 OR 1=1 或类似名称时，您可能会发现自己处于一个受伤的世界。

是的，我知道对不起，这只是我正在尝试做的最简单的例子。我实际上使用类和抽象层来保护我的方法不被注入。我不想尝试解释所有类和父类等。希望在我的 actions.php 脚本中调试逻辑仍然足够有意义。

【参考方案1】：

$("#list").live('hover', function() 
        $("#list").sortable(

            update : function () 

                var neworder = new Array();

                $('#list li').each(function()     

                    //get the id
                    var id  = $(this).attr("id");
                    //create an object
                    var obj = ;
                    //insert the id into the object
                    obj[] = id;
                    //push the object into the array
                    neworder.push(obj);

                );

                $.post("pagewhereyouuselist.php",'neworder': neworder,function(data));

            
        );
    );

然后在您的 PHP 文件中，或者在本例中为“pagewhereyouuselist.php”

$neworderarray = $_POST['neworder'];
//loop through the list of ids and update your db
foreach($neworderarray as $order=>$id)    
    //you prob jave a connection already i just added this as an example
    $con = mysql_connect("host","username","password");

    if (!$con)
         die('Could not connect: ' . mysql_error());
    

    mysql_select_db("my_db", $con);

    mysql_query("UPDATE table SET order = $order WHERE id = $id");
    mysql_close($con);

应该这样做 我没有测试它，因为它是一个示例连接。我实际使用的实际脚本更具体到我的程序这是一个简化版本来展示这个概念

【参考方案2】：

试试这个：

您的 html 字段

<form id="itemlist" method="POST">
    <ul id="itemsort">
        <li id="Item_1">Item 1<input type="hidden" name="itemid[]" value="itemsRowID01"/></li>
        <li id="Item_2">Item 2<input type="hidden" name="itemid[]" value="itemsRowID02"/></li>
        <li id="Item_3">Item 3<input type="hidden" name="itemid[]" value="itemsRowID03"/></li>
        <li id="Item_4">Item 4<input type="hidden" name="itemid[]" value="itemsRowID04"/></li>
    </ul>
</form>

JS发送订单：

$("#itemsort").live( 'hover', function() 
    $("#itemsort").sortable(
        update: function ()           
            var inputs = $('#itemlist').serialize();
            $.post("./jq-ui-test.php", inputs, alert("Order saved.") );
         
    );
);

保存订单：

if( isset( $_POST['itemid'] ) && is_array( $_POST['itemid'] ) ) 
    foreach( $_POST['itemid'] as $order => $item ) 
        $order = intval( $order );
        $item_esc = mysql_real_escape_string( $item );
        $sql_query = "UPDATE $_POST['order'] SET order=$order WHERE id = '$item_esc'";
    

另外，如果您希望启动顺序从 1 开始（而不是从 0 开始），请将 $order = intval( $order ); 更改为 $order = intval( $order ) + 1;

【讨论】：

所以这只是试图使用行 id 的 itemid 数组中的项目位置来设置它在数据库中的位置吗？我似乎无法让它工作。当您序列化项目列表时，它是使用原始 HTML 布局还是通过 javascript 调整后的新布局？

它似乎使用原始HTML的顺序而不是排序的顺序......也许像以前一样序列化排序的项目？

我仍然无法让它工作。序列化的表单 id 的顺序不反映拖放的顺序变化。我现在正在拔头发....