请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-6-4 11:20  /   查看:2060  /  回复:0
目前设计器的状态栏是不支持定制的,而原生的SpreadJS支持自定义状态栏。我们可以通过定制状态栏实现自定义显示的内容,包括显示选中的单元格内容、自定义求和等。
这贴子教大家如何实现自定义状态栏实现一个求和的功能。虽然该功能我们原生的状态栏也是自带的,但是有小伙伴想对求和加上自己想要的一些格式,这时候需要自己实现一个求和功能。

可以看到我们在每次改变选区的时候,状态栏也是跟着变化的,这个就需要关键的事件监听SelectionChanged。通过监听这个事件,每次选区变更时都可以将新的内容更新到状态栏。下面是定义新的item的方法。
  1. function Popup(name, options) {
  2.     StatusItem.call(this, name, options);
  3.   }

  4.   Popup.prototype = new StatusItem();
  5.   Popup.prototype.onCreateItemView = function (container) {
  6.     var statusBarDiv = (this.contentDiv = document.createElement("div"));
  7.     statusBarDiv.innerHTML = `<span>总和为:889</span>`;
  8.     statusBarDiv.style.padding = "0 3px";
  9.     container.appendChild(statusBarDiv);
  10.   };

  11.   Popup.prototype.updateText = function (text) {
  12.     this.contentDiv.children[0].innerText = text;
  13.   };

  14.   var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
  15.     document.getElementById("statusBar")
  16.   );
  17.   statusBar.bind(spread);
  18.   var sta = new Popup("Popup", {
  19.     menuContent: "自定义求和",
  20.     value: "666",
  21.     tipText: "求和",
  22.   });
  23.   statusBar.add(sta);
复制代码
在事件监听中,我们定义了一些方法计算求和,遇到字符串以及日期跳过不算。同时,由于js的精度问题,添加了toFixed限制小数位。
  1.   sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
  2.     for (
  3.       var i = info.newSelections[0].row;
  4.       i < info.newSelections[0].row + info.newSelections[0].rowCount;
  5.       i++
  6.     ) {
  7.       for (
  8.         var j = info.newSelections[0].col;
  9.         j < info.newSelections[0].col + info.newSelections[0].colCount;
  10.         j++
  11.       ) {
  12.         if (
  13.           isNaN(sheet.getValue(i, j)) === false &&
  14.           typeof sheet.getValue(i, j) !== "object"
  15.         )
  16.           sum += sheet.getValue(i, j);
  17.       }
  18.     }
  19.     x = String(sum).indexOf(".") + 1; //小数点的位置
  20.     y = String(sum).length - x; //小数的位数
  21.     console.log(y);
  22.     if (y > 4) sum = sum.toFixed(2);
  23.     sta.updateText("总和为:" + sum);
  24.     sum = 0;
  25.     statusBar.update();
  26.   });
复制代码
下载附件可以查看完整的demo。

自定义状态栏.zip

2.81 KB, 下载次数: 35

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部