bootstrap-menu 右键菜单

谢高峯
2023-12-01

1.首先引入**BootstrapMenu.min.js**

链接:https://pan.baidu.com/s/1KxVhRub5TfOROaRxYGJDVg
提取码:o5t4

// 操作代码
var menu = new BootstrapMenu('.table tbody tr', {//获取表格当前点击的行
        fetchElementData: function (row) {     //fetchElementData获取原数据并返回
            var dataRow = $table.bootstrapTable('getData')[row[0].dataset.index]
            return dataRow;
        },
        //自定义右键菜单的功能
        actions: {
            detailDescription: {
                name: '<font size=2>查看</font>',
                iconClass: 'uil-search-alt',// 图标
                onClick: function (row) {   
                 // 执行右击事件
                }
            },
            editDescription: {
                name: '<font size=2>更新</font>',
                iconClass: 'uil-edit',
                onClick: function (row) {   
                	//执行右击事件
                }
            }
        }
    });
/*表格菜单颜色/左边距*/
.dropdown-menu {
    padding-left: 5px;
    color: #bec1c5;
}

/*表格菜单<li>标签间距*/
.dropdown-menu li {
    padding-bottom: 5px;
}

/*表格菜单宽度*/
.bootstrapMenu ul {
    min-width: 6rem;
}

/*表格菜单字体颜色*/
.bootstrapMenu ul li a {
    color: #838f9c;
}
 类似资料: