table行拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table拖拽</title>
   
    <!--插件:bootstrap-table http://bootstrap-table.wenzhixin.net.cn/  -->
    <!--bootstrap-table扩展bootstrap-table-reorder-rows https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder-rows  -->
    <!--插件:jquery.tablednd.js -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tablednd.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#tableId").bootstrapTable({
                reorderableRows: true,
                onReorderRowsDrag: function (table, row) {
                    console.log(1)
                },
                onReorderRowsDrop: function (table, row) {
                    console.log(2)
                },
                onReorderRow: function (newData) {
                    console.log(3)
                }
            });

        });
    </script>
</head>
<body>
    <h2>Drag the table--Neven.Jr Production</h2>
    <table class="bordered" id="tableId">
        <thead>

            <tr>
                <th>#</th>
                <th>IMDB Top 10 Movies</th>
                <th>Year</th>
                <th>Action</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>The Shawshank Redemption</td>

            <td>1994</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>The Godfather</td>
            <td>1972</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>

            <td>3</td>
            <td>The Godfather: Part II</td>
            <td>1974</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>The Good, the Bad and the Ugly</td>
            <td>1966</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>Pulp Fiction</td>
            <td>1994</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>12 Angry Men</td>

            <td>1957</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td>Schindler's List</td>
            <td>1993</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>

            <td>8</td>
            <td>One Flew Over the Cuckoo's Nest</td>
            <td>1975</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr>
            <td>9</td>
            <td>The Dark Knight</td>

            <td>2008</td>
            <td>
                <a href="javascript:void(0);">Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>
        <tr class="nodrop nodrag">
            <td>10</td>
            <td>The Lord of the Rings: The Return of the King</td>
            <td>2003</td>
            <td>
                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
            </td>
        </tr>

    </table>
    <br>
</body>
</html>  

 https://files.cnblogs.com/files/xuguanghui/table%E8%A1%8C%E6%8B%96%E6%8B%BD.rar

 

或者使用sorttable插件: http://jqueryui.com/sortable/

posted @ 2017-11-09 15:25  直钩钓鱼  阅读(3110)  评论(0编辑  收藏  举报