Question

提前感谢所有能帮助我的人。我对JavaScript和Kendo UI都很陌生，所以请光临我。

我要做的是使用多个下拉菜单过滤网格。我想要完成的有点类似于这个演示（http://demos.kendoui.com/web/grid/toolbar-template.html），除了：

我需要使用多个下拉菜单 - 而不仅仅是一个。
我需要用户能够首先选择下拉项目，然后单击“搜索”按钮，该按钮将根据网格过滤网格他们选择了什么。

我搜索了stackoverflow和Kendo UI论坛，发现了与我类似的问题，但没有什么可以帮助我。

请参阅下面的我的jankety代码。在此示例中，我使用“名字”和“姓氏”列。我可能会发生一些新手错误，如果有人能指出它，我会非常感激。

<script type="text/javascript" src="~/Scripts/Shared/NameData.js"></script>
<script>

/************ CODE FOR THE GRID ************/

    $(document).ready(function () {
        var grid = $("#grid").kendoGrid({
            dataSource: {
                data: getNameData(),
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true
            },
            height: 550,
            sortable: true,
            navigatable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            columns: [
                { field: “FIRST_NAME”, title: "First Name", width: 100 },
                { field: “LAST_NAME”, title: "Last Name" },
            ],
            toolbar: kendo.template($("#template").html()),
        })

/************ FIRST_NAME Dropdown ************/

            var dropdownFIRST_NAME = $("#grid").find("#FIRST_NAME").kendoDropDownList({
                dataTextField: “FIRST_NAME”,
                dataValueField: “FIRST_NAME”,
                autoBind: false,
                optionLabel: "All",
                dataSource: getNameData(),
            });

/************ LAST_NAME Dropdown ************/

            var dropdownLAST_NAME = $("#grid").find("#LAST_NAME").kendoDropDownList({
                dataTextField: “LAST_NAME”,
                dataValueField: “LAST_NAME”,
                autoBind: false,
                optionLabel: "All",
                dataSource: getNameData(),
            });

/************ CODE FOR THE SEARCH BUTTON ************/

            $('#Search').click(function () {
                var filter = new Array();

                var valueFIRST_NAME =     $("#dropdownFIRST_NAME").data("kendoDropDownList").value();
                var valueLAST_NAME = $("#dropdownLAST_NAME").data("kendoDropDownList").value();

                if ($valueFIRST_NAME) {
                    $filter.push({ field: “FIRST_NAME”, operator: "eq", value: $valueFIRST_NAME });
                }

                if ($valueLAST_NAME) {
                    $filter.push({ field: “LAST_NAME”, operator: "eq", value: $valueLAST_NAME });
                }

                var grid = $("#Grid").data("kendoGrid");
                grid.dataSource.filter({
                    logic: "and",
                    filters: $filter
                });
            });
        });
</script>

getNameData（）位于外部脚本中，并在加载页面时成功填充网格。下拉功能也有效。但是，然后我点击“搜索”什么都没发生。

有谁知道问题可能是什么？提前感谢您的时间。

Answer 1

为什么不使用filter-menu-customization为多列添加下拉列表？ enter image description here

请参阅运行演示here。

使用下拉列表过滤网格（多个）

1 个答案: