我从数据库中动态获取列,所以我不知道会有多少列,但是行数是固定的。
这是一个示例
var data = [
['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
['number of cars', -5, 5, 12, 13],
['price of a car', 10, -11, 14, 13],
['tax', 2, 15, -12, 30],
['Total price of all cars', 10, -11, 14, 13],
['price before tax', 2, 15, -12, 30],
['price after tax', 2, 15, -12, 30]
],
container,
hot1;
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.color = 'green';
td.style.background = '#CEC';
}
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
// if row contains negative number
if (parseInt(value, 10) < 0) {
// add class "negative"
td.className = 'make-me-red';
}
if (!value || value === '') {
td.style.background = '#EEE';
}
else {
if (value === 'Nissan') {
td.style.fontStyle = 'italic';
}
td.style.background = '';
}
}
// maps function to lookup string
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
container = document.getElementById('example1');
hot1 = new Handsontable(container, {
data: data,
licenseKey: 'non-commercial-and-evaluation',
afterSelection: function (row, col, row2, col2) {
var meta = this.getCellMeta(row2, col2);
if (meta.readOnly) {
this.updateSettings({fillHandle: false});
}
else {
this.updateSettings({fillHandle: true});
}
},
cells: function (row, col) {
var cellProperties = {};
var data = this.instance.getData();
if (row === 0 || data[row] && data[row][col] === 'readOnly') {
cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'
}
if (row === 0) {
cellProperties.renderer = firstRowRenderer; // uses function directly
}
else {
cellProperties.renderer = "negativeValueRenderer"; // uses lookup map
}
return cellProperties;
}
});
.make-me-red {
color: #f00;
}
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot1 hot handsontable"></div>
我从数据库中获得了汽车数量。您定义:
所有汽车的总价应为汽车总数*每辆汽车的价格
税后价格应为汽车价格+税。
[我现在所能做的就是setDataAtCell
like this,我想要类似setDataAtRow
的东西,但我不想将单元格指定为参数。
您可以使用Hansontable列摘要,无需使用setDataAtCell / setDataAtRow方法。
https://handsontable.com/docs/7.3.0/demo-summary-calculations.html
columnSummary: function() {
// hotInstance(get total rows and total columns)
let sumRow = this.hot.countRows() - 1;
let colSummaryArr = [];
if(this.hot.countCols() > 0) {
// sum would be for column 3 onwards
for(let i = 3; i < this.hot.countCols(); i++) {
colSummaryArr.push({
destinationRow: sumRow - 1,
destinationColumn: i,
type: 'sum',
ranges: [
[0, this.hot.countRows() - 3]
],
})
// custom eg which calculates difference of sum row with certain value
colSummaryArr.push({
type: 'custom',
destinationRow: sumRow,
destinationColumn: i,
customFunction: function(endpoint) {
var hotInstance = this.hot;
function checkRange() {
let sum = 0;
for(let i = 0; i < hotInstance.countRows()-2; i++) {
sum += hotInstance.getDataAtCell(i, endpoint.destinationColumn);
}
return sum;
}
return 8 - checkRange();
}
})
}
return colSummaryArr;
}
else {
return [];
}
},