Question

我想允许用户通过拖放来重新排序表中的列。我使用jquery.dragtable.js允许拖放并在拖放后保存订单甚至重新加载页面。在这里，我使用localStorage存储表顺序作为插件JS提供的选项。它只使用一张桌子。在多个具有名称列标题的表中，它不起作用。实际上，它用另一个表顺序值覆盖了以前的localStorage变量。

HTML：

<div ng-include="partial" xyz></div>
</div>

Jquery -

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Reorder</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>
<link rel="stylesheet" type="text/css" href="dragtable.css" />
</head>
<body>
    <table id="tblReg" class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Password</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody class="sort">
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>545trt574</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>na@email.com</td>
                <td>7788994320</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <table id="tblRegMaster" class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Password</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody class="sort">
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>545trt574</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>na@email.com</td>
                <td>7788994320</td>
            </tr>
        </tbody>
    </table>

我想工作reoder multipule table。请建议任何解决方案。感谢

插件参考：https://github.com/akottr/dragtable

Answer 1

我已经解决了这个问题，你可以从下面的url 查看jsFiddle。我希望这个片段可以帮助你。

jsfiddle.net/raeeshalam/rn8sxxba

jquery表列拖放重新排序

1 个答案: