我正在尝试使用jquery-treegrid在角度2中创建树表。 1.我在package.json上添加了一个jquery-treegrid依赖项。 2.安装typescript jquery库: tsd安装jquery 3.添加HTML代码:
<table class="tree">
<tr class="treegrid-1">
<td>Root node</td><td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-4 treegrid-parent-3">
<td>Node 1-2-1</td><td>Additional info</td>
</tr>
</table>
我的组件类:
declare var jQuery:any;
@Component({
selector: '[configuration]',
template: require('./configuration.html'),
encapsulation: ViewEncapsulation.None,
styles: [require('./configuration.scss')],
directives: [Widget, TablesBackgrid, DataTableDirectives],
providers: [ConfigurationService,
HTTP_PROVIDERS],
pipes: [SearchPipe]
})
export class Configuration implements AfterViewInit, OnInit {
data: ISystem[];
errorMessage: string;
constructor(private configurationService: ConfigurationService, private rootNode: ElementRef) {
}
ngAfterViewInit() {
jQuery(this.rootNode.nativeElement.find('.tree')[0]).treegrid();
}
ngOnInit(): void {
this.configurationService.getSystems()
.subscribe(systems => this.data = systems,
error => this.errorMessage = <any>error);
}
}
控制台中的错误:
TypeError: this.rootNode.nativeElement.find is not a function
我在这个论坛上听到了答案但是没有用。 是否有其他插件在angular2中运行表树?
答案 0 :(得分:0)
我想它应该是
jQuery(this.rootNode.nativeElement).find('.tree')[0].treegrid();
(感动)
)
答案 1 :(得分:0)
是的,您的代码存在问题。您正在尝试将jQuery方法绑定到DOM元素,但对于它们而言,它们不适用于jQuery对象。所以,你可以改为:
jQuery(this.rootNode.nativeElement).find('.tree').first().treegrid();
如你所说,你正在使用jQuery treegrid,我猜它需要一个jQuery对象,所以你必须删除[0]
,因为它将jQ对象转换回DOM元素,而不是你可以使用.first()
获取类.tree
的第一个元素。