0

あらゆる方法を試しましたが、何かが欠けています...

これは私のコードです:

Mobile.Customer = (function (params) {

var viewModel = {

    };

    return {

        viewModel: viewModel
    }
   var gridDataSourceConfiguration = [{
            "InternalID": 1,
            "Code": 'TEST 1',
            "Name": 'Test 1 Test 1'
        }, 
        {
            "InternalID": 4,
            "Code": 'TEST 2',
            "Name": 'Test 2 Test 2'
        }, 
        {
            "InternalID": 5,
            "Code": 'TEST 3',
            "Name": 'Test 3 Test 3'

        }];

    var dataGrid = $("#gridContainer").dxDataGrid({
        dataSource: gridDataSourceConfiguration,
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Search...'
        },
        headerFilter: {
            visible: true
        },
        columns: [{
            dataField: "InternalID",
            width: 30,
            caption: "ID"
        }, {
            dataField: 'Name',
            alignment: 'right',
            //dataType: 'date'
        }, {
            dataField: "Code",
            alignment: 'right',
            // format: "currency"
        }
        ]
    }()).dxDataGrid('instance');

    var applyFilterTypes = [{
        key: "auto",
        name: "Immediately"
    }, {
        key: "onClick",
        name: "On Button Click"
    }]

    $("#useFilterApplyButton").dxSelectBox({
        items: applyFilterTypes,
        value: applyFilterTypes[0].key,
        valueExpr: "key",
        displayExpr: "name",
        onValueChanged: (function (data) {
            dataGrid.option("filterRow.applyFilter", data.value);
        }())
    }());

    $("#filterRow").dxCheckBox({
        text: "Filter Row",
        value: true,
        onValueChanged: (function (data) {
            dataGrid.clearFilter();
            dataGrid.option("filterRow.visible", data.value);
            $(".apply-filter-option").css("display", data.value ? "block" : "none");
        }())
    }());
})();

一番最初の行で文句を言うので、どうしたらいいのかわかりません。どこかに余分な () があるか何か - わかりません。私はこのコードにかなり慣れていません。

誰でも助けてもらえますか？

編集

ご回答ありがとうございます。私はあなたの言っていることに感謝し、ある程度理解しています。Google と here で検索したため、余分な () を入れましたが、複数回提案されました。

これは Devextreme アプリです。上記のコードは、次のような dxView ファイルの付随する js ファイルにあります。

   <pre>   <div data-options="dxView : { name: 'Customer', title: 'Customer' } " >
<div  data-options="dxContent : { targetPlaceholder: 'content' } " >

    <div class="autocomplete" data-bind="dxAutocomplete: {
            dataSource: gridDataSourceConfiguration,
            displayExpr: 'Description',
            placeholder: 'Enter Customer Name',
            itemTemplate: 'item'
            }">


        
       </div>

    <div class="apply-filter-option">Apply Filter <div id="useFilterApplyButton"></div></div>
<div id="gridContainer"></div>
<div class="options"><div id="filterRow"></div></div>

    </div>


    </div></pre>

このコードは、情報とフィルタリング機能を備えた datagridview をセットアップするためのものです。

4

2 に答える 2

0

MVVMと jQuery-way の2 つの異なる方法を混同したため、コードは機能しません。

デフォルトの DevExtreme アプリケーションは、MVVM アプローチ (ノックアウトjs 経由) に基づいています。したがって、すべてのウィジェット オプションをビュー モデルに移動することをお勧めします。

ビューモデルは次のようになります。

Mobile.Customer = function(params) {

    var gridDataSourceConfiguration = [{
        "InternalID": 1,
        "Code": 'TEST 1',
        "Name": 'Test 1 Test 1'
    },
    {
        "InternalID": 4,
        "Code": 'TEST 2',
        "Name": 'Test 2 Test 2'
    },
    {
        "InternalID": 5,
        "Code": 'TEST 3',
        "Name": 'Test 3 Test 3'

    }];

    var applyFilterTypes = [{
        key: "auto",
        name: "Immediately"
    }, {
        key: "onClick",
        name: "On Button Click"
    }];

    var dataGridOptions = {
        dataSource: gridDataSourceConfiguration,
        filterRow: {
            visible: ko.observable(true),
            applyFilter: ko.observable("auto")
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: 'Search...'
        },
        headerFilter: {
            visible: true
        },
        columns: [{
            dataField: "InternalID",
            width: 30,
            caption: "ID"
        }, {
            dataField: 'Name',
            alignment: 'right'
        }, {
            dataField: "Code",
            alignment: 'right'
        }
        ]
    };

    var selectBoxOptions = {
        items: applyFilterTypes,
        value: ko.observable(applyFilterTypes[0].key),
        valueExpr: "key",
        displayExpr: "name"
    };

    var checkBoxOptions = {
        text: "Filter Row",
        value: ko.observable(true)
    };

    var applyFilterVisible = ko.observable(true);

    selectBoxOptions.value.subscribe(function(value) {
        dataGridOptions.filterRow.applyFilter(value);
    });

    checkBoxOptions.value.subscribe(function(value) {
        $("#gridContainer").dxDataGrid("instance").clearFilter();
        dataGridOptions.filterRow.visible(value);
        applyFilterVisible(value);
    });

    var viewModel = {
        gridDataSourceConfiguration: gridDataSourceConfiguration,
        selectBoxOptions: selectBoxOptions,
        checkBoxOptions: checkBoxOptions,
        dataGridOptions: dataGridOptions,
        applyFilterVisible: applyFilterVisible
    };

    return viewModel;
};

ウィジェットの値がいつ変更されたかを確認するために、ko.observableとko.subscribe関数を使用しました。

これで、ビューを更新できます。

<div data-options="dxView : { name: 'Customer', title: 'Customer' } " >
    <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
       <div class="autocomplete" data-bind="dxAutocomplete: {
            dataSource: gridDataSourceConfiguration,
            displayExpr: 'Description',
            placeholder: 'Enter Customer Name',
            itemTemplate: 'item'
            }">
        </div>
        <div class="apply-filter-option" data-bind="visible: applyFilterVisible">
            Apply Filter
            <div id="useFilterApplyButton" data-bind="dxSelectBox: selectBoxOptions"></div>
        </div>
        <div id="gridContainer" data-bind="dxDataGrid: dataGridOptions">
        </div>
        <div class="options"><div id="filterRow" data-bind="dxCheckBox: checkBoxOptions"></div></div>
    </div>
</div>
于 2015-10-01T16:24:47.160 に答える