Devextreme级联查找

我需要使用jQuery来开发具有级联查询的网格。 我参考下面的链接： https : //js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CascadingLookups/jQuery/Light/

但是我没有什么要求更改，因为我正在存储州和城市名称，而不是员工表中的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
}]

---

要完成此任务，您可以更改州和城市结构以及dataField / valueExpr / displayExpr选项。 看下面的例子：

$(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"
}];

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

链接地址: http://www.djcxy.com/p/5249.html

上一篇: Devextreme Cascaded lookup

下一篇: Set the format of a date column in devextreme DataGrid with angular 2