Kendo ui网格Fiter模式：行

Question

我正在使用过滤器列模式：在网格中行。 对于我的数字列，菜单显示如下

我需要的是此列中的过滤器，作为菜单模式下使用的过滤器

这是我的代码的一部分

 schema: {
                        data: "results",
                        total: "total",
                        model: {
                        id: "accountingTransactionKey",
                        fields: {
                            accountingTransactionKey: { editable: false, nullable: false },
                            date: { editable: false, nullable: false },
                            organization: { editable: false, nullable: false },
                            accountDebit: { editable: false, nullable: true },
                            costArticleUsed: { editable: false, nullable: true },
                            accountCredit: { editable: false, nullable: true },
                            isIntraGroupPartnerOrganization: { editable: false, nullable: true, type: "number" },
                            currency: { editable: false, nullable: true },
                            sum: { editable: false, nullable: true, type: "number"},...
                   ...{
                            field: "sum",
                            title: "Сумма",
                            width: "150px",
                            //format: "{0:n2}",
                            locked: true,
                            filterable:
                            {
                                multi: true,
                                cell:
                                {
                                    operator: "eq",
                                    suggestionOperator: "eq",
                                    showOperators: true
                                }
                            },
                            template: function (dataItem) { return numberWithSpaces(dataItem.sum.toFixed(2)) },
                            footerTemplate: "<b>" +"#: numberWithSpaces(sum.toFixed(2)) #"+"</b>"
                        },

我的要求有解决办法吗？

谢谢

Answer 1

我已经尝试了以下脚本，并通过使用属性extra给了我一个范围过滤器。

<script>
                $(document).ready(function() {

                  var griddata = createRandomData(50);

                    $("#grid").kendoGrid({
                        dataSource: {
                            data: griddata,
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" },
                                        Age: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Starts with",
                                    eq: "Is equal to",
                                    neq: "Is not equal to"
                                }
                            }
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130,
                                filterable: false,
                            },
                            {
                                field: "Title",
                                filterable: false,
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                format: "{0:MM/dd/yyyy HH:mm tt}",
                                filterable: false,
                            },
                            {
                                field: "Age",
                                width: 100,
                                filterable:
                                {
                                  extra: true
                                }
                            }
                       ]
                    });
                });
            </script>

如果要创建自定义范围过滤器 。

columns: [
                    {
                         field: "Age",
                               filterable: {
                                    cell: { template: betweenAgeFilter }
                               }
                    }
        ]

function betweenAgeFilter(args) {
            var filterCell = args.element.parents(".k-filtercell");
            filterCell.empty();
            filterCell.html('<span style="justify-content:center;"> <span>From:</span><input id="startAge"/><span>To:</span><input id="endAge"/></span>');

            $("#startAge").kendoNumericTextBox({
                change: function (e) {
                    var startAge = e.sender.value();
                    var endAge = $("#endAge").data("kendoNumericTextBox").value();
                    var dataSource = $("#grid").data("kendoGrid").dataSource;

                    if (startAge & endAge) {
                        var filter = { logic: "and", filters: [] };
                        filter.filters.push({ field: "Age", operator: "gte", value: startAge });
                        filter.filters.push({ field: "Age", operator: "lte", value: endAge });
                        dataSource.filter(filter);
                    }
                }
            });
            $("#endAge").kendoNumericTextBox({
                change: function (e) {
                    var startAge = $("#startAge").data("kendoNumericTextBox").value();
                     var endAge = e.sender.value();
                     var dataSource = $("#grid").data("kendoGrid").dataSource;

                    if (startAge & endAge) {
                        var filter = { logic: "and", filters: [] };
                        filter.filters.push({ field: "Age", operator: "gte", value: startAge });
                        filter.filters.push({ field: "Age", operator: "lte", value: endAge });
                        dataSource.filter(filter);
                    }
                }
            });
        }