前言

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

参考

https://blog.csdn.net/qq_38410795/article/details/85261638

【若依(ruoyi)】Bootstrap-Table的使用相关推荐

bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
Bootstrap table表格
Bootstrap table 使用类 Class="table" 既可让table美化样式 table 相关的Class 隔行换色 : table-striped ...
vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...
bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table php,bootstrap table Tooltip
bootstrap table Tooltip怎么用?直接上代码$("#tables").bootstrapTable({ search: true, pagination: tr ...
Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

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

前言