DevExtreme 学习应用[3]

DevExtreme dxSelectBox 联动查询案例

//数据获取
        lookupDataSource = new DevExpress.data.DataSource({
            store: storeInitValue, //数据源
            sort: { getter: "time", desc: true }, //排序
            filter: ["ProjectKey", "=", Application1.ProjectKey],  //过滤
            map: function (item) {
                return new ini_valueViewModel(item);
            }
        });

        //数据更新
        function handleDataSourceChanged() {
            isReady.resolve();
            lookupDataSource.off("changed", handleDataSourceChanged);
        }
        lookupDataSource.on("changed", handleDataSourceChanged);

        return {
            typedatasourceChange: function (e) {
                //从新更新数据
                lookupDataSource.filter([["ProjectKey", "=", Application1.ProjectKey], '&&', ["TypeName", "=", e.value]]);
                lookupDataSource.reload();
                //数据重新加载
            },
            typedatasource: typedatasource, //类型
            lookupDataSource: lookupDataSource, //名称
            control: control,
            handleSave: handleSave,
            handleCancel: handleCancel,
            viewShowing: handleViewShowing,
            isReady: isReady.promise()
        };      

<div data-options="dxView : { name: 'ControlEdit', mode: 'edit', title: '测点设置' } ">
    <div data-bind="dxCommand: { onExecute: handleSave, id: 'save', title: 'Save', icon: 'save' } "></div>
    <div data-bind="dxCommand: { onExecute: handleCancel, id: 'cancel', behavior: 'back', title: 'Cancel', icon: 'close' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-edit-view dx-content-background dx-form-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: '.dx-field', animation: 'edit-item-rendered', renderWhen: isReady }">
        <div data-bind="dxScrollView: { }">
            <div class="dx-fieldset">
                <div class="dx-field">
                    <div class="dx-field-label">测点类型: </div>
                    <div data-bind="dxSelectBox:{
                                    dataSource: typedatasource,
                                    placeholder: '测点分类',
                                    displayExpr: 'Name',
                                    valueExpr: 'TableName',
                                    value: control.TypeName,
                                 onValueChanged:typedatasourceChange}">
                    </div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">测点名称: </div>
                    <div data-bind="dxSelectBox:{
                                    dataSource: lookupDataSource,
                                    placeholder: '测点编号',
                                    displayExpr: 'name',
                                    valueExpr: 'name',
                                    value: control.name}">
                    </div>
                </div>

                <div class="dx-field">
                    <div class="dx-field-label">控制值: </div>
                    <div class="dx-field-value" data-bind="dxNumberBox: { value: control.WarningUp, placeholder: '控制值' }"></div>
                </div>
                <div class="dx-field">
                    <div class="dx-field-label">报警值: </div>
                    <div class="dx-field-value" data-bind="dxNumberBox: { value: control.EarlyWarningUp, placeholder: '报警值' }"></div>
                </div>
            </div>
        </div>
    </div>
</div>