0

我有一个要求，我必须将一行从一个表删除到另一个表的行。在删除期间，一些源列应该被添加到目标中。例子：

源表有column Id, Number of Bundles,Number of tags和Target has Id, Number of Bundles,Number of tags

在上面的示例中，将源行放在目标行上时，如何分别添加Number of Bundles列值和Number of Tags列值？

如果一行中只有一列，我已经达到了拖放和添加值的能力。感谢任何帮助。我对 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

我自己做的，忘记更新了。我使用 JQuery UI 可拖放和 AJAX。在 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 回答