前言

• 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的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。