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>