表格组件：bootstrap-table（三：扩展使用 bootstrap-contextmenu 、 bootstrap-editable )

在前面  表格组件：bootstrap-table（二：高级使用） 中，对 bootstrap-table 进行了封装，这样可以对一些不常变的参数进行统一设置，如：分页类型、页码大小等。接下来，我们对bootstrap-table的 一些扩展插件进行介绍。

一、bootstrap-contextmenu 右键菜单

1. bootstrap-contextmenu 下载地址：https://github.com/sydcanem/bootstrap-contextmenu

    bootstrap-table-contextmenu 下载地址：https://github.com/prograhammer/bootstrap-table-contextmenu

2. 引入资源文件并定义菜单

<ul id="menu">
    <li data-item = "edit"><a href="">编辑</a></li>
    <li data-item = "delete"><a href="">删除</a></li>
</ul>
<script src=" /js/plugins/bootstrap-table-contextmenu/bootstrap-table-contextmenu.js"></script>

3. 加入my_table.js类

var my_table = function (obj, url, cloumns) {
    
    this.contextMenu = null;
    this.contextMenuButton = null,
    this.contextMenuTrigger = null,
    this.onContextMenuItem = null,
    this.beforeContextMenuRow = function(){},    
});

gyl_table.prototype = {
    init: function ()
    {
        this.instance = $("#" + obj).bootstrapTable({
            contextMenu: this.contextMenu,     //容器 ID
            contextMenuButton: this.contextMenuButton, // 按钮样式
            contextMenuTrigger: this.contextMenuTrigger,
            onContextMenuItem: this.onContextMenuItem, //点击按钮事件
            beforeContextMenuRow:this.beforeContextMenuRow, // 按钮响应前调用事件
        });        
    }
    setContextMenu: function (menu)
    {
            this.contextMenu = menu.contextMenu;
            this.contextMenuButton = menu.contextMenuButton;
            this.contextMenuTrigger = menu.contextMenuTrigger;
            this.onContextMenuItem = menu.onContextMenuItem;
      if(typeof(menu.beforeContextMenuRow) !=='undefined')
      {
                this.beforeContextMenuRow = menu.beforeContextMenuRow;
      }
    },
}

4. 初始化实例

var list= {
        menu: {
            contextMenu: '#menu',
            contextMenuButton: '.action-button',
            contextMenuTrigger: '',
            onContextMenuItem: function (row, $el) {
                switch ($el.data("item"))
                {
                     case 'delete': alert("删除");break;
                 }
            }
            },
            
            init: function()
            {
                var table = new my_table("table_list",url, columns());
                table.setContextMenu(this.menu);
                table.init();
            }
}


list.init();

二、bootstrap-editable 行内编辑

1. bootstrap-editable 下载地址： http://github.com/vitalets/x-editable

   bootstrap-table-editable 下载地址： https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

2.引入资源文件

<script src="/js/plugins/bootstrap-table/bootstrap-table-editable.js"></script>                 
<script src="/js/plugins/bootstrap3-editable/bootstrap-editable.min.js"></script>

3.调用

直接在 cloumns 内 加入：editable：true 即可。