角度jqxtreegrid中是否存在两种方式的数据绑定？
我从jqxtreegrid的引用创建了一个可编辑的jqxtreegrid，但是当我在jqxtreegrid中编辑任何列时，分配的localdata变量中的数据不会更改。
如果我更改了文本或代码，则assetClassData中不会更改。但这应该是。我的代码有什么问题吗？
这是我的代码-
import { Component, ViewChild, OnInit, OnChanges, AfterViewInit } from '@angular/core';
import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';
import { PageParam, SearchParam, SortParam, PagingParam } from '../shared/class/queryparam';
import { MatSnackBarConfig } from '@angular/material';
import { FormControl, Validators } from '@angular/forms';
declare var $: any;
@Component({
selector: 'app-assetclass',
templateUrl: './assetclass.component.html',
styleUrls: ['./assetclass.component.css']
})
export class AssetclassComponent implements OnInit, OnChanges, AfterViewInit {
constructor() { }
@ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent;
rowKey = null;
// assetClassData: AssetClass[];
assetClassData: any[] = [{
'AssetClassID': 1, 'AssetClassName': 'Test', 'AssetClassCode': 'Test',
'ParentAssetClassID': 0, 'InActive': false
}];
PageParams: PageParam[] = [];
SearchParams: SearchParam[] = [];
SortParams: SortParam;
PagingParams: PagingParam;
PageNumber = 1;
columns: any[] = [
{ text: 'Name', dataField: 'AssetClassName', align: 'center', width: '70%' },
{ text: 'Code', dataField: 'AssetClassCode', align: 'right', cellsAlign: 'right', width: '20%' },
{
text: 'Inactive', dataField: 'InActive', filtertype: 'checkedlist', align: 'center', cellsAlign: 'center', width: '10%'
, columnType: 'template',
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
editor.jqxCheckBox({ checked: false });
},
initEditor: (row, cellvalue, editor, celltext, width, height) => {
// set the editor's current value. The callback is called each time the editor is displayed.
editor.jqxCheckBox('checked', cellvalue);
},
getEditorValue: (row, cellvalue, editor) => {
// return the editor's value.
return editor.val();
}
}
];
source: any =
{
dataType: 'json',
dataFields: [
{ name: 'AssetClassID', type: 'number' },
{ name: 'AssetClassName', type: 'string' },
{ name: 'ParentAssetClassID', type: 'number' },
{ name: 'AssetClassCode', type: 'string' },
{ name: 'InActive', type: 'number' }
],
hierarchy:
{
keyDataField: { name: 'AssetClassID' },
parentDataField: { name: 'ParentAssetClassID' }
},
id: 'AssetClassID',
localData: this.assetClassData,
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 successfull
// 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);
},
updateRow: (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;
ngOnInit() {
}
ngOnChanges() {
// this.loadList();
}
ngAfterViewInit(): void {
this.treeGrid.createComponent();
}
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 });
console.log(this.assetClassData);
break;
}
}
renderToolbar = (toolBar) => {
const toTheme = (className) => {
if (this.theme === '') {
return className;
}
return className + ' ' + className + '-' + this.theme;
};
// appends buttons to the status bar.
const container: any = $('<div style="overflow: hidden; position: relative; height: 100%; width: 100%;"></div>');
const buttonTemplate: any = '<div style="float: left; padding: 3px; margin: 2px;">' +
'<div style="margin: 4px; width: 16px; height: 16px;"></div></div>';
const addButton: any = $(buttonTemplate);
const editButton: any = $(buttonTemplate);
const deleteButton: any = $(buttonTemplate);
const cancelButton: any = $(buttonTemplate);
const updateButton: any = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({ 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);
} else {
this.treeGrid.addRow(null, {}, 'first', '0');
}
});
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')) {
const selection = this.treeGrid.getSelection();
if (selection.length > 1) {
for (let i = 0; i < selection.length; i++) {
const key = this.treeGrid.getKey(selection[i]);
this.treeGrid.deleteRow(key);
}
} else {
this.treeGrid.deleteRow(this.rowKey);
}
this.updateButtons('delete', this.buttonsObject);
}
});
}
rowSelect(event: any): void {
const 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);
}
getWidth(): any {
if (document.body.offsetWidth < 850) {
return '90%';
}
return 850;
}
}