如何从react-bootstrap-table中获取所选值的总和？

Question

如何从表格中抓取选定的值，并将其相加，以获得总值？我已经使用了第三方包react-bootstrap table：

​

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, {
  Component
} from 'react';
import './directorySubmissions.css';
import {
  BootstrapTable,
  TableHeaderColumn
} from 'react-bootstrap-table';



function onRowSelect(row, isSelected, e) {
  let rowStr = '';
  for (const prop in row) {
    rowStr += prop + ': "' + row[prop] + '"';
    console.log();
  }
  alert(`is selected: ${isSelected}, ${rowStr}`);
}

function onSelectAll(isSelected, rows) {
  alert(`is select all: ${isSelected}`);
  if (isSelected) {
    alert('Current display and selected data: ');
  } else {
    alert('unselect rows: ');
  }
  for (let i = 0; i < rows.length; i++) {
    alert(rows[i].id);
  };
}
var datalink = [{
    id: 1,
    ivalue: "INCLUDED",
    name: "test1",
    link: "https://www.test1.com/"
  },
  {
    id: 2,
    ivalue: "INCLUDED",
    name: "test2",
    link: "https://www.test1.com/"
  },
  {
    id: 3,
    ivalue: "INCLUDED",
    name: "test3",
    link: "https://www.test1.com/"
  },
  {
    id: 4,
    ivalue: 1000,
    name: "test4",
    link: "https://www.test1.com/"
  },
  {
    id: 5,
    ivalue: 1500,
    name: "test5",
    link: "https://www.test1.com/"
  },
  {
    id: 6,
    ivalue: 1000,
    name: "test6",
    link: "https://www.test1.com/"
  },
  {
    id: 7,
    ivalue: 500,
    name: "test7",
    link: "https://www.test1.com/"
  }
];

const data = datalink.map(item => {
  return ( <
    p > {
      item.ivalue
    } < /p>
  )
})


const selectRowProp = {
  mode: 'checkbox',
  selected: [1, 2, 3],
  clickToSelect: true,
  onSelect: onRowSelect,
  onSelectAll: onSelectAll
};


class DirectorySubmissions extends Component {
  render() {
    return ( <
      div className = "directoryContainer" >
      <
      div className = "col-sm-12" >
      <
      p > < strong > Data DIRECTORY < /strong><br / > SUBMISSIONS < /p> <
      div className = "line" > < /div> <
      /div>

      <
      div className = "col-xs-12 dirRowsubmission" >
      <
      BootstrapTable data = {
        datalink
      }
      selectRow = {
        selectRowProp
      } >
      <
      TableHeaderColumn dataField = 'id'
      isKey > < /TableHeaderColumn> <
      TableHeaderColumn dataField = 'ivalue' > < /TableHeaderColumn> <
      TableHeaderColumn dataField = 'name' > $595 .00 < /TableHeaderColumn> <
      TableHeaderColumn dataField = 'link' > data + ALL FREE SUBMISSIONS < /TableHeaderColumn> <
      /BootstrapTable> {
        data
      } <
      /div> <
      /div>
    );
  }
}

export default DirectorySubmissions;

Answer 1

我知道我回答这个问题有点晚了，但如果它有帮助的话

您可以为所有复选框指定一个类，如下所示

  text: (
    <div class="form-check">
      <input class="checkone " type="checkbox" value="" id="a" />
      Select All
    </div>
  ),
  formatter: (rowContent, row) => {
    return (
      <div>
        <div class="form-check">
          <input
            class="form-checkbox checkboxes"
            type="checkbox"
            value={row.id}
            checked={row.is_assign == 1}
          />
        </div>
      </div>
    );
  },
},

通过jQuery计算所有选中的行数，如下所示

jQuery.each(jQuery(".form-checkbox:checked"), function() {
    //code here
  });