Question

我正在为Jquery Library使用Kendo网格UI。

我需要使用网格的列过滤器菜单下拉菜单执行以下两项操作：

1）按照字母顺序对复选框的值进行排序（默认情况下，按网格的数据源排序值排序）。

2）根据第一个复选框的过滤器选择过滤所有其他列的复选框值。

Answer 1

以下是排序和过滤器的示例。您只需要在您的kendoGrid初始化中添加可过滤和可排序。

    $("#grid").kendoGrid({
  dataSource: {

  }, 
  filterable: {
      extra: false,
      operators: {
          string: {
              startswith: "Starts with",
              eq: "Is equal to",
              neq: "Is not equal to"
          }
      }
  },
  sortable: {
    mode: "multiple",
    allowUnsort: true,
    showIndexes: true
},
  pageable: true


});

Answer 2

工作演示：https://codepen.io/ezanker/pen/PRwPLo

要对复选框进行排序，您可以使用 filterMenuInit event 。将所有LI项目放入一个数组并对其进行排序，然后将它们添加回UL。在此示例中，我将Select All选项保留在第一个位置：

filterMenuInit: function(e) {
        var items = e.container.find("li").get();
        items.sort(function(a,b){
            var keyA = $(a).text();
            var keyB = $(b).text();

            if (keyA < keyB) return -1;
            if (keyA > keyB) return 1;
            return 0;
        });
        var ul = e.container.find("ul");
        $.each(items, function(i, li){
            if ($(li).find('.k-check-all').length > 0){
                ul.prepend(li); //keep select all first
            } else {
                ul.append(li); // This moves theli from the old spot
            }
        });
    }, //end filterMenuInit

要将一列中的过滤器选择应用于所有列，请使用 fiter event 。在这里，我遍历其他列并为它们构建相同的过滤器。鉴于列过滤器是AND，只返回具有相同值的行，即在第一列过滤器中的示例检查项1中，并且仅显示所有列具有item1的一行。如果您想要OR，请将thefilter.logic = "and";更改为thefilter.logic = "or";

filter: function(e) {
    grid = e.sender;
    if (e.filter == null) {
        grid.dataSource.filter(null);                          
        grid.refresh();
        $("form.k-filter-menu button[type='reset']").trigger("click");                          
    } else {
        //build filters object for all fields
        var thefilter = {};
        thefilter.logic = "and";
        thefilter.filters = [];
        for (var i=0; i<colFields.length; i++){
            if (e.field == colFields[i]) continue;
            var colfilt = {"logic": e.filter.logic};
            var filters = [];
            for (var j=0; j<e.filter.filters.length; j++){
                var filt = {};
                filt.field = colFields[i];
                filt.operator = e.filter.filters[j].operator;
                filt.value = e.filter.filters[j].value;
                filters.push(filt);
            }
            colfilt.filters = filters;
            thefilter.filters.push(colfilt);
        }

        grid.dataSource.filter(thefilter);
    }
}//end filter

注意：清除一列中的过滤器不会清除其他列中的过滤器。您需要解决该问题。

Answer 3

是的，这是问题，我的要求是，即使所有列都有不同的数据，它们属于数据源中的一行，如果在一行中的列上应用过滤器，则还必须在相应的列上应用过滤器列在同一行。

实现类似excel的过滤器菜单kendo jquery

3 个答案: