前言

• ruoyi 4.6

若依(ruoyi)将 Bootstrap-Table 进行了封装。与原生的 Bootstrap-Table 使用有些区别，但区别不大。

若依(ruoyi)对 Bootstrap-Table 的封装

若依(ruoyi)封装 Bootstrap-Table 的代码在ruoyi-ui.js中。

若依(ruoyi)封装 Bootstrap-Table 的对象为$.table。通过$.table操作 Bootstrap-Table 得到了简化，且支持单页面中包含多个 Bootstrap-Table 。

比如：初始化 Bootstrap-Table

$.table.init(options);

对封装后的 Bootstrap-Table 的表格的使用，参考官方文档：https://doc.ruoyi.vip/ruoyi/document/qdsc.html#表格使用

若依(ruoyi)对多个 Bootstrap-Table 的支持

options 存放

在table.config中存放多个 table 的配置参数。

查看配置参数：

console.log(table.config);
console.log($.table.getOptionsIds());

获取第1个table的配置参数：

/* bootstrap-table1是table元素的ID */
table.set('bootstrap-table1');
console.log(table.options);

ps：推荐这个方式

或：

/* bootstrap-table1是table元素的ID */
console.log(table.config['bootstrap-table1']);

使用 Bootstrap-Table 原生方式

1. 获取所有数据

console.log($('#bootstrap-table1').bootstrapTable('getData'));

2. 根据ID获取某一行的数据
获取所有数据，然后遍历。这个方法 可行，但是还有更好的方法，使用 Bootstrap-Table 的 getRowByUniqueId 方法。

先确保初始化table时，带上了参数 uniqueId:'userId',

$(function() {
    var options = {
        id: "bootstrap-table1",
        toolbar: "toolbar1",
        url: prefix + "/list",
        createUrl: prefix + "/add",
        removeUrl: prefix + "/remove",
        updateUrl: prefix + "/edit/{id}",
        modalName: "用户",
        uniqueId:'userId',
        columns: [{
            checkbox: true
        },
        {
            field : 'userId', 
            title : '用户ID'
        },
        ...
        }]
    };
    $.table.init(options);
});

使用 getRowByUniqueId 方法：

console.log($('#bootstrap-table1').bootstrapTable('getRowByUniqueId',1));

获取 this

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "会员",
                uniqueId:'id',
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'sn',
                    title: '会员编号'
                },
               ...
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="resetMemberAccountPassword(this)" data-id="'+row.id+'" data-name="'+row.nickName+'"><i class="fa fa-edit"></i>重置密码</a> ');
		                return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
        
        function resetMemberAccountPassword(e) {
        	let thisObj = e;
        	let id = thisObj.dataset.id;
        	let nickName= thisObj.dataset.name;
        	alert("id:"+id+", nickName:"+nickName);
        });

还可以：

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "会员",
                uniqueId:'id',
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'sn',
                    title: '会员编号'
                },
               ...
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="resetMemberAccountPassword()" data-id="'+row.id+'" data-name="'+row.nickName+'"><i class="fa fa-edit"></i>重置密码</a> ');
		                return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
        
        function resetMemberAccountPassword() {
        	let thisObj = event.currentTarget;
        	let id = thisObj.dataset.id;
        	let nickName= thisObj.dataset.name;
        	alert("id:"+id+", nickName:"+nickName);
        });

参考

https://blog.csdn/qq_38410795/article/details/85261638
https://www.bootstrap-table
https://bootstrap-table