Tim*_*Tim 1 jquery jquery-ui jquery-plugins nested-sortable
我找到了一个名为nestedSortable的精彩jquery插件,效果很好.现在我需要做的就是使用新的排序顺序更新我的数据库.我正在使用PHP.
这是我感到困惑的地方.在提供的示例中,有三种获取输出的方法.序列化,层次结构和数组.
如何修改javascript以允许我将输出发送到PHP以通过POST进行处理?
我已经阅读了整个插件论坛,并从想要这个功能的人那里找到了一个保存功能形式的希望.不幸的是它是BYO getItemIdFromElement($element)和插件的开发者说他的阵列功能与更干净的代码做了完全相同的事情......
如果有人能帮助我理解这一点,我希望并真的很感激!
蒂姆
小智 7
我自己也经历过这个问题.在论坛上有一个解决方案,通过表单(表单解决方案)保存列表.我个人更喜欢AJAX,所以我写了自己的解决方案.要解决您的问题AJAX方式,您必须更改代码,如下所示:
更改:
$('ol.sortable').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
maxLevels: 3,
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div'
});
Run Code Online (Sandbox Code Playgroud)
在:
$('ol.sortable').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
maxLevels: 3,
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
update: function () {
list = $(this).nestedSortable('toHierarchy', {startDepthCount: 0});
$.post(
'http://www.domainname.com/ajax/ajax.php',
{ update_sql: 'ok', list: list },
function(data){
$("#result").hide().html(data).fadeIn('slow')
},
"html"
);
}
});
Run Code Online (Sandbox Code Playgroud)
然后,您需要创建一个处理数据的ajax.php页面:
<? if (!empty($_REQUEST["list"]) && !empty($_REQUEST["update_sql"])) {
if ($_REQUEST["update_sql"] = 'ok') {
if (!empty($_REQUEST["list"])) {
$list = $_REQUEST["list"];
foreach ($list as $key => $value) {
mysql_query("UPDATE categories SET order = '" . $key . "' WHERE id = '" . $value['id'] . "'");
}
echo '<span class="success">Successfully updated.</span>';
}
} } ?>
Run Code Online (Sandbox Code Playgroud)
可以改进PHP代码(检查MySQL注入等).您也可以删除示例中提供的其他功能,因为您不需要它们.不要忘记更改JavaScript中的POST URL;)祝你好运!