个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我是 npm 配置部分的新手，我正在尝试在使用 angular-cli (ng init) 创建的 angular 2 项目中使用 handsontable 库。我为此添加了 typescript 定义。
这是我的 app.component.ts
import { Component } from '@angular/core';
import 'handsontable/dist/handsontable.full.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngOnInit() {
}
ngAfterViewInit() {
const myData = [
["1", "2", "3", "4", "5", "6"]
];
const config = {
data: myData,
colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
startRows: 5,
startCols: 5,
minSpareCols: 1,
//always keep at least 1 spare row at the right
minSpareRows: 1
//always keep at least 1 spare row at the bottom,
};
(<any>$("#test")).handsontable(config);
}
}
app.component.html
<h1>
<div id ="test"></div>
</h1>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularStart2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
tsconfig.js
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
给我错误:
ReferenceError: Handsontable is not defined at r.fn.init.$.fn.handsontable (http://localhost:4200/vendor.bundle.js:87583:26) at AppComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:79:20)
我也试过用下面的方式导入
import {Handsontable} from 'handsontable';
它给了我以下错误
Uncaught Error: Cannot find module 'numbro'
at newRequire (handsontable.js:53) [<root>]
at :8000/vendor.bundle.js:102461:16 [<root>]
at Object.23.cellTypes (handsontable.js:4439) [<root>]
at newRequire (handsontable.js:58) [<root>]
我从https://github.com/handsontable/handsontable/issues/3627开始尝试了所有方法
最佳答案
目前HandsOnTable官方不支持Angular 2。引用论坛引用here .计划于今年第一季度推出。您可以为此功能投票here
因此，您必须像这样将 handsontable js 和 css 文件直接用于 angular2 应用程序-
第 1 步:在 Index.html 中，添加这两行-
<link rel="stylesheet" href="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.css">
<script src="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.js"></script>
第 2 步:示例 AppComponent.ts 如下所示-
import { Component, AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'my-app',
template: `
<h3>Angular2 Final 2.0.0</h3>
<h2>Handsontable Performance Test (10000x100)</h2>
<div id="example"></div>
`
})
export class AppComponent implements AfterViewInit {
container: any;
hot: any;
ngAfterViewInit() {
this.container = document.getElementById('example');
this.hot = new Handsontable(this.container, {
data: Handsontable.helper.createSpreadsheetData(10000, 100),
rowHeaders: true,
colHeaders: true,
// performance tip: set constant size
colWidths: 80,
rowHeights: 23,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false,
});
}
}
结果输出:
请注意 - 我使用的是 angular2 最终版本 2.0.0
关于typescript - 如何在角度 2 中使用 handsontable 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41638471/
24
4
0
如何使用 handsontable 中的 handsontable 禁用特定列。我希望第一列仅可编辑，其他三列被禁用。我对三列使用 readonly true 但如何禁用它不起作用....
如何使用 handsontable 中的 handsontable 禁用特定列。我希望第一列仅可编辑，其他三列被禁用。我对三列使用 readonly true 但如何禁用它不起作用....
似乎是一项简单的任务，但我还没有找到简单的解决方案。我的数据有时以空数组的形式出现，以便用户可以开始处理空表(标题除外)。该表有一个 minSpareRows:1所以我希望表格会出现那个备用行而不是其
问题 :我可以更改单元格的背景颜色，但不能更改标题的背景颜色。我可以在 Handsontable 中更改标题的背景颜色和字体颜色吗？ 最佳答案 您可以为此使用 jquery 或 css。例如，将背景颜
客户 ID 列设置为使用自动完成。自动完成值将各种客户信息连接在一起，以帮助用户选择正确的信息。选择后，客户 ID 将放入网格中。 我无法弄清楚如何使自动完成弹出窗口更宽，以便它适合连接的信息。 这就
在 Handsontable 中，当单击列标题时，将选择该列的所有单元格。有办法防止这种情况发生吗？ 我认为文档中没有这样的选项。我也没有在 Handsontable 库本身的源代码中找到事件在 DO
我正在尝试像这样更新 Handsontable 中的列设置: var newColumnSettings = [{ data: 0, readOnly: true }, { data: 1 }, {
我可以看到有一些方法可以在渲染前在单元格数组中创建注释，并使用上下文菜单。但是有没有办法在更改后创建评论？ 我最初试过这个: var errors = []; var hot = new Handso
如何在此下拉菜单中允许固定高度？ (柱车) 我一直在无休止地摆弄以解决高度问题。我想要一个最大 300px 的固定高度下拉菜单。我用过AutoRowSize handsontable 站点中的高度功能
我正在尝试在 Handsontable 网格内使用“Handsontable”编辑器。我希望用户能够从“下拉”类型菜单中进行选择，但该菜单显示多列相关数据(用户正在选择一个 ID 号，我希望能够显示相
我正在尝试使用 Handsontable 版本 0.34.4CE/1.14.2 PRO 在 Handsontable (HOT-in-HOT) 中创建 Handsontable。根据此处提供的文档，一
有没有什么方法可以从列名中获取列号？ 我只能检索列名，我需要 getCellMeta 的列号。 谢谢 最佳答案 使这个功能解决了我的问题: function GetColFromName(name)
我正在尝试将handsontable下拉列表的宽度设置为根据查找数据宽度，而不是列宽。如何做到这一点？ 请看下图。下拉列表太窄，无法容纳查找数据。 最佳答案 https://github.com/ha
我希望能够在Handsontable中编辑列标题的文本，但似乎无法弄清楚是否可以使它们可编辑。我想我可以将标题改成另一行，但我想尽可能避免这种情况。 澄清一下:我实际上是在寻找一种允许用户编辑 hea
是否可以在事件内部更改 Handsontable 实例中的源？ 下面是我的代码: var container2 = $('#example2'); var hot2 = new Handsontabl
HandsonTable 不会渲染所有行 - 它仅加载所有行的一部分。但是，当我执行 Ctrl+A 并将其粘贴到 Excel 中时，我会看到所有行。为什么 Handsontable 不显示所有行？
我正在尝试动态地将一列添加到手动表中。我在任何地方都没有看到示例，也没有在 API 中看到这样做的方法。有没有人找到一种方法来克服这个问题，或者有一些示例代码可供我查看，这会有所帮助。 谢谢。 最佳答
是否可以让 Handsontable 中的数据按未显示的字段排序？我有一个数据网格，我想显示它包含一个名为“sortOrder”的列，但我不想显示它。 排序需要在客户端完成，因为事件是通过网络套接字传
我正在使用 handsontable，我的代码是用 typescript/aurelia 编写的。我无法将复选框列居中对齐。我关注了this链接并将我的复选框列上的 className 设置为“htC
是否可以设置 max-width和 max-height对于 Handsontable 中的单元格？ 我试图通过 CSS 在 上进行设置和 元素，但这不起作用。 我在文档中看到您可以将列设置为特定宽
我是一名优秀的程序员,十分优秀！