让 handsontable 将数字视为数字类型

Let handsontable treat numeric as numeric type

我有一段代码可以将手串化table:JSBin。更改 handson 中的单元格值table 将更改其对应的字符串。

<html ng-app="app">
  <head>
    <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
    <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
    <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
    <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <hot-table hot-id="mytable" datarows="db"></hot-table>
      <br><br>
      <span>{{ data }}</span>
    </div>
  </body>
</html>

JavaScript:

function MainCtrl($scope, hotRegisterer) {
  $scope.db = [[5, 6], [7, 8]];

  $scope.$watch("db", function (newValue, oldValue) {
    console.log("$watch");
    var hot_instance = hotRegisterer.getInstance("mytable"); 
    $scope.data = hot_instance.getData();
  }, true)
}
MainCtrl.$inject = ['$scope', 'hotRegisterer'];

angular.module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl)

但是,如果我们在 table 中放入一个新的 numeric 值,它将被视为 string数组,与数组的其他值格式不对齐。

不知道为什么handsontbale默认把所有的单元格值都当成字符串类型。有没有一种方法可以将新的 numeric 单元格值视为 numeric 类型?

编辑 1: 按照@acesmndr 的回答,我已经完成了 this。我想向 db 添加一个观察者以根据列数更新 setting.columns 。但是,我意识到如果我们设置 settings.columns,我们将无法再通过上下文菜单 add/remove 列:

有人有解决办法吗?

您必须将列的设置设为数字。这是您的 jsbin

的工作快照

显然,在主设置对象中设置 typeinvalidCellClassName 设置适用于整个 table 允许您添加或删除列,这与我之前建议的列级别设置不同对此禁用添加或删除列的编辑。使用整个 table 设置更新的 jsbin 快照是 here

 function MainCtrl($scope, hotRegisterer) {
  $scope.db = [[5, 6], [7, 8]];
  $scope.settings = {
    type:  'numeric',
    invalidCellClassName: 'someCssClass'
  };
  $scope.$watch("db", function (newValue, oldValue) {
    console.log("$watch");
    var hot_instance = hotRegisterer.getInstance("mytable"); 
    $scope.data = hot_instance.getData();
  }, true)
}
MainCtrl.$inject = ['$scope', 'hotRegisterer'];

angular.module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl)

并将设置添加到 hot-table

  <hot-table hot-id="mytable" datarows="db" settings="settings"></hot-table>