Angular2中jqWidgets TreeGrid报错：addButton.jqxButton不是函数

嘿，我之前在使用jqWidgets的TreeGrid组件时也碰到过一模一样的错误，咱们一步步来排查解决：

问题根源 #

这个TypeError: addButton.jqxButton is not a function错误说白了就是：jqWidgets的Button组件要么没正确引入，要么初始化时机不对，导致jQuery找不到对应的方法。从你的错误栈来看，问题出在renderToolbar方法里初始化按钮的环节。

具体解决方案 #

1. 先检查脚本引入是否完整且顺序正确 #

首先去你的angular.json（如果是老版本Angular就是.angular-cli.json）里，确认jqWidgets的脚本有没有按正确顺序引入：

"scripts": [
  "./src/assets/jqwidgets/jqxcore.js", // 核心必须放最前面
  "./src/assets/jqwidgets/jqxdata.js",
  "./src/assets/jqwidgets/jqxbuttons.js", // 这个是关键！不能漏
  "./src/assets/jqwidgets/jqxdatatable.js",
  "./src/assets/jqwidgets/jqxtreegrid.js"
]

顺序错了也会导致依赖加载失败，一定要保证jqxcore.js第一个加载，然后是依赖组件，最后才是TreeGrid相关的脚本。

2. 修正组件初始化时机 #

你的组件已经实现了AfterViewInit，但得确保在ngAfterViewInit里正确初始化TreeGrid组件，不然DOM没准备好就操作会出问题：

ngAfterViewInit(): void {
  this.treeGrid.createComponent(); // 手动触发TreeGrid初始化
}

3. 修复renderToolbar的DOM操作问题 #

在renderToolbar里初始化按钮时，要确保元素已经被插入DOM后再调用jqxButton，或者直接用jqWidgets的API来处理：

renderToolbar(toolbar: any): void {
  let container = $("<div style='margin: 5px;'></div>");
  let addButton = $("<button id='addButton'>添加行</button>");
  container.append(addButton);
  toolbar.append(container);

  // 确保元素挂载后初始化按钮
  addButton.jqxButton({ width: 80 });
}

另外我发现你的source对象里有个拼写错误：updateow应该是updateRow，这个小错误可能导致数据适配器异常，间接影响组件加载，赶紧改过来：

// 修正前
updateow: (rowID, rowData, commit) => { ... }
// 修正后
updateRow: (rowID, rowData, commit) => { 
  commit(true);
},

4. 确认Angular模块中声明了Button组件 #

虽然你已经导入了jqxButtonComponent，但要确保在你的AppModule里声明了它，不然Angular识别不了这个组件：

import { NgModule } from '@angular/core';
import { jqxTreeGridComponent } from './jqtree/angular_jqxtreegrid';
import { jqxButtonComponent } from './jqtree/angular_jqxbuttons';

@NgModule({
  declarations: [
    AppComponent,
    jqxTreeGridComponent,
    jqxButtonComponent // 必须加在这里
  ]
})
export class AppModule { }

最后总结 #

按这个顺序排查：先补全脚本引入→修正拼写错误→调整初始化时机→确认模块声明，应该就能解决这个问题了。

内容的提问来源于stack exchange，提问作者Abhishek Shubham