查找列显示不同的值取决于 dxdatagrid 中同一行中另一列的值（Dev Extreme）

Question

我在 Dev Extreme 库中使用 dxdatagrid

有什么方法可以在更改数据网格内同一行中的另一个查找列的值后立即过滤查找列的数据源

我创建了这个演示来解释：

var listAccount = [
    { ID: 1, WebsiteID: 1, Website: 'A', AccountID: '1', Username: 'A1' },
    { ID: 2, WebsiteID: 1, Website: 'A', AccountID: '2', Username: 'A2' },
    { ID: 3, WebsiteID: 2, Website: 'B', AccountID: '4', Username: 'B1' },
    { ID: 4, WebsiteID: 3, Website: 'C', AccountID: '7', Username: 'C1' },
    { ID: 5, WebsiteID: 4, Website: 'D', AccountID: '8', Username: 'D1' },
    { ID: 6, WebsiteID: 5, Website: 'E', AccountID: '9', Username: 'E1' }
];

var websites = [
   { WebsiteID: 1, Website: 'Website A' },
   { WebsiteID: 2, Website: 'Website B' },
   { WebsiteID: 3, Website: 'Website C' },
   { WebsiteID: 4, Website: 'Website D' },
   { WebsiteID: 5, Website: 'Website E' }
];

var account = [
   { AccountID: 1, Username: 'A1', WebsiteID: 1 },
   { AccountID: 2, Username: 'A2', WebsiteID: 1 },
   { AccountID: 3, Username: 'A3', WebsiteID: 1 },
   { AccountID: 4, Username: 'B1', WebsiteID: 2 },
   { AccountID: 5, Username: 'B2', WebsiteID: 2 },
   { AccountID: 6, Username: 'B3', WebsiteID: 2 },
   { AccountID: 7, Username: 'C1', WebsiteID: 3 },
   { AccountID: 8, Username: 'D1', WebsiteID: 4 },
   { AccountID: 9, Username: 'E1', WebsiteID: 5 },
   { AccountID: 10, Username: 'E2', WebsiteID: 5 }
];

var grid = $('#myGrid').dxDataGrid({
    dataSource: listAccount,
    columns: [
{
    dataField: 'ID'
},
{
    dataField: 'WebsiteID',
    caption: 'Website',
    lookup: {
        dataSource: websites,
        displayExpr: 'Website',
        valueExpr: 'WebsiteID',
    }
},
{
    dataField: 'AccountID',
    caption: 'Account',
    lookup: {
        dataSource: account,
        displayExpr: 'Username',
        valueExpr: 'AccountID',
    }
}],
    editing: {
        editMode: 'batch',
        editEnabled: true,
        insertEnabled: true
    }
}).dxDataGrid('instance');

在编辑模式下，当我select另一个网站而账户只显示selected网站的账户时，有什么办法吗？例如：当我选择网站A时，查找栏中只显示账户A1和A2

Answer 1

对于您的情况，我建议您使用 cellTemplate and editCellTemplate 选项。这些选项允许您手动呈现 'Website' 列的选择框。然后，您将能够使用 onValueChanged 选项处理 WebsiteId 的值更改：

cellTemplate: function($cell, cellData){
    $cell.text('Website ' + cellData.data.Website);
},
editCellTemplate: function($cell, cellData){
    var $selectBox = $("<div>").dxSelectBox({
        dataSource: websites,
        displayExpr: 'Website',
        valueExpr: 'WebsiteID',
        value: cellData.data.WebsiteID,
        onValueChanged: function(){
            // filter your data here...
        }
    });

    $cell.append($selectBox);
}

样本在这里 - http://jsfiddle.net/kb1681g0/2/

要过滤数据，您可以使用 DataSource.filter() 方法。

希望这些信息对您有所帮助。

查找列显示不同的值取决于 dxdatagrid 中同一行中另一列的值（Dev Extreme）

Lookup column display different value depend on value from another column in the same row inside dxdatagrid (Dev Extreme)

devextreme