Question

我有一个带有filterable = true，mode = row的kendo网格。我希望有一种方法可以点击一下按钮，触发一个事件，该事件将切换隐藏并显示过滤器行。现在，我通过编辑innerHTML来实现它，但由于几个原因，这不是我最终想要做的。

1）我需要在删除之前保存过滤器行值的版本。

2）删除它们并重新添加后，它们将无法工作 ... 许多其他原因，只是不好的做法，必须有更好的方法。

触发事件的按钮：toggleFilterClick：

<script type="text/x-kendo-template" id="gridFilter">
     <button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>                                                                                                  
</script>

Javascript代码：

//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;

//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {                                                                               
    if ($(".k-filter-row")[0].innerHTML == '')
    {
      $(".k-filter-row")[0].innerHTML = filterRowValues;
    }
    else
    {
      $(".k-filter-row")[0].innerHTML = '';
    }                                                                                                                               
});

任何想法建议将不胜感激/

Answer 1

您是否尝试过隐藏行而不是将其删除？

//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {                             
    if ($(".k-filter-row").is(":visible")){
         $(".k-filter-row").hide();
    }
    else{
         $(".k-filter-row").show();
    }                                                                                                                               
});

Answer 2

我只想隐藏标题中的实际过滤行

我不确定我是否明白这一点，但如果您只想隐藏它，只需删除除$(".k-filter-row").show();和$(".k-filter-row").hide();之外的所有内容。我创建了一个示例，当我隐藏过滤器时，过滤器条件将被删除，但当它再次显示时，网格将使用之前用于过滤的值重新过滤

$("#toggle").kendoButton({
click:function(){
    if($(".k-filter-row").css("display") == "none"){
        $(".k-filter-row").show();

        //show again filter and execute previous filter condition
        $("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
        $("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});

    }else{

          //store the previous filter value
          //autocomplete
          vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
          vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());

          //hide filter row
          $(".k-filter-row").show();

          //to reset filter of the grid when filterable hidden
          $("#grid").data("kendoGrid").dataSource.filter({});
    }
}
});

查看行动中的详细信息

DEMO

kendo ui grid以编程方式隐藏并显示可过滤行

2 个答案: