当前位置: 首页 > 面试题库 >

jQuery UI保存可排序列表

阎坚成
2023-03-14
问题内容

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

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

<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脚本中。“
editor”变量是在加载时设置的公共变量,它工作正常。排序工作正常,但是重新排序列表时,发布的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


问题答案:
$("#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);

}

应该这样做,我没有测试它,因为它是一个示例连接。我实际使用的实际脚本更特定于我的程序,这是显示概念的简化版本



 类似资料:
  • 因此,我有一个嵌套的jqueryui可排序项和一个可拖动项,我可以将副本拖动到任何级别的可排序项中。 请参阅此处的jsfiddlehttp://jsfidle.net/rmossuk/juna7/4/ 产品 项目1 项目2 项目3 项目5 项目6 项目4 纽维特姆 问题是,当我将NewItem拖到嵌套的可排序表(Item3)中时,receive事件会被调用3次。一次用于产品可排序,由于某种原因两次

  • 本文向大家介绍jqueryUI里拖拽排序示例分析,包括了jqueryUI里拖拽排序示例分析的使用技巧和注意事项,需要的朋友参考一下 示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码   这个是js代码主要在js代码中红色代码部分设置

  • 可排序列表是列表的扩展,可以对列表进行排序. 让我们来看一下可排序列表元素的布局结构: <!-- 加在列表区上额外的“sortable”类 --> <div class="list-block sortable"> <li> <div class="item-content"> <div class="item-media">...</div> <div class

  • 我有两张紧挨着的桌子。以下是模板的一个简短示例: 看起来是这样的: 我的目标是使用可排序的jquery-ui功能,通过同时拖放两个表的行来排序。换句话说-当用户单击例如从tabel1单元格然后整行 当鼠标向上时,应先拖动,然后再放下。我不需要在两个表之间拖放行—我需要在拖动时将两个表中的行视为一行—如果这些行在其表中具有相同的位置Y。 实际上,用例是我有网格,我需要在其中实现拖放行。用户可以冻结网

  • 问题内容: 我正在尝试对从JSON源填充的数据表进行排序。我的代码如下: HTML: JS: 小提琴:http : //jsfiddle.net/7czsM/1/ 如您所见,我试图将click函数添加到表标题中,以调用对数据进行排序的函数,但是它不起作用。 我已经在这里看到了这种方法的示例,该示例可以起作用:http : //jsfiddle.net/vojtajina/js64b/14/,但是当

  • 所以我有jQuery数据表设置和运行良好。我的最终目标是允许用户使用谷歌位置自动完成,更新他们的位置,然后在刷新时将一个“可排序”的距离列添加到我的数据表表中。 计划是在google autocomplete的文本输入旁边有一个按钮,上面写着使用这个地址,一旦用户使用autocomplete搜索并找到一个地址,然后按下按钮,我想(可能)将它们发送到加载页面几秒钟,同时 1) 阅读文本字符串,将其格