我正在使用JqWidgets treegrid，但在angular2代码中遇到以下错误：
core.js:1598 ERROR TypeError: addButton.jqxButton is not a function
at b.(:4200/anonymous function).AppComponent.renderToolbar [as rendertoolbar] (http://localhost:4200/main.js:161:23)
at b.(:4200/anonymous function)._render (http://localhost:4200/main.js:2073:46696)
at push../src/assets/jqwidgets/jqxdatatable.js.b.jqx.dataView.dataview.update (jqxdatatable.js:7)
at q (jqxdatatable.js:7)
at Object.l [as func] (jqxdatatable.js:7)
at push../src/assets/jqwidgets/jqxdata.js.i.jqx.dataAdapter.callDownloadComplete (jqxdata.js:7)
at Object.success (jqxdata.js:7)
at bw (jqxcore.js:7)
at Object.fireWith [as resolveWith] (jqxcore.js:7)
at S (jqxdata.js:7)
代码：
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxTreeGridComponent } from './jqtree/angular_jqxtreegrid';
import { jqxButtonComponent } from './jqtree/angular_jqxbuttons';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent;
employees: any[] = [
{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
];
source: any =
{
dataType: "json",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'ReportsTo', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Country', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'BirthDate', type: 'date' }
],
hierarchy:
{
keyDataField: { name: 'EmployeeID' },
parentDataField: { name: 'ReportsTo' }
},
id: 'EmployeeID',
//url: '../assets/sampledata/locations.tsv',
localData: this.employees,
addRow: (rowID, rowData, position, parentID, commit) => {
// synchronize with the server - send insert command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
this.newRowID = rowID;
commit(true);
},
updateow: (rowID, rowData, commit) => {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
deleteRow: (rowID, commit) => {
// synchronize with the server - send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};
dataAdapter: any = new jqx.dataAdapter(this.source);
newRowID = null;
theme: string = '';
buttonsObject: any = null;
updateButtons(action: string, buttons: any): void {
switch (action) {
case 'Select':
buttons.addButton.jqxButton({ disabled: false });
buttons.deleteButton.jqxButton({ disabled: false });
buttons.editButton.jqxButton({ disabled: false });
buttons.cancelButton.jqxButton({ disabled: true });
buttons.updateButton.jqxButton({ disabled: true });
break;
case 'Unselect':
buttons.addButton.jqxButton({ disabled: true });
buttons.deleteButton.jqxButton({ disabled: true });
buttons.editButton.jqxButton({ disabled: true });
buttons.cancelButton.jqxButton({ disabled: true });
buttons.updateButton.jqxButton({ disabled: true });
break;
case 'Edit':
buttons.addButton.jqxButton({ disabled: true });
buttons.deleteButton.jqxButton({ disabled: true });
buttons.editButton.jqxButton({ disabled: true });
buttons.cancelButton.jqxButton({ disabled: false });
buttons.updateButton.jqxButton({ disabled: false });
break;
case 'End Edit':
buttons.addButton.jqxButton({ disabled: false });
buttons.deleteButton.jqxButton({ disabled: false });
buttons.editButton.jqxButton({ disabled: false });
buttons.cancelButton.jqxButton({ disabled: true });
buttons.updateButton.jqxButton({ disabled: true });
break;
}
}
renderToolbar = (toolBar) => {
let toTheme = (className) => {
if (this.theme == '') return className;
return className + ' ' + className + '-' + this.theme;
}
// appends buttons to the status bar.
let container: any = $('<div style="overflow: hidden; position: relative; height: 100%; width: 100%;"></div>');
let buttonTemplate: any = '<div style="float: left; padding: 3px; margin: 2px;"><div style="margin: 4px; width: 16px; height: 16px;"></div></div>';
let addButton: any = $(buttonTemplate);
let editButton: any = $(buttonTemplate);
let deleteButton: any = $(buttonTemplate);
let cancelButton: any = $(buttonTemplate);
let updateButton: any = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxToggleButton ({ cursor: 'pointer', enableDefault: false, disabled: true, height: 25, width: 25 });
addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
addButton.jqxTooltip({ position: 'bottom', content: 'Add' });
editButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
editButton.jqxTooltip({ position: 'bottom', content: 'Edit' });
deleteButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
deleteButton.jqxTooltip({ position: 'bottom', content: 'Delete' });
updateButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find('div:first').addClass(toTheme('jqx-icon-save'));
updateButton.jqxTooltip({ position: 'bottom', content: 'Save Changes' });
cancelButton.jqxButton({ cursor: 'pointer', disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel'));
cancelButton.jqxTooltip({ position: 'bottom', content: 'Cancel' });
this.buttonsObject = {
addButton: addButton,
editButton: editButton,
deleteButton: deleteButton,
cancelButton: cancelButton,
updateButton: updateButton,
};
addButton.click((event) => {
if (!addButton.jqxButton('disabled')) {
this.treeGrid.expandRow(this.rowKey);
// add new empty row.
this.treeGrid.addRow(null, {}, 'first', this.rowKey);
// select the first row and clear the selection.
this.treeGrid.clearSelection();
this.treeGrid.selectRow(this.newRowID);
// edit the new row.
this.treeGrid.beginRowEdit(this.newRowID);
this.updateButtons('add', this.buttonsObject);
}
});
cancelButton.click((event) => {
if (!cancelButton.jqxButton('disabled')) {
// cancel changes.
this.treeGrid.endRowEdit(this.rowKey, true);
}
});
updateButton.click((event) => {
if (!updateButton.jqxButton('disabled')) {
this.treeGrid.endRowEdit(this.rowKey, false);
}
});
editButton.click(() => {
if (!editButton.jqxButton('disabled')) {
this.treeGrid.beginRowEdit(this.rowKey);
this.updateButtons('edit', this.buttonsObject);
}
});
deleteButton.click(() => {
if (!deleteButton.jqxButton('disabled')) {
let selection = this.treeGrid.getSelection();
if (selection.length > 1) {
for (let i = 0; i < selection.length; i++) {
let key = this.treeGrid.getKey(selection[i]);
this.treeGrid.deleteRow(key);
}
}
else {
this.treeGrid.deleteRow(this.rowKey);
}
this.updateButtons('delete', this.buttonsObject);
}
});
};
rowKey = null;
rowSelect(event: any): void {
let args = event.args;
this.rowKey = args.key;
this.updateButtons('Select', this.buttonsObject);
};
rowUnselect(event: any): void {
this.updateButtons('Unselect', this.buttonsObject);
};
rowEndEdit(event: any): void {
this.updateButtons('End Edit', this.buttonsObject);
};
rowBeginEdit(event: any): void {
this.updateButtons('Edit', this.buttonsObject);
};
columns: any[] = [
{ text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
{ text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
{ text: 'Title', dataField: 'Title', width: 160 },
{ text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
{ text: 'Address', dataField: 'Address', width: 250 },
{ text: 'City', dataField: 'City', width: 120 },
{ text: 'Country', dataField: 'Country' }
];
columnGroups: any[] =
[
{ text: 'Name', name: 'Name' }
];
ready(): void {
this.treeGrid.expandRow(2);
};
}