Devextreme Cascaded查找

Question

我需要使用jquery开发带级联查找的网格。 我在下面的链接中引用： 的 https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CascadingLookups/jQuery/Light/

但是我几乎没有要求更改，因为我在employee表中存储州和城市名称而不是id。

代码需要做哪些更改？

下面是我的样本数据

var employees = [{
    "ID": 1,
    "FirstName": "John",
    "LastName": "Heart",
    "Prefix": "Mr.",
    "Position": "CTO",
    "State": Alabama,
    "City": Tuscaloosa
}



var states = [{
    "ID": 1,
    "Name": "Alabama"
}, {
    "ID": 2,
    "Name": "Alaska"
}
]


var cities = [{
    "ID": 1,
    "Name": "Tuscaloosa",
    "StateID": 1
}, {
    "ID": 2,
    "Name": "Hoover",
    "StateID": 1
}]

Answer 1

要完成任务，您可以更改州和城市结构以及dataField / valueExpr / displayExpr选项。请参阅以下示例：

＆＃13;

＆＃13;

$(function() {
    $("#gridContainer").dxDataGrid({
        keyExpr: "ID",
        dataSource:  employees,
        editing: {
            allowUpdating: true,
            allowAdding: true,
            mode: "row"
        },
        onEditorPreparing: function(e) {
            if(e.parentType === "dataRow" && e.dataField === "City") {
                e.editorOptions.disabled = !e.row.data.State;
            }
        },
        columns: ["FirstName", "LastName", "Position",
            {
                dataField: "State",
                setCellValue: function(rowData, value) {
                    rowData.State = value;
                    rowData.City = null;
                },
                lookup: {
                    dataSource: states,
                    valueExpr: "this",
                    displayExpr: "this"
                }
            },
            {
                dataField: "City",
                lookup: {
                    dataSource: function(options) {
                        return {
                            store: cities,
                            filter: options.data ? ["State", "=", options.data.State] : null
                        };
                    },
                    valueExpr: "Name",
                    displayExpr: "Name"
                }
            }
        ]
    });
});

var employees = [{
    "ID": 1,
    "FirstName": "John",
    "LastName": "Heart",
    "Prefix": "Mr.",
    "Position": "CTO",
    "State": "California",
    "City": "Glendale"
}, {
    "ID": 2,
    "FirstName": "Robert",
    "LastName": "Reagan",
    "Prefix": "Mr.",
    "Position": "IT Manager",
    "State": "Arkansas",
    "City": "Jacksonville"
}];

var states = ["Arkansas", "California"];

var cities = [{
    "Name": "Jacksonville",
    "State": "Arkansas"
}, {
    "Name": "Cabot",
    "State": "Arkansas"
}, {
    "Name": "Glendale",
    "State": "California"
}, {
    "Name": "Ontario",
    "State": "California"
}];

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/17.2.4/js/dx.all.js"></script>

<div id="gridContainer"></div>

＆＃13;

＆＃13;

＆＃13;