【若依(ruoyi)】Bootstrap-Table的使用

sayyy

已于 2022-07-20 09:26:31 修改

阅读量2.4w

点赞数 2

分类专栏：若依(ruoyi) 文章标签：前端

于 2021-03-28 15:33:23 首次发布

本文链接：https://blog.csdn.net/sayyy/article/details/115280111

版权

若依(ruoyi) 专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍了若依(ruoyi)框架中对Bootstrap-Table的封装，包括如何简化初始化、操作表格以及支持多个表格的方法。讲解了如何通过$.table对象进行操作，如初始化表格、获取表格数据、根据ID获取行数据等，并给出了实例代码。此外，还展示了如何在表格中设置操作列并获取点击事件的this对象。参考链接提供了更多相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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 原生方式

获取所有数据

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);
        });