angular2中的表樹

我想使用jquery-treegrid在角度2中創建樹表。 1.我在package.json上添加了jquery-treegrid依賴項。 2.安裝打字稿jQuery庫： TSD中安裝jQuery 3.添加HTML代碼：angular2中的表樹

<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中運行表樹？

來源

2016-07-19 CSniper

我想這應該是

jQuery(this.rootNode.nativeElement).find('.tree')[0].treegrid();

（移動)）

來源

2016-07-19 12:43:10

是有你的代碼問題。你正試圖將一個jQuery方法綁定到一個DOM元素上，而這對於他們來說是不可用的，但是對於jQuery對象來說是不可用的。所以，你可以改成這樣：

jQuery(this.rootNode.nativeElement).find('.tree').first().treegrid();

至於你提到你正在使用jQuery的TreeGrid和我suppost它需要一個jQuery對象，所以你必須刪除[0]，因爲它的JQ對象轉換回DOM元素，而不是您可以使用.first()獲取類.tree的第一個元素。

來源

2016-07-19 12:46:20 Jai

angular2中的表樹

回答

相關問題