让 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
的工作快照
显然,在主设置对象中设置 type
和 invalidCellClassName
设置适用于整个 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>
我有一段代码可以将手串化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
的工作快照显然,在主设置对象中设置 type
和 invalidCellClassName
设置适用于整个 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>