表格树在angular2

时间:2016-07-19 12:40:58

标签: jquery angular

我正在尝试使用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中运行表树?

2 个答案:

答案 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的第一个元素。