带有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可排序列表的主要内容,如果未能解决你的问题,请参考以下文章