前言
- 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/qq_38410795/article/details/85261638
https://www.bootstrap-table
https://bootstrap-table
更多推荐
【若依(ruoyi)】Bootstrap-Table的使用
发布评论