Question

我想要一个按钮，当用户点击它时，按钮下方会弹出一个过滤器表单。我想利用Kendo UI控件来实现这种效果。

事实上，我所需要的几乎就是过滤＆＃39;可以在这个例子中找到：

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

但是，我没有处理数据网格，因此我无法使用上述示例。

Answer 1

有不同的可能实现。在这里，我将基于kendoWindow描述一个，因为那时你有很多可能的过滤形式自定义。

这是包含按钮的HTML：

<div>
    This is the container that includes a 
    <button id="filter" class="k-button">Filter</button>
    that is used to display a form
</div>

然后定义HTML表单。例如：

<div id="form">
    <div>Filtering value:<input data-role="autocomplete"/></div>
    <button class="k-button">Filter</button>
</div>

执行表单初始化：

var form = $("#form").kendoWindow({
    title    : "Filter",
    visible  : false,
    modal    : false,
    draggable: false
}).data("kendoWindow");

最初我们将表单设置为不可见。

您可以将其定义为modal，draggable，甚至可以定义开始和结束效果。

最后，要打开并放置表单，请按下按钮：

$("#filter").on("click", function(e) {
    // Find clicked button
    var button = $(e.currentTarget);
    // and get its position
    var pos = button.offset();
    // shift down the form to open by the height of the button + 5px (margin)
    pos.top += button.outerHeight() + 5;
    // Apply positioning to the form
    form.wrapper.css(pos);
    // display form
    form.open();
});

您可以在此处看到：http://jsfiddle.net/OnaBai/mpq6k/

kendoui菜单过滤器/表单

1 个答案: