数据源位于同一对象中的DevExtreme AngularJs DataGrid查找列
我有以下资料:数据源位于同一对象中的DevExtreme AngularJs DataGrid查找列,angularjs,devextreme,dx-data-grid,Angularjs,Devextreme,Dx Data Grid,我有以下资料: var customers = [ { "ID": 1, "Name":"John Mayor" "Company": [{"ID": 1, "Name":"Super Mart"},{"ID": 2, "Name":"Big Mart"}] "CompanyID":1 }, { "ID": 2, "Name": "Rick Bard", "Company": [{"ID": 1, "N
var customers = [
{
"ID": 1,
"Name":"John Mayor"
"Company": [{"ID": 1, "Name":"Super Mart"},{"ID": 2, "Name":"Big Mart"}]
"CompanyID":1
}, {
"ID": 2,
"Name": "Rick Bard",
"Company": [{"ID": 1, "Name":"Oracle"},{"ID": 2, "Name":"Google"}]
"CompanyID":2
}
];
我想用AngularJs和DevExtreme在dxDataGrid中表示这些数据。这样,公司列将被查找,并且所选公司的ID将与CompanyID绑定
我希望实现以下目标:
$scope.dataGridOptions = {
dataSource: customers,
columns: ["Name",
{
dataField: "CompanyID",
lookup: {
dataSource:customers[rowindex].Company,
valueExpr: 'ID',
displayExpr: 'Name'
},
caption: 'Company'
}]
};
您可以在列中添加一个以实现您的目标。诸如此类:
$scope.valueChangeAction = function (e) {
this.setValue(e.value);
};
...
columns: [{
dataField: "CompanyID",
editCellTemplate: "lookupEditCell"
}]
并定义模板:
<div data-options="dxTemplate:{ name:'lookupEditCell' }" dx-item-alias="cell">
<div dx-lookup="{
dataSource: cell.data.Company,
valueExpr: 'ID',
displayExpr: 'Name',
onValueChanged: $parent.valueChangeAction
}"></div>
</div>
如@Dmitry所述,添加editCellTemplate可用于表示数据。但可能不需要dx项目别名 [JAVASCRIPT]
$scope.Customers = [{
"Name": "John Mayor",
"CompanyId": 1,
"Company": [{"ID": 1,"Name": "Super Mart"}, {"ID": 2,"Name": "Big Mart"}]
}, {
"Name": "Rick Bard",
"CompanyId": 2,
"Company": [{ "ID": 1, "Name": "Google" }, { "ID": 2, "Name": "Oracle" }]
}];
$scope.dataGridOptions= {
dataSource: $scope.Customers,
editing: {
mode: 'cell',
allowUpdating: true,
},
columns: [{
dataField: "Name",
allowEditing: false
}, {
dataField: 'CompanyId',
allowEditing: true,
showEditorAlways: true,
editCellTemplate: 'lookupCell',
caption:'Company'
}]
}
$scope.getOnValueChangeAction = function(row) {
return function(e) {
row.setValue(e.value);
}
};
[HTML]
<div dx-data-grid="dataGridOptions">
<div data-options="dxTemplate:{ name:'lookupCell' }">
<div dx-select-box="{
dataSource: data.Company,
value: data.CompanyId,
valueExpr: 'ID',
displayExpr: 'Name',
onValueChanged: $parent.getOnValueChangeAction(this)
}">
</div>
</div>
</div>
看起来行应该用作dx项别名,但我无法将普通单元格设置为显示名称文本而不是ID值。还需要单击两次以弹出查找。如何为普通视图显示相同的模板?