Kendo ui kendoui菜单过滤器/表单

我想有一个按钮，当用户点击它时，一个过滤表单就会在按钮下方弹出。我想利用剑道UI控件来实现这个效果

事实上，我需要的几乎就是这个例子中的“过滤”：

---

但是，我没有处理数据网格，因此我不能使用上面的示例。

有不同的可能实现。在这里，我将描述一个基于

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>

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

您可以将其定义为

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();
});

---

你可以在这里看到这一点：

这让我大部分时间都在那里。从那里我去掉了菜单标题

title:false

。然后，我必须在文档中附加一个click事件，如果事件目标没有剑道窗口作为祖先，该事件将关闭窗口（这很棘手，因为DropDownList UL不在窗口中，而是在靠近文档根的某个位置）。现在我只需要为不同的字段、数据类型和运算符创建一个动态表单。

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

$("#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();
});