7

我有两个可排序的列表，其中包含工作订单。第二个列表是Route第一个列表，只是所有尚未添加到列表中的工单的Route列表。这个想法是，用户以特定顺序将工作订单拖入其中Route，重新排列工作订单以创建员工将遵循的路线。

我的问题是管理拖到Route列表中的新工作订单的位置。在添加新项目时，是否有一种简单的方法来处理更新所有列表项目的位置（通过 ajax 调用在数据库方面）？

为了清楚起见，提供更多信息...

当Route列表为空（尚未添加工作订单）时，这很简单 - 用户将新工作订单拖到空列表上，进行 ajax 调用以保存Route对象和Route Item刚刚添加的对象的详细信息（在服务器上的基础记录上）。

当用户将第二个工作订单拖到Route列表中时，我想确定新工作订单是否会成为列表中的第一个，或者第二个，然后相应地更新列表中所有项目的所有信息（服务器端）。当我想将新的工作订单添加到Route已经有 30 个工作订单的情况时，事情变得非常复杂。

有没有一种简单的方法可以做到这一点，或者只是编写大量的 jQuery 和后端函数来管理它？我一直在网上寻找解决方案，但找不到任何确定的东西。

4

2 回答 2

8

每次使用 ajax 调用进行更新时，您都可以保存每列的顺序。 工作 JSFiddle 示例

下面的解释：为此，您需要为每个可排序的项目提供一个唯一的 ID。例如：

    <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id='item1'>Item 1</li>
    <li class="ui-state-default" id='item2'>Item 2</li>
    <li class="ui-state-default" id='item3'>Item 3</li>
    <li class="ui-state-default" id='item4'>Item 4</li>
    <li class="ui-state-default" id='item5'>Item 5</li>
   </ul>
    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight" id='item6'>Item 6</li>
        <li class="ui-state-highlight" id='item7'>Item 7</li>
        <li class="ui-state-highlight" id='item8'>Item 8</li>
        <li class="ui-state-highlight" id='item9'>Item 9</li>
        <li class="ui-state-highlight" id='item10'>Item 10</li>
    </ul>

然后，您可以捕获每个可排序 li 的 id 并在 ajax 请求中返回 post。

 $(function () {
     $("#sortable1, #sortable2").sortable({
         connectWith: ".connectedSortable",
         update: function () {
             var order1 = $('#sortable1').sortable('toArray').toString();
             var order2 = $('#sortable2').sortable('toArray').toString();

             alert("Order 1:" + order1 + "\n Order 2:" + order2); //Just showing update
             $.ajax({
                 type: "POST",
                 url: "/echo/json/",
                 data: "order1=" + order1 + "&order2=" + order2,
                 dataType: "json",
                 success: function (data) {


                 }
             });

         }
     }).disableSelection();
 });

然后，您可以执行该过程以将订单保存在您正在请求的页面上。

于 2013-01-26T01:42:54.400 回答
4

有没有一种简单的方法可以做到这一点，或者只是编写大量的 jQuery 和后端函数来管理它？我一直在网上寻找解决方案，但找不到任何确定的东西。

几乎是的，但是如果您已经知道如何处理可排序的 Ajax 调用，那么混合两个列表就不是问题了。我正在使用此页面上编码的修改版本。我正在使用receive事件和stop事件来展示如何将简单的函数挂钩到基本的可排序编码中：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) { alert('Receive!'); },
      stop: function( event, ui ) { alert('Stop!'); }
    }).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>

所以当一个项目被排序并且排序停止时，“停止！” 弹出警告框。当一个新项目从另一个列表拖到一个列表中时，“接收！” 除了停止之外还会弹出警告框。您也许可以只使用该stop事件来触发 Ajax 调用，但receive如果/当将新项目添加到列表中时，该事件甚至可以用于执行其他操作。

于 2013-01-26T01:12:18.907 回答