Bootstrap table右键功能实现方法

Bootstrap table右键功能实现方法

在Bootstrap table中实现右键菜单功能，需要借助一些第三方工具。下面是详细的实现方法：

（1）引入bootstrap-table-contextmenu插件。

<!-- 引入bootstrap-table-contextmenu插件 -->
<script src="path/to/bootstrap-table-contextmenu.min.js"></script>

（2）在table的data属性中添加需要显示的数据。

<table id="table" 
    data-toggle="table"
    data-context-menu="#context-menu"
    data-context-menu-auto="false"
    data-right-menu="#rightMenu"
>
<thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>Developer</td>
    </tr>
    <tr>
        <td>Susan</td>
        <td>30</td>
        <td>Designer</td>
    </tr>
    <tr>
        <td>Mike</td>
        <td>35</td>
        <td>Manager</td>
    </tr>
</tbody>
</table>

（3）定义右键菜单的html。

<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
    <li data-item="edit"><a href="#">Edit</a></li>
    <li data-item="delete"><a href="#">Delete</a></li>
</ul>

（4）定义右键菜单的点击事件。

 // 定义右键菜单的点击事件
$('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
    switch(field) {
        case 'edit':
            editRow(row.id);
            break;
        case 'delete':
            deleteRow(row.id);
            break;
    }
});

示例说明

（1）示例1：在表格中添加右键编辑和删除的功能。点击编辑会弹出一个编辑框，可以对数据进行修改；点击删除会弹出一个确认删除的提示框，确认后会删除该条数据。

<!-- 定义表格 -->
<table id="table" 
    data-toggle="table"
    data-context-menu="#context-menu"
    data-context-menu-auto="false"
    data-right-menu="#rightMenu"
>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th colspan="2">Operation</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
        <td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Susan</td>
        <td>30</td>
        <td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Mike</td>
        <td>35</td>
        <td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
</tbody>
</table>

<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
    <li data-item="edit"><a href="#">Edit</a></li>
    <li data-item="delete"><a href="#">Delete</a></li>
</ul>

<!-- 定义编辑框和删除提示框 -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name">
                </div>
                <div class="form-group">
                    <label for="age">Age:</label>
                    <input type="text" class="form-control" id="age">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Confirm delete</h4>
            </div>
            <div class="modal-body">
                Are you sure to delete this row?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="delete-btn">Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery和bootstrap-table-contextmenu插件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table-contextmenu@1.0.2/dist/bootstrap-table-contextmenu.min.js"></script>

<script>
$(document).ready(function () {
    // 点击编辑按钮弹出编辑框
    $('.edit-btn').click(function () {
        var row = $(this).closest('tr').find('td');
        $('#name').val(row.eq(1).text());
        $('#age').val(row.eq(2).text());
        $('#edit-modal').modal('show');
        $('#save-btn').off('click');
        $('#save-btn').on('click', function() {
            row.eq(1).text($('#name').val());
            row.eq(2).text($('#age').val());
            $('#edit-modal').modal('hide');
        });
    });

    // 点击删除按钮弹出确认删除对话框
    $('.delete-btn').click(function () {
        var row = $(this).closest('tr');
        $('#delete-modal').modal('show');
        $('#delete-btn').off('click');
        $('#delete-btn').on('click', function() {
            row.remove();
            $('#delete-modal').modal('hide');
        });
    });

    // 定义右键菜单的点击事件
    $('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
        switch(field) {
            case 'edit':
                var tr = $('#table').find('tr[data-index="' + row.index + '"]');
                tr.find('.edit-btn').click();
                break;
            case 'delete':
                var tr = $('#table').find('tr[data-index="' + row.index + '"]');
                tr.find('.delete-btn').click();
                break;
        }
    });
});
</script>

（2）示例2：在表格中添加右键复制的功能。点击复制会复制该条数据，并插入一条新数据。

<!-- 定义表格 -->
<table id="table" 
    data-toggle="table"
    data-context-menu="#context-menu"
    data-context-menu-auto="false"
    data-right-menu="#rightMenu"
>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th colspan="2">Operation</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>25</td>
        <td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Susan</td>
        <td>30</td>
        <td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Mike</td>
        <td>35</td>
        <td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
        <td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
    </tr>
</tbody>
</table>

<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
    <li data-item="copy"><a href="#">Copy</a></li>
</ul>

<!-- 引入jQuery和bootstrap-table-contextmenu插件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table-contextmenu@1.0.2/dist/bootstrap-table-contextmenu.min.js"></script>

<script>
$(document).ready(function () {
    // 点击复制按钮复制该行数据并插入一条新数据
    $('.copy-btn').click(function () {
        var row = $(this).closest('tr').clone();
        var new_id = parseInt($('#table').find('tr:last td:first').text()) + 1;
        row.find('td:first').text(new_id);
        $('#table').append(row);
    });

    // 定义右键菜单的点击事件
    $('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
        switch(field) {
            case 'copy':
                var tr = $('#table').find('tr[data-index="' + row.index + '"]');
                tr.find('.copy-btn').click();
                break;
        }
    });
});
</script>

阅读剩余 83%

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap table右键功能实现方法 - Python技术站

Bootstrap table右键功能实现方法

相关文章

分享到: