0

テーブルから別のテーブルの行に1つの行をドロップする必要があるという要件があります。ドロップ中に、いくつかのソース列がターゲットに追加されるはずです。例：

ソーステーブルにはcolumn Id、、、、、、がNumber of BundlesありNumber of tagsますTarget has Id。Number of BundlesNumber of tags

Number of Bundles上記の例で、ソース行をターゲット行にドロップする場合、列値とNumber of Tags列値を別々に追加するにはどうすればよいですか？

行に列が1つしかない場合は、値をドラッグアンドドロップして合計することになりました。助けに感謝します。私はJQueryを初めて使用します。

以下のスクリプトコード（ここにhtmlコードを追加する方法がわかりません）：

source.draggable({
    revert: true,
    opacity: .75,
    containment: '.container',
    cursor: 'move',
        cursorAt: { top: 35, left: 45 },
    helper: function(event) {
        return $('<div class="drag-row"><table></table></div>')
            .find('table').append($(event.target).closest('tr').clone()).end();
    },
    appendTo: 'body'
});

target.droppable({
    drop: function(event, ui) {
        var classid = ui.helper.find('tr').attr('Number of Bundles');
        var name = ui.helper.find('.name').html();
        $(this).addClass('drophighlight')
                                .find('td')
                    .html(($(this).find('td').text()*1) + (ui.draggable.children("td").text() *1));


        //$(this).addClass('drophighlight')
                    //          .find('td')
                    //.html(ui.draggable.children("td").text()*1);
        //alert('row dropped ' + ui.draggable.children("td").text());
    },
    accept: source.selector
});

<div class="tcontainer">
      <table width="90%" border="1" id="t1">
        <caption>
          Source
        </caption>
        <tr>
          <th scope="col">Team</th>  
          <th scope="col">Number of Bundles</th>
          <th scope="col">Number of Orders</th>
          <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
          <td class="team">1</td>  
          <td class="bundle">100</td>
          <td class="name">9</td>
          <td class="name">15</td>
        </tr>
        <tr>
          <td class="team">2</td>  
          <td class="bundle">800</td>
          <td class="name">15</td>
          <td class="name">30</td>
        </tr>
        <tr>
          <td class="team">3</td>  
          <td class="bundle">550</td>
          <td class="name">11</td>
          <td class="name">26</td>
        </tr>
      </table>
    </div>
    <div class="tcontainer">
      <table width="90%" border="1" id="t2">
        <caption>Target</caption>
        <tr>
          <th scope="col">Team</th>  
          <th scope="col">Number of Bundles</th>
          <th scope="col">Number of Orders</th>
          <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
          <td class="team">1</td>  
          <td class="bundle">500</td>
          <td class="name">29</td>
          <td class="name">53</td>
        </tr>
      </table>
    </div>
4

1 に答える 1

0

私はそれを自分でやった、これを更新するのを忘れた。私はAJAXと一緒にJQueryUIのドラッグ可能およびドロップ可能を使用しました。UIでは、画像のdivコンテナー、＃imgHolder、およびドロップ可能なスクリプト関数で、すべてのビジネスルール（計算）AJAXが実行され、グラフも更新されます。これについてさらに情報が必要な場合はお知らせください。

擬似コード：

target.droppable({
    drop : function(event, ui) {
//place your business rules (AJAX)
refreshImage();
},
    accept : source.selector        
});

function refreshImage() {
d = new Date();
var url = "/scar-inception/piechart/drawPie"+d.getTime();
//set the DIV to the img tag 
$('#imgHolder').html('<img src="'+url+'" />');

}

于 2012-04-03T22:41:54.427 に答える