自定义状态栏实现求和

收藏

目前设计器的状态栏是不支持定制的，而原生的SpreadJS支持自定义状态栏。我们可以通过定制状态栏实现自定义显示的内容，包括显示选中的单元格内容、自定义求和等。
这贴子教大家如何实现自定义状态栏实现一个求和的功能。虽然该功能我们原生的状态栏也是自带的，但是有小伙伴想对求和加上自己想要的一些格式，这时候需要自己实现一个求和功能。

可以看到我们在每次改变选区的时候，状态栏也是跟着变化的，这个就需要关键的事件监听SelectionChanged。通过监听这个事件，每次选区变更时都可以将新的内容更新到状态栏。下面是定义新的item的方法。

function Popup(name, options) {
StatusItem.call(this, name, options);
}
Popup.prototype = new StatusItem();
Popup.prototype.onCreateItemView = function (container) {
var statusBarDiv = (this.contentDiv = document.createElement("div"));
statusBarDiv.innerHTML = `<span>总和为:889</span>`;
statusBarDiv.style.padding = "0 3px";
container.appendChild(statusBarDiv);
};
Popup.prototype.updateText = function (text) {
this.contentDiv.children[0].innerText = text;
};
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
document.getElementById("statusBar")
);
statusBar.bind(spread);
var sta = new Popup("Popup", {
menuContent: "自定义求和",
value: "666",
tipText: "求和",
});
statusBar.add(sta);

复制代码

在事件监听中，我们定义了一些方法计算求和，遇到字符串以及日期跳过不算。同时，由于js的精度问题，添加了toFixed限制小数位。

sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
for (
var i = info.newSelections[0].row;
i < info.newSelections[0].row + info.newSelections[0].rowCount;
i++
) {
for (
var j = info.newSelections[0].col;
j < info.newSelections[0].col + info.newSelections[0].colCount;
j++
) {
if (
isNaN(sheet.getValue(i, j)) === false &&
typeof sheet.getValue(i, j) !== "object"
)
sum += sheet.getValue(i, j);
}
}
x = String(sum).indexOf(".") + 1; //小数点的位置
y = String(sum).length - x; //小数的位数
console.log(y);
if (y > 4) sum = sum.toFixed(2);
sta.updateText("总和为:" + sum);
sum = 0;
statusBar.update();
});

复制代码

下载附件可以查看完整的demo。

		自动登录	找回密码
密码			立即注册

自定义状态栏实现求和

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证