Question

我已经尝试过各种方式，但我遗漏了一些东西......

这是我的代码：

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

它在第一行抱怨，所以我不知道该怎么做。在某个地方，我有一个额外的（）或其他东西 - 我不知道。我对这段代码很陌生。

有人可以帮忙吗？

修改

感谢您的所有回复。我很欣赏并理解你所说的话。我已经放了额外的（），因为在谷歌和这里搜索，它被建议不止一次。

这是一款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。

Answer 1

需要您提供更多信息，但以下是您修复的一些错误..

1）你有超载（）（它会立即调用你的函数）的负载，它们不应该存在 2）您还没有申报移动，因此无法附加属性 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");
        }
    });
})();

Answer 2

您的代码无法正常运行，因为您混淆了两种不同的方式：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>

函数语句需要一个名称

2 个答案: