首页 文章

Kendo UI - 自定义网格过滤器：复选框在每次单击时都不起作用

提问于
浏览 次
0

[UPDATE]

在我执行以下操作之后：http://dojo.telerik.com/aqIXa当我单击例如ProductName过滤器，然后选择并取消选择所有项目时，转到其他字段示例单价，单击选择并取消选择所有我转回到产品名称字段，现在在过滤器中：

enter image description here

您可以看到再次创建了Select All组合框，并且在重复这些步骤后它将继续创建 . 有没有人有这个想法为什么会发生？

我目前正在Kendo工作并尝试为每列制作自定义网格过滤器 . 我用这个例子：

http://dojo.telerik.com/iwAWU

在我添加的initCheckboxFilter函数中，为select all创建了复选框 .

var selectAllCheckbox= $("<div><input type='checkbox' id='checkAll' checked/> Select All</div>").insertBefore(".k-filter-help-text");

在我实现的那个函数之外：

function clickMe(){
   $("#checkAll").click(function () {
    if ($("#checkAll").is(':checked')) {
        $(".book").prop("checked", true);
    } else {
        $(".book").prop("checked", false);
    }
});
}

（.book是里面模板的类：

var element = $("<div class='checkbox-container'></div>").insertAfter(helpTextElement).kendoListView({
          dataSource: checkboxesDataSource,
          template: "<div><input type='checkbox' class='colDefFilter'  value='#:" + field + "#' checked />#:" + field + "#</div>",
        });

）

我还添加了UnitPrice和UnitInStock字段：

function onFilterMenuInit(e) {
        debugger;
        if (e.field == "ProductName" || "UnitPrice" || "UnitInStock") {
          initCheckboxFilter.call(this, e);

        }
      }

这看起来像：

enter image description here

我第一次单击某些列过滤器上的全选复选框，它会检查并取消选中所有项目，它可以正常工作 . 当我尝试在其他列上执行此操作时，事件不会触发 . 有谁知道出了什么问题？谢谢！

javascript jquery kendo-ui telerik kendo-grid

1 回答

  • 2

    你的问题是你使用id for check all复选框，这就是为什么jquery总是从第一个下拉列表中选择复选框（产品）

    你需要使用checkAll作为类而不是id然后更改你的clickMe（）函数，它将工作：

    function clickMe(){
       $(".checkAll").click(function () {
        if ($(this).is(':checked')) {
           $(this).closest('.k-filter-menu').find(".book").prop("checked", true);
        } else {
            $(this).closest('.k-filter-menu').find(".book").prop("checked", false);
        }
    });
    }

    这是工作示例http://dojo.telerik.com/aqIXa

    Edit :

    你使用添加方式选择全部复选框应该是这样的

    var selectAllCheckbox= $("<div><input type='checkbox' class='checkAll' checked/> Select All</div>").insertBefore(e.container.find(".k-filter-help-text"));

    这是一个问题

    var selectAllCheckbox= $("<div><input type='checkbox' id='checkAll' checked/> Select All</div>").insertBefore(".k-filter-help-text");

    否则它将为先前初始化的过滤器下拉列表添加多个全选复选框 .

    这是更新的演示：http://dojo.telerik.com/aqIXa/4

    回复于

相关问题