将 sortable 添加到可扩展 table

Question

尊敬的 Whosebug 用户，

我已经为这个问题寻找了 3 天的解决方案，但我无法在 Internet 上找到它。我的工作是制作一个管理面板来添加发票。到目前为止，我所拥有的是一个 table，当您单击该行时它是可扩展的，我的目标是使其成为 sortable.

$(function() {
    $("tr.child-row").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().slideToggle();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
    <table class="table table-poducts">
        <thead>
            <tr>
                <th>
                    verbergen
                </th>
                <th>
                    Aantal
                </th>
                <th>
                    Verwijzing
                </th>
                <th>
                    Beschrijving
                </th>
                <th>
                    Angeboden prijs
                </th>
                <th>
                    Korting
                </th>
                <th>
                    Nieuwe prijs
                </th>
                <th>
                    Totaal
                </th>
                <th>
                    Acties
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="hide[]">
                </td>
                <td>
                    1
                </td>
                <td>
                    31516
                </td>
                <td>
                    DIGIDOT LED STRIP RGB HR 5m 24V BLACK PCB
                </td>
                <td class="text-right">
                    €285,00
                </td>
                <td class="text-right">
                    50%
                </td>
                <td class="text-right">
                    €142,50
                </td>
                <td class="text-right">
                    €142,50
                </td>
                <td>
                    <button id="btn">Click me</button>

                </td>
            </tr>
            <tr class="child-row">
                <td colspan="9">
                    <div id="test">
                        <table width="100%">
                            <tr>
                                <td width="50%">
                                    <textarea></textarea>
                                </td>
                                <td width="50%">
                                    <button class="btn btn-primary">kleine text</button>
                                </td>
                            </tr>
                        </table>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="hide[]">
                </td>
                <td>
                    1
                </td>
                <td>
                    31516
                </td>
                <td>
                    DIGIDOT LED STRIP RGB HR 5m 24V BLACK PCB
                </td>
                <td class="text-right">
                    €285,00
                </td>
                <td class="text-right">
                    50%
                </td>
                <td class="text-right">
                    €142,50
                </td>
                <td class="text-right">
                    €142,50
                </td>
                <td>
                    <button id="btn">Click me</button>

                </td>
            </tr>
            <tr class="child-row">
                <td colspan="9">
                    <div id="test">
                        <table width="100%">
                            <tr>
                                <td width="50%">
                                    <textarea></textarea>
                                </td>
                                <td width="50%">
                                    <button class="btn btn-primary">kleine text</button>
                                </td>
                            </tr>
                        </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我所说的排序table 的意思是您可以拖放它并在 table.

中的其他地方重新排序

我希望有人能帮我解决这个问题。

感谢您的关注。

Answer 1

您的 HTML 代码有很多错误。请审查它。您可以使用 jQueryUI library's sortable 轻松对它们进行排序。

 
    $( "#sortable" ).sortable({
   items: "tr",

    });
    $( "#sortable tr" ).disableSelection();

#sortable tr{
cursor:pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div  id="sortable">
<table>
  <tr>
    <th>verbergen</th>
    <th>Aantal  </th>
    <th>Verwijzing</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="hide[]"/></td>
    <td>1</td>
    <td>A </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="hide[]"/></td>
    <td>2</td>
    <td>B </td>
  </tr>
  <tr>
    <td> <input type="checkbox" name="hide[]"/></td>
    <td>3</td>
    <td>C </td>
  </tr>
  <tr>
    <td> <input type="checkbox" name="hide[]"/></td>
    <td>4</td>
    <td>D </td>
  </tr>
  <tr>
    <td> <input type="checkbox" name="hide[]"/></td>
    <td>5</td>
    <td>E</td>
  </tr>
  <tr>
    <td> <input type="checkbox" name="hide[]"/></td>
    <td>6</td>
    <td>F </td>
  </tr>
</table>
</div>

Answer 2

答案是在 sortable 中使用开始和停止功能并定义开始位置和结束位置，然后您可以从那里克隆子行。

将 sortable 添加到可扩展 table

Add sortable to extendable table

javascript

jquery

jquery-ui-sortable