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

需要您提供更多信息，但这里修复了您的一些错误。

1）你有很多多余的 () （它会立即调用你的函数）它们不应该是 2）你也没有声明 Mobile 所以不能附加一个属性到它 3）看起来你在做viewModel 有点狡猾，但不知道更多我不能确定

var Mobile = {};
Mobile.Customer = (function () {
    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");
        }
    });
})();
于 2015-10-01T08:57:25.293 回答
0

您的代码不起作用，因为您混合了两种不同的方式：MVVM和 jQuery-way。

默认的 DevExtreme 应用程序基于 MVVM 方法（通过knockoutjs）。因此，我建议您将所有小部件选项移至视图模型。

视图模型应如下所示：

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