Question

我想过滤包含数组的Kendo Grid上的特定列。

网格配置

 var resultsGrid = this.kendoGrid({
        dataSource:{
            data:[],
            pageSize:20
        },
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        pageable: {
            pageSizes: true,
            buttonCount: 5
        },
        scrollable: false,
        columns: resultsColumns
    }).data("kendoGrid");
    return resultsGrid;

列配置为

var resultsColumns = [
    {field: "keys", filterable: true, headerTemplate: function(){return Ec.translatedLabel("authorityEntryCode");}, template: '#for(var i = 0; i < keys.length; i++){# #=keys[i].name# =  #=keys[i].value# <br> #}#'},
    {field: "state", filterable: true, headerTemplate: function(){return Ec.translatedLabel("state");}},
    {field: "startDate", filterable: false, headerTemplate: function(){return Ec.translatedLabel("startDate");}},
    {command: initGridCommands(), headerTemplate: function(){return Ec.translatedLabel("actions");}}
];

我希望使用字段键

过滤列

字段键是一个包含名称和值的对象数组，我想用值过滤。

例如 Example of the Grid

因此，当用户在屏幕截图中添加a1以过滤第一行时。

如果你有答案，请帮助我，谢谢。

Answer 1

不幸的是，在我看来这很难做到。一般过程需要绑定到filterMenuInit event，删除使用您自己的表单弹出的默认过滤器的内容，然后在您想要的特定字段上手动执行过滤。我不知道在数组字段上执行过滤的内置方法。一个hacky版本只覆盖所需的内容：

filterMenuInit: function(e) {
          if (e.field == "keys") {
            var filterButton = e.container.find("button[type=submit]");
            var clearButton = e.container.find("button[type=reset]");
            var dataSource = jQuery("#grid").data("kendoGrid").dataSource;

            //Get rid of default filter button...
            filterButton.remove();

            clearButton.parent().prepend("<button type='button' class='k-button k-primary'>Filter</button>");

            var filterText = e.container.find(".k-textbox");
            filterButton = e.container.find("button[type=button]");

            filterButton.click(function(e) {
               e.preventDefault();

               dataSource.filter([
                {
                    field: 'keys',
                    operator: function (items, filterValue) {
                      for(var i = 0; i < items.length; i++) {
                        if(items[i].value == filterText.val()) {
                          return true;
                        }
                      }
                      return false;
                    },
                    value: filterText.val()
                }
            ]);
            });

            clearButton.click(function() {
                dataSource.filter([]); //clear filters...
            });
          }
        },

此代码快速而且脏，因此我建议您阅读有关filterMenuInit event和data source filtering的文档，以提出更清晰的解决方案。 Here is a snippet as well.

包含数组的Kendo UI网格过滤器单元格

1 个答案: