基于bootstrapTable的若依框架如何获取表格选中行的整行数据?

导语
项目是基于若依框架写的,大部分的底层技术都是bootstrap。

最近在写一个项目的时候遇见一个需求,需要将子页面表格中选中的数据回传给父页面。为了减少网络请求,所以就准备直接使用子父页面传值。于是我查看了一下ruoyi.js源码,发现其中只有获取选中的数据id值的函数,并没有获取整行数据的函数。不过根据现有的函数发现获取整行数据是可以实现的。

第一步 分析源码

以下是获取选中行的指定列的值的代码,可以看见在回传数据的时候,都标明了指定列,所以我们只需要重写一个函数,不标明指定列就可以实现想要的功能了。

selectColumns: function(column) {
   //获取当前选中的值
   var rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
     return row[column];//传回指定列的值
 });
   //如果设置了记住选中数据
   if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
      var selectedRows = table.rememberSelecteds[table.options.id];
      if($.common.isNotEmpty(selectedRows)) {
      rows = $.map(table.rememberSelecteds[table.options.id], function (row) {
             return row[column];//回传指定列的值
         });
      }
   }
   //去重
   return $.common.uniqueFn(rows);
},

第二步 重写函数 获取选中行的整行数据

 根据现有的函数,改起来也很简单。直接将指定列的部分删除就好,不过值得注意的一点就是去重函数也需要重写

selectRows:function(){
   //获取当前选中的值
           let rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
      return row;
   });
   //如果设置了记住选中数据
   if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
      let selectedRows = table.rememberSelecteds[table.options.id];
      if($.common.isNotEmpty(selectedRows)) {
         rows = $.map(table.rememberSelecteds[table.options.id], function (row) {
            return row;
         });
      }
   }
   //去重
   return $.common.uniqueFnByRows(rows);
},

 第三步 重写去重函数

 在原有的去重函数下方重写一个新的去重函数就好 

uniqueFnByRows:function(array){
   var result = [];
   var hashObj = {};
   for (var i = 0; i < array.length; i++) {
      if (!hashObj[array[i].id]) {//参数id为主键,请根据自己的情况进行修改
         hashObj[array[i].id] = true;
         result.push(array[i]);
      }
   }
   return result;
},

 

 

 

你可能感兴趣的:(若依,bootstrapTable)