Question

我在Dev Extreme库中使用dxdatagrid

无论如何我可以在更改datagrid内同一行中另一个查找列的值之后立即过滤查阅列的数据源

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

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');

在编辑模式下，当我选择其他网站并且该帐户仅显示选择的网站帐户时，有什么办法吗？例如：当我选择网站A时，只有账户A1和A2显示在查阅列

中

谢谢

Answer 1

在您的情况下，我建议您使用cellTemplate和editCellTemplate选项。这些选项允许您手动呈现“网站”列的选择框。然后，您将能够使用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）内同一行中另一列的值

1 个答案: