带有ajax更新的Jqueryui可排序列表

Posted

技术标签:

【中文标题】带有ajax更新的Jqueryui可排序列表【英文标题】:Jqueryui sortable list with ajax update 【发布时间】:2011-12-13 14:29:57 【问题描述】:

我正在使用 CodeIgniter 和 jQuery UI 可排序小部件来更改我的菜单列表位置。

例如,如果我的菜单列表是这样的:

<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>

我想将第一个菜单放在第二个菜单下面并让它保留在那里。

但是我有点卡在 jQuery 上。

这是获取列表元素的内容:

 <ul id="sortable"> 
    <?php  foreach ($rows as $r)
    
        echo '
        <li id="sort_'.$r->pid.'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 
            ' . $r->page_name . '
        </li>';
    

    ?>
</ul>

和 jquery:

$( "#sortable" ).sortable(
    placeholder: "ui-state-highlight",
    opacity: 0.6,
    update: function(event, ui) 
        var info = $(this).sortable("serialize");
        alert(info);
    
);
$( "#sortable" ).disableSelection(); 

我设法提醒了结果数组。

现在我不想让任何人为我写这个,只是提示如何使用 ajax 进行更新。

【问题讨论】:

【参考方案1】:

我认为您可以在更新方法中使用 $.ajax(..)。

http://api.jquery.com/jQuery.ajax/

$.ajax(
  url: "submit.php",
  data: info,
  context: document.body,
  success: function()
    // success
  
);

我只是检查信息是否已经序列化,所以这应该可以。您可以根据提交类型(post、get)添加method 属性。

【讨论】:

【参考方案2】:

首先感谢Kamil Lach的提示,我设法做到了

这是我的代码,也许有人会使用它

在我的控制器中创建了一个函数并在其中加载了模型

function sort_items()

    $this->load->model("admin/pages_model");
    $this->pages_model->sort_insert();

模型

function sort_insert()

    foreach($this->input->post("sort")  as $p => $id)
    
        $this->db->query(" UPDATE c_pages SET sort = ".$p." WHERE pid = ".$id." ");

       


$p 变量是空头头寸,id 是菜单 id

和jquery

$( "#sortable" ).sortable(
        placeholder: "ui-state-highlight",
        opacity: 0.6,
    update: function(event, ui) 
        var info = $(this).sortable("serialize");
        $.ajax(
            type: "POST",
            url: "http://localhost/frame/admin/pages/sort_items",
            data: info,
            context: document.body,
            success: function()
                // alert("cool");
            
      );

    
    );
    $( "#sortable" ).disableSelection();

我将 url 传递给我的更新模型加载的控制器函数

和视图文件

<?php  if($rows)  ?>
    <ul id="sortable">  
        <?php  foreach ($rows as $r)
        
            echo '
            <li id="sort_'.$r->pid.'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 
                ' . $r->page_name . '
            </li>';
        

        ?>

    </ul>
    <?php  else
    
        echo "There are no pages created yet";
     

     ?>

再次感谢您的提示卡米尔拉赫

【讨论】:

以防万一您不知道,我相信您的函数 sort_insert 对 sql 注入攻击是开放的。 php.net/manual/en/security.database.sql-injection.php

以上是关于带有ajax更新的Jqueryui可排序列表的主要内容,如果未能解决你的问题,请参考以下文章

带有 React.js 错误的 jQuery UI 可排序

防止在可排序的 JqueryUI 中删除列表项

jQueryUI 可排序多个列表而无需嵌套

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

jQueryUI 可排序和拖动速度问题

禁用 jQueryUI 中嵌套可排序项的拖动冒泡