jquery dxDataGrid -在CustomStore中使用列标题过滤器

cngwdvgl  于 2023-05-17  发布在  jQuery
关注(0)|答案(1)|浏览(179)

我使用devexpress和headerFilter选项有一个问题时,从下拉菜单中选择一些选项,并做确定:头过滤器不会将选定的值传递给loadOptions对象,如果我用headerFilter替换lookup,但我不想使用lookUp,它会工作。
基本上我想调用另一个API来加载headerFilter中的数据
下面是我的代码:

var store = new DevExpress.data.CustomStore({
        key: "ID",
        load: function (loadOptions) {// loadOptions does not contains the selected value
            var d = $.Deferred(),
                params = {};
            [
                "sort", 
                "filter"
            ].forEach(function(i) {
                if(i in loadOptions && isNotEmpty(loadOptions[i])) 
                    params[i] = JSON.stringify(loadOptions[i]);
            });
            $.getJSON(dataTable.replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
        .done(function (result) {
            d.resolve(result.UserTasks, {
                totalCount: result.Count
            });
        });
            return d.promise();
        }
    });
    opt = {
        dataSource: store,
        remoteOperations: { filtering: true, sorting: true, paging: true, grouping: false },
        showBorders: true,
        allowColumnReordering: true,
        rowAlternationEnabled: true,
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: "Search..."
        },
        headerFilter: {
            visible: true
        },
        paging: {
            pageSize: 10
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [10, 20, 30],
            showInfo: true
        },
        columns: [{
        dataField: "Title",
        dataType: "string",
        caption:idea,
            width:180,
            //allowFiltering: false,
            //allowSearch: true,
            cellTemplate: function (element, info) {
                url = url.replace("/Ideas/View", "/Ideas");
                element.append("<a class='view-task' href=" + url + "/" + info.data.ID + " data-task-id=" + info.data.ID + ">" + info.data.Title + '-' + ideano + info.data.IdeaId + "</a>");
            }
        },
        {
            dataField: "FormName",
            caption: form,
            dataType: "string",
            headerFilter: { //here its bringing all data properly
                dataSource:{
                    store: new DevExpress.data.CustomStore({
                        key: "Id",
                        load: function (loadOptions,i) {
                            var d = $.Deferred(),
                                    params = {};
                            [
                                "sort",
                                "filter"
                            ].forEach(function (i) {
                                if (i in loadOptions && isNotEmpty(loadOptions[i]))
                                    params[i] = JSON.stringify(loadOptions[i]);
                            });
                            $.getJSON(filterDataTable.replace("{filter}", form).replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
                                .done(function (result) {
                                    d.resolve(result.Items);
                                });
                            return d.promise();
                        }
                    })
                }
            }
        }]
    }
    $("#gridContainer").dxDataGrid(opt).dxDataGrid("getDataSource");
wlzqhblo

wlzqhblo1#

我能够非常简单地分割dx-data-grid上的远程操作:

[remoteOperations]="{ filtering: false, sorting: false, paging: true }"

过滤器列表也变得有效。但我花了很多时间,在网上或ChatGPT上都找不到类似的解决方案

相关问题