DevExtreme AngularJs DataGrid 查找列与同一对象内的数据源答案

【问题标题】：DevExtreme AngularJs DataGrid lookup column with dataSource within same objectDevExtreme AngularJs DataGrid 查找列与同一对象内的数据源
【发布时间】：2017-04-11 07:21:47
【问题描述】：

我的数据如下：

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 中表示该数据。这样Company 列将被查找并选择与CompanyID 绑定的公司ID。

我想实现这样的目标：

$scope.dataGridOptions = {
    dataSource: customers,
    columns: ["Name", 
              { 
                dataField: "CompanyID", 
                lookup: {
                        dataSource:customers[rowindex].Company,
                        valueExpr: 'ID', 
                        displayExpr: 'Name'
                        },
                 caption: 'Company' 
                }]
};

【问题讨论】：

标签： angularjs devextreme dx-data-grid

【解决方案1】：

您可以在列中添加editCellTemplate 以实现您的目标。类似的东西：

$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>

【讨论】：

似乎row 应该用作dx-item-alias，但我无法将普通单元格设置为显示Name 文本而不是ID 值。它还需要单击两次才能弹出查找。如何也为普通视图显示相同的模板？

【解决方案2】：

正如@Dmitry 所提到的，添加editCellTemplate 可用于表示数据。但dx-item-alias 可能不是必需的。

[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>

【讨论】：