我有一个实践表,我需要在其中对列进行求和,最后的列具有所有列的总和。
我可以对所有列求和,问题是列是动态的,有时一个列有一个孩子,在这种情况下,我需要对两者的最大值求和,但我不知道该怎么做,!当只是一个只是加一。如果有一个子项,则将两列的最大值相加。!
例如:work1 是父级。孩子是 help 1,数组 cols 来自数据库
示例http://jsfiddle.net/duxL728h/
function hexRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
}
var hot = new Handsontable($("#exampleGrid")[0], {
data: [
[0, 0, 0, 0],
[0, 0, 0, 0]
],
fillHandle: false,
minSpareCols: 0,
minSpareRows: 0,
columns: [{
data: 'work.name',
title: 'Name',
readOnly: true,
type: 'numeric',
width: 100
}, {
data: 'work.1',
parent: "1",
title: 'work 1',
type: 'numeric',
width: 50
}, {
data: 'work.2',
parent: "1|h",
title: 'help 1',
type: 'numeric',
width: 50
}, {
data: 'work.3',
parent: "3",
title: 'work 2',
type: 'numeric',
width: 50
}, {
data: 'work.4',
parent: "3|h",
title: 'help 2',
type: 'numeric',
width: 50
}, {
data: 'work.5',
parent: "5",
title: 'work 3',
type: 'numeric',
width: 50
}, {
data: 'work.6',
parent: "6",
title: 'work 4',
type: 'numeric',
width: 50
}, {
data: 'work.7',
parent: "6|h",
title: 'help 4',
type: 'numeric',
width: 50
}, {
data: 'total',
title: 'Total',
readOnly: true,
width: 100,
type: {
renderer: function(instance, td, row) {
let cols = instance.countCols() - 1;
let total = 0;
for (let index = 1; index < cols; index++) {
total += instance.getDataAtCell(row, index);
}
td.innerHTML = total;
}
}
}
],
afterChange: function(changes, source) {
console.log("proces to save data")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/demo/css/samples.css">
<script type="text/javascript" src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/dist/handsontable.full.css">
<div id="exampleGrid" class="dataTable"></div>
我通过更改数据键来修复它,以便轻松识别哪个列是父列,哪个列是子列,如下所示。
function hexRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
}
var hot = new Handsontable($("#exampleGrid")[0], {
data: [
[0, 0, 0, 0],
[0, 0, 0, 0]
],
fillHandle: false,
minSpareCols: 0,
minSpareRows: 0,
columns: [{
data: 'work.name',
title: 'Name',
readOnly: true,
type: 'numeric',
width: 100
}, {
data: 'work.1',
parent: "1",
title: 'work 1',
type: 'numeric',
width: 50
}, {
data: 'help.1',
parent: "1|h",
title: 'help 1',
type: 'numeric',
width: 50
}, {
data: 'work.2',
parent: "3",
title: 'work 2',
type: 'numeric',
width: 50
}, {
data: 'help.2',
parent: "3|h",
title: 'help 2',
type: 'numeric',
width: 50
}, {
data: 'work.3',
parent: "5",
title: 'work 3',
type: 'numeric',
width: 50
}, {
data: 'work.4',
parent: "6",
title: 'work 4',
type: 'numeric',
width: 50
}, {
data: 'help.4',
parent: "6|h",
title: 'help 4',
type: 'numeric',
width: 50
}, {
data: 'total',
title: 'Total',
readOnly: true,
width: 100,
type: {
renderer: function(instance, td, row) {
const cols = instance.getCellMetaAtRow(row);
cols.shift();
const values = cols.reduce((acc, ele) => {
const [type, ind] = ele.prop.split('.');
const value = instance.getDataAtCell(row, ele.col);
if (value && (!acc[ind] || value > acc[ind])) {
acc[ind] = value;
}
return acc;
}, {});
td.innerHTML = Object.values(values).reduce((acc, e1) => acc + e1, 0);
}
}
}
],
afterChange: function(changes, source) {
// console.log("proces to save data")
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/demo/css/samples.css">
<script type="text/javascript" src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="http://handsontable.com/dist/handsontable.full.css">
<div id="exampleGrid" class="dataTable"></div>