Bootstrap table右键功能的实现

最新推荐文章于 2024-05-10 09:38:03 发布

翔云123456

最新推荐文章于 2024-05-10 09:38:03 发布

阅读量7.1k

点赞数 1

分类专栏： Javascript html 文章标签： contextmenu 右键

本文链接：https://blog.csdn.net/lanyang123456/article/details/55006695

版权

Javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

最近遇到有一个需求，需要在Bootstrap table上使用右键。网上搜了半天没有找到，最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介绍使用contextMenu插件实现Bootstrap table右键功能。

代码(test.html)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap.min.css">
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap-table.css">
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet"/>


<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>

</head>

<body>

<table id="item_table"></table>

<script>

$('#item_table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
});


$.contextMenu({
    // define which elements trigger this menu
    selector: "#item_table td",
    // define the elements of the menu
    items: {
        foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
        bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
    }
    // there's more, have a look at the demos and docs...
});

</script>

</body>
</html>