可排序的Portlet更新查询

我试图更新与connectwith连接一些可排序的div。我之前完成了一个表，更新查询工作，但是当涉及多个div时，它会变得棘手。问题是我在数据库中有一个名为div的字段，它需要更新以及可排序对象正在放入的任何div，以及在该div内按特定顺序放置的字段。可排序的Portlet更新查询

编辑：SOOO，我怎么能创建多个div.id位置的排序更新查询？

结果我从刚刚更新一个DIV中的顺序代码工作进展，而是跨越多个div没有及时更新。另外，我并不确定找到div的最简单方法，我将内容移至内容并将其保存到数据库。

好了，所以这里是我到目前为止的代码只是一个专区内更新订单：

$(".heriyah").sortable({ 
    handle : '.handle', 
    connectWith: ".heriyah", 
    revert: "invalid", 
    update : function() { 
     var order = $('.heriyah').sortable('serialize'); 
     $("#info").load("admin/sortable.php?"+order); 
    } 
});

而且PHP：

foreach ($_GET['listItem'] as $position => $item) : 
    $sql[] = "UPDATE `temp` SET `order` = $position WHERE `id` = $item"; 
endforeach; 
print_r ($sql);

和HTML/PHP生成内容（使用大量的PHP和JQuery）：

<script type="text/javascript"> 
(function() { 
    $('div.heriyah').each(function() { 
    $(this).html('<div class="add"><div id="add_button_container"><div id="add_button" class="edit_links">+ ADD NEW CONTENT</div></div></div><div class="clear"></div><div class="placeable" style="height:20px;background-color:#fff;"></div></div>'); 

    var curID = $(this).attr('id');//get the id before you go into fallr 

$('.add').click(function() { 
$.fallr('show', { 
    content  : '<iframe width="620" height="600" src="<? echo $URL ?>/manage_content.php?pageID=<? echo $pageID; ?>&div='+ curID +'"></iframe>', 
    width  : 620 + 5, // 100 = for width padding 
    height   : 600, 
    closeKey  : true, 
    closeOverlay : true, 
    buttons  : {} 
    }); 
});  
}); 
})(); 
<? 
include_once('system/js/dbc.php'); 
$pageID = $_REQUEST['pageID']; 
$getdiv2 = mysql_query("SELECT * FROM temp WHERE pageID = '$pageID' ORDER BY `order` ASC"); 
while ($row = mysql_fetch_assoc($getdiv2)) 
{ 
    echo "$('#{$row['div']}.heriyah').append('<div class=sortable id=listItem_{$row['id']}><div id=heriyah_content class=sortable_header>{$row['title']}<br>{$row['maintext']}<div id=heriyah_handle class=handle></div><a onClick=edit_{$row['id']}();return false><div id=heriyah_content_hover></div></a></div></div>');\n"; 
} 
?> 
</script> 
<script> 
$(".heriyah").sortable({ 
    handle : '.handle', 
    connectWith: ".heriyah", 
    revert: "invalid", 
    update : function() { 
    var order = $('.heriyah').sortable('serialize'); 
    $("#info").load("admin/sortable.php?"+order); 
    } 
}); 
</script> 
<div id="info"></div>

来源

2011-11-21 drummer392

我需要澄清的人什么吗？ – drummer392

是的。请将实际问题放入您的帖子中。 – Tadeck

同意Tadeck。你通过使用你的代码得到的结果是什么以及需要哪种结果？ – arma

我生产了一些基于jQuery UI connect-lists例子。

我还没有实现后台调用或数据库端组件，但我敢肯定，你可以工作了这一点。我只对抓住已经移动的地方感兴趣。

收到当您在列表之间拖动项目时触发事件，以便我们可以使用它。

我们还需要搭上更新事件，但不感兴趣，那些已经被处理了由收到事件项目。要做到这一点，我们需要检查是否ui.sender是不确定的（因为这将是所有非连接列表传送）。但是，更新完成后，事件似乎会调用所有可排序的容器。我们只想在更新项目的父项与收到更新事件触发器的列表相同时捕获数据。（我希望是有道理的！）

总之，收到事件将被用来捕获所有的连接间列表传输和更新事件将捕获的元素列表内发生的任何排序。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <base href="http://jqueryui.com/demos/sortable/"/> 
    <meta charset="utf-8"> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
    <script src="../../jquery-1.6.2.js"></script> 
    <script src="../../ui/jquery.ui.core.js"></script> 
    <script src="../../ui/jquery.ui.widget.js"></script> 
    <script src="../../ui/jquery.ui.mouse.js"></script> 
    <script src="../../ui/jquery.ui.sortable.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
    #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } 
    #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } 
    </style> 
    <script> 
    $(function() { 
     $("#sortable1, #sortable2, #sortable3").sortable({ 
      connectWith: ".connectedSortable", 
      update: function(event, ui){ 
       if(($(ui.sender).attr('id') == undefined)&&($(this).attr('id') == ui.item.parent().attr('id'))){ 
        alert('UPDATE ' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text()); 
       } 
      }, 
      receive: function(event, ui){ 
       alert('RECEIVE: ' + $(ui.sender).attr('id') + '=>' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text()); 
      } 
     }).disableSelection(); 
    }); 
    </script> 
</head> 
<body> 
<div class="demo"> 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">A</li> 
    <li class="ui-state-default">B</li> 
    <li class="ui-state-default">C</li> 
    <li class="ui-state-default">D</li> 
    <li class="ui-state-default">E</li> 

</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">F</li> 
    <li class="ui-state-highlight">G</li> 
    <li class="ui-state-highlight">H</li> 
    <li class="ui-state-highlight">I</li> 
    <li class="ui-state-highlight">J</li> 
</ul> 

<ul id="sortable3" class="connectedSortable"> 
    <li class="ui-state-default">K</li> 
    <li class="ui-state-default">L</li> 
    <li class="ui-state-default">M</li> 
    <li class="ui-state-default">N</li> 
    <li class="ui-state-default">O</li> 
</ul> 

</div> 

</body> 
</html>

来源

2011-11-23 23:56:24

不错，我会奖励你50个代表，你也可以用'.attr（'id'）'发送一个ajax请求吗？ – drummer392

如果你想捕获你的列表的当前状态，我认为你需要发送至少3件事情到后端。目的地列表的ID，目的地列表中物品的位置以及已转移物品的唯一标识符（如果物品值是唯一的，您可以使用它）。例如你可能会使用带有键/值对数据映射的POST，但是如果你使用GET方法，你可以调用类似“admin/sortable.php？dest = sortable2＆pos = 2＆val = L” –

可排序的Portlet更新查询

回答

相关问题