7

作業指示を保持する 2 つの並べ替え可能なリストがあります。2 番目のリストはRoute、最初のリストにまだ追加されていないすべての作業指示書のRouteリストです。アイデアは、ユーザーがRoute特定の順序で作業指示書を にドラッグし、作業指示書を再配置して、従業員がたどるルートを作成するというものです。

Route私の問題は、リストにドラッグされた新しい作業指示書の位置を管理することです。新しいアイテムが追加されているときに、すべてのリストアイテムの位置を (ajax 呼び出しを介してデータベース側で) 更新する簡単な方法はありますか?

明確にするためにもう少し情報...

リストが空の場合Route(作業指示がまだ追加されていない) は簡単です。ユーザーは新しい作業指示を空のリストにドラッグし、ajax 呼び出しを行って、RouteオブジェクトとRoute Item追加したばかりの両方の詳細を (サーバー上の基になるレコードに) 保存します。

ユーザーが 2 番目の作業指示書をリストにドラッグするRouteと、新しい作業指示書がリストの最初になるか 2 番目になるかを判断し、それに応じてリスト内のすべての項目のすべての情報 (サーバー側) を更新します。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リクエストで投稿を返すことができます。

 $(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 呼び出しを処理する方法を既に知っている場合は、2 つのリストを混在させても問題ありません。このページのコーディングの修正版を使用しています。そして、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!' というメッセージが表示されます。警告ボックスがポップアップします。また、新しいアイテムが別のリストから 1 つのリストにドラッグされると、「Receive!」というメッセージが表示されます。停止に加えてアラートボックスがポップアップします。イベントを使用しstopて Ajax 呼び出しをトリガーするreceiveこともできますが、新しいアイテムがリストに追加された場合にイベントを使用すると、別のことを行うのに役立ちます。

于 2013-01-26T01:12:18.907 に答える