Question

我开始在React.js中开发，并且我使用了React-Bootstrap-Table。

我需要获取特定列总数的总和（更新搜索字段中的每个更改）。
我还想根据值为条件格式添加自定义CSS（例如，如果金额低于平均值，则需要为绿色文本如果金额接近平均黄色，如果金额高于平均但小于最大橙色，否则为红色。
数字字段也需要右对齐

可在此处查看代码

＆＃13;

var DataTable = ReactDataComponents.DataTable;

// Generate random data
var names = ['201801003', '201801002', '201801004', '201801005', '201801006'];
var cities = ['2018', '2017', '2017', '2017', '2017', '2017'];
var addresses = ['Travancore', 'Sivagangai', 'Pudhukottai', 'Madurai'];
var states = ['1200', '350', '6400', '1700', '750'];

var data = [];
for (var i = 0; i < 1000; i++) {
  data.push({
    id: i,
    name: names[~~(Math.random() * names.length)],
    city: cities[~~(Math.random() * cities.length)],
    address: addresses[~~(Math.random() * addresses.length)],
    state: states[~~(Math.random() * states.length)]
  });
}

var columns = [{
  title: 'CID',
  prop: 'name'
}, {
  title: 'Area',
  prop: 'city'
}, {
  title: 'Authority',
  prop: 'address'
}, {
  title: 'Amount',
  prop: 'state'
}];

ReactDOM.render(React.createElement(DataTable, {
  className: 'container',
  keys: 'id',
  columns: columns,
  initialData: data,
  initialPageLength: 5,
  initialSortBy: {
    prop: 'city',
    order: 'descending'
  },
  pageLengthOptions: [5, 20, 50]
}), document.getElementById("root"));

＆＃13;

<title>React Table</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/carlosrocha/react-data-components/v1.0.0/css/table-twbs.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<body>
  <br>
  <h3>&nbsp;&nbsp;&nbsp;Area</H3>
  <br>
  <div id="root"></div><br>
  <h3>&nbsp;&nbsp;&nbsp;Sum</H3>
  <br>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <script src="https://npmcdn.com/react-data-components@1.0.1/dist/react-data-components.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'></script>
</body>

＆＃13;

谢谢

Answer 1

对于您创建的每一行，将其添加到您所在州的计数器
根据计数器中的值执行条件css
使用css

如何使用条件格式求和列值和格式化单元格？

1 个答案: