bootstrap table怎么选择多行

Posted 2023-03-30

参考技术A 以下是JS代码$('#tb_departments').bootstrapTable(
url: MNG_DOMAIN + "/admin/v1/role/page/query.do", //请求后台的URL（*）
classes: "table table-hover",
dataType: "json",
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
queryParams: queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "roleNo", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
responseHandler: handel,
idField: "roleNo",
columns: [
checkbox: true
,
field: 'roleNo',
title: '角色编号',
sorttable: true
,
field: "roleNm",
title: "角色名称",
sorttable: true
],
silent: true, //刷新事件必须设置
formatLoadingMessage: function ()
return "请稍等，正在加载中...";
,
formatNoMatches: function () //没有匹配的结果
return '无符合条件的记录';
,
onLoadError: function (data)
$('#reportTable').bootstrapTable('removeAll');

);本回答被提问者采纳

使用 React-Table 选择多行？ （Shift + 单击）

【中文标题】使用 React-Table 选择多行？ （Shift + 单击）

【英文标题】：Selecting multiple rows with React-Table? (Shift + Click)

【发布时间】：2019-08-11 04:11:00

【问题描述】：

有谁知道用 React-Table 选择多行的方法。假设我们希望单击一行中的一个单元格，然后按 SHIFT，然后选择另一行，也许用 CSS 对选定的行进行颜色编码？这甚至可能吗？

【问题讨论】：

您找到解决方案了吗？

【参考方案1】：

我找到了一种方法。如果您有任何问题，请告诉我。基本上只需要自己实现。

   state = 
    selected: null,
    selectedRows: [],
  

  previousRow = null;

  handleClick = (state, rowInfo) => 
    if (rowInfo) 
      return 
        onClick: (e) => 
          let selectedRows = [];
          // if shift key is being pressed upon click and there is a row that was previously selected, grab all rows inbetween including both previous and current clicked rows
          if (e.shiftKey && this.previousRow) 
            // if previous row is above current row in table
            if (this.previousRow.index < rowInfo.index) 
              for (let i = this.previousRow.index; i <= rowInfo.index; i++) 
                selectedRows.push(state.sortedData[i]);
              
            // or the opposite
             else 
              for (let i = rowInfo.index; i <= this.previousRow.index; i++) 
                selectedRows.push(state.sortedData[i]);
              
            
           else 
            // add _index field so this entry is same as others from sortedData
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
            this.previousRow = rowInfo;
          
          this.setState( selected: rowInfo.index, selectedRows )
        ,
        style: 
          // check index of rows in selectedRows against all rowInfo's indices, to match them up, and return true/highlight row, if there is a index from selectedRows in rowInfo/the table data
          background: this.state.selectedRows.some((e) => e._index === rowInfo.index) && '#9bdfff',
        
      
     else 
      return